react-router4中代码拆分的方法

所以，在webpack 2里面应该是不建议使用require.ensure()这个方法的。但是目前该方法仍然有效，所以可以简单介绍一下。包括在webpack 1中也是可以使用。下面是require.ensure()的语法：

require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)

require.ensure()接受三个参数：

1. 第一个参数dependencies是一个数组，代表了当前require进来的模块的一些依赖；

2. 第二个参数callback就是一个回调函数。其中需要注意的是，这个回调函数有一个参数require，通过这个require就可以在回调函数内动态引入其他模块。值得注意的是，虽然这个require是回调函数的参数，理论上可以换其他名称，但是实际上是不能换的，否则webpack就无法静态分析的时候处理它；

3. 第三个参数errorCallback比较好理解，就是处理error的回调；

4. 第四个参数chunkName则是指定打包的chunk名称。

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

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

Bundle Loader

除了使用上述两种方法，还可以使用webpack的一些组件。例如使用Bundle Loader：

npm i --save bundle-loader

使用require("bundle-loader!./file.js")来进行相应chunk的加载。该方法会返回一个function，这个function接受一个回调函数作为参数。

let chatChunk = require("bundle-loader?lazy!./components/chat");
chatChunk(function(file) {
 someOperate(file);
});

和其他loader类似，Bundle Loader也需要在webpack的配置文件中进行相应配置。Bundle-Loader的代码也很简短，如果阅读一下可以发现，其实际上也是使用require.ensure()来实现的，通过给Bundle-Loader返回的函数中传入相应的模块处理回调函数即可在require.ensure()的中处理，代码最后也列出了相应的输出格式：

/*
Output format:
 var cbs = [],
 data;
 module.exports = function(cb) {
 if(cbs) cbs.push(cb);
 else cb(data);
 }
 require.ensure([], function(require) {
 data = require("xxx");
 var callbacks = cbs;
 cbs = null;
 for(var i = 0, l = callbacks.length; i < l; i++) {
 callbacks[i](data);
 }
 });
*/

react-router v4 中的代码拆分

最后，回到实际的工作中，基于webpack，在react-router4中实现代码拆分。react-router 4相较于react-router 3有了较大的变动。其中，在代码拆分方面，react-router 4的使用方式也与react-router 3有了较大的差别。

在react-router 3中，可以使用Route组件中getComponent这个API来进行代码拆分。getComponent是异步的，只有在路由匹配时才会调用。但是，在react-router 4中并没有找到这个API，那么如何来进行代码拆分呢？

在react-router 4官网上有一个代码拆分的例子。其中，应用了Bundle Loader来进行按需加载与动态引入

然而，在项目中使用类似的方式后，出现了这样的警告：

Unexpected '!' in 'bundle-loader?lazy!./component/chat'. Do not use import syntax to configure webpack loaders import/no-webpack-loader-syntax
Search for the keywords to learn more about each error.

在webpack 2中已经不能使用import这样的方式来引入loader了（no-webpack-loader-syntax）

Webpack allows specifying the loaders to use in the import source string using a special syntax like this:

This syntax is non-standard, so it couples the code to Webpack. The recommended way to specify Webpack loader configuration is in a Webpack configuration file.

我的应用使用了create-react-app作为脚手架，屏蔽了webpack的一些配置。当然，也可以通过运行npm run eject使其暴露webpack等配置文件。然而，是否可以用其他方法呢？当然。

这里就可以使用之前说到的两种方式来处理：import()或require.ensure()。

和官方实例类似，我们首先需要一个异步加载的包装组件Bundle。Bundle的主要功能就是接收一个组件异步加载的方法，并返回相应的react组件：

export default class Bundle extends Component {
 constructor(props) {
 super(props);
 this.state = {
 mod: null
 };
 }

 componentWillMount() {
 this.load(this.props)
 }

 componentWillReceiveProps(nextProps) {
 if (nextProps.load !== this.props.load) {
 this.load(nextProps)
 }
 }

 load(props) {
 this.setState({
 mod: null
 });
 props.load((mod) => {
 this.setState({
 mod: mod.default ? mod.default : mod
 });
 });
 }

 render() {
 return this.state.mod ? this.props.children(this.state.mod) : null;
 }
}

在原有的例子中，通过Bundle Loader来引入模块：

import loadSomething from 'bundle-loader?lazy!./About'

const About = (props) => (
 <Bundle load={loadAbout}>
 {(About) => <About {...props}/>}
 </Bundle>
)

由于不再使用Bundle Loader，我们可以使用import()对该段代码进行改写：

需要注意的是，由于import()会返回一个Promise对象，因此Bundle组件中的代码也需要相应进行调整

路由部分没有变化

<Route path="/chat" component={Chat}/>

这时候，执行npm run start，可以看到在载入最初的页面时加载的资源如下

而当点击触发到/chat路径时，可以看到

动态加载了2.chunk.js这个js文件，如果打开这个文件查看，就可以发现这个就是我们刚才动态import()进来的模块。

当然，除了使用import()仍然可以使用require.ensure()来进行模块的异步加载。相关示例代码如下：

const Chat = (props) => (
 <Bundle load={(cb) => {
 require.ensure([], require => {
 cb(require('./component/chat'));
 });
 }}>
 {(Chat) => <Chat {...props}/>}
 </Bundle>
);

export default class Bundle extends Component {
 constructor(props) {
 super(props);
 this.state = {
 mod: null
 };
 }

 load = props => {
 this.setState({
 mod: null
 });
 props.load(mod => {
 this.setState({
 mod: mod ? mod : null
 });
 });
 }

 componentWillMount() {
 this.load(this.props);
 }

 render() {
 return this.state.mod ? this.props.children(this.state.mod) : null
 }
}

此外，如果是直接使用webpack config的话，也可以进行如下配置

结束

代码拆分在单页应用中非常常见，对于提高单页应用的性能与体验具有一定的帮助。我们通过将第一次访问应用时，并不需要的模块拆分出来，通过scipt标签动态加载的原理，可以实现有效的代码拆分。在实际项目中，使用webpack中的import()、require.ensure()或者一些loader（例如Bundle Loader）来做代码拆分与组件按需加载。