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来进行按需加载与动态引入
import loadSomething from 'bundle-loader?lazy!./Something'
然而，在项目中使用类似的方式后，出现了这样的警告：
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:
var moduleWithOneLoader = require("my-loader!./my-awesome-module");
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()对该段代码进行改写：
const Chat = (props) => ( <Bundle load={() => import('./component/chat')}> {(Chat) => <Chat {...props}/>} </Bundle> );
需要注意的是，由于import()会返回一个Promise对象，因此Bundle组件中的代码也需要相应进行调整