在react-router中进行代码拆分

随着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目录下创建异步组件 AsyncComponentimport 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’);});