在react-router中進(jìn)行代碼拆分

lolomaco 發(fā)布于2019-08-23 15:19 / 669人閱讀

摘要：包括在中也是可以使用。下面是的語法接受三個(gè)參數(shù)第一個(gè)參數(shù)是一個(gè)數(shù)組，代表了當(dāng)前進(jìn)來的模塊的一些依賴第二個(gè)參數(shù)就是一個(gè)回調(diào)函數(shù)。其中需要注意的是，這個(gè)回調(diào)函數(shù)有一個(gè)參數(shù)，通過這個(gè)就可以在回調(diào)函數(shù)內(nèi)動(dòng)態(tài)引入其他模塊。

隨著react項(xiàng)目的迭代開發(fā)，會(huì)發(fā)現(xiàn)build 下靜態(tài)文件包的體積會(huì)越來越臃腫，首次瀏覽網(wǎng)頁，白屏或loading時(shí)間越來越長(zhǎng)，所以代碼拆分非常必要：

一、 react-loadable 組件拆分：

 安裝：
npm install react-loadable -S;

使用方法： App組件中導(dǎo)入 react-loadable組件，app.js 中引入一下代碼

：

import Loadable from "react-loadable";
import Loading from "./my-loading-component";

const LoadableComponent = Loadable({
  loader: () => import("./my-component"),
  loading: Loading,
});

export default class App extends React.Component {
  render() {
    return ;
  }
}

Loading 組件內(nèi)容:

import React from "react"

    export default () => {
        return Loading......
    }

二、異步函數(shù)拆分

創(chuàng)建異步組件：
在src目錄下創(chuàng)建異步組件 AsyncComponent

import React, { Component } from "react";
export default function asyncComponent(importComponent) {

class AsyncComponent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            component: null
        };
    }
    async componentDidMount() {
        const { default: component } = await importComponent();

        this.setState({
            component: component
        });
    }

    render() {
        const Com = this.state.component;

        return (Com ?  : null)
    }
}

return AsyncComponent;

}

使用異步組件

我們將使用它asyncComponent來動(dòng)態(tài)導(dǎo)入我們想要的組件。

const Home = asyncComponent(() => import("./components/Home"));
而不是靜態(tài)導(dǎo)入我們的組件。

import Home from "./components/Home";

實(shí)例：

import React, { Component } from "react";
import "./App.css";
import { Provider } from "react-redux"
import store from "./store"
import { HashRouter as Router, Switch, Route } from "react-router-dom"
import Home from "./Home"
import { AppContainer } from "react-hot-loader";

import asyncComponent from "./AsyncComponent"
const Abc= asyncComponent(() => import("./Abc")); 
const Bac = asyncComponent(() => import("./Bac"));

class App extends Component {
static state = {

}
static submint = () => {

}

render() {

}
}

export default App;

三、require.ensure() 方法

在webpack 2的官網(wǎng)上寫了這么一句話：
require.ensure() is specific to webpack and superseded by import().
所以，在webpack 2里面應(yīng)該是不建議使用require.ensure()這個(gè)方法的。但是目前該方法仍然有效，所以可以簡(jiǎn)單介紹一下。包括在webpack 1中也是可以使用。下面是require.ensure()的語法：
require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)
require.ensure()接受三個(gè)參數(shù)：
第一個(gè)參數(shù)dependencies是一個(gè)數(shù)組，代表了當(dāng)前require進(jìn)來的模塊的一些依賴；

第二個(gè)參數(shù)callback就是一個(gè)回調(diào)函數(shù)。其中需要注意的是，這個(gè)回調(diào)函數(shù)有一個(gè)參數(shù)require，通過這個(gè)require就可以在回調(diào)函數(shù)內(nèi)動(dòng)態(tài)引入其他模塊。值得注意的是，雖然這個(gè)require是回調(diào)函數(shù)的參數(shù)，理論上可以換其他名稱，但是實(shí)際上是不能換的，否則webpack就無法靜態(tài)分析的時(shí)候處理它；

第三個(gè)參數(shù)errorCallback比較好理解，就是處理error的回調(diào)；

第四個(gè)參數(shù)chunkName則是指定打包的chunk名稱。

因此，require.ensure()具體的用法如下：

require.ensure([], require => {
let chat = require("/components/chart");
someOperate(chat);
}, error => {
console.log("failed");
}, "mychat");
});