隨著react項目的迭代開發，會發現build 下靜態文件包的體積會越來越臃腫，首次瀏覽網頁，白屏或loading時間越來越長，所以代碼拆分非常必要：

一、 react-loadable 組件拆分：

安裝： npm install react-loadable -S;

使用方法： App組件中導入 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 <LoadableComponent/>;} }

Loading 組件內容:

import React from "react"export default () => {return <div style={{ position: "fixed", left: "50%", top: "50%"}}>Loading......</div>}

二、異步函數拆分

創建異步組件：
在src目錄下創建異步組件 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 ? <Com {...this.props} /> : null)} }return AsyncComponent;

}

使用異步組件

我們將使用它asyncComponent來動態導入我們想要的組件。

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

import Home from "./components/Home";

實例：

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() {

return (<AppContainer><Provider store={store}><Router><Switch><Route exact path="/" component={Home} /><Route exact path="/home/aa" component={Abc} /><Route exact path="/home/bb" component={Bac} /></Switch></Router></Provider></AppContainer> );

}
}

export default App;

三、require.ensure() 方法

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

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

第三個參數errorCallback比較好理解，就是處理error的回調；

第四個參數chunkName則是指定打包的chunk名稱。

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

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

總結

以上是生活随笔為你收集整理的在react-router中进行代码拆分的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。