在使用 React、Vue 等框架时，我们可以使用其配套的路由库如 react-router 和 vue-router 构建单页应用，以发挥框架本身的最大威力。
单页应用使我们可以无刷新访问页面，拥有较好的性能和用户体验，不再像过去那样，每开一个页面都要从服务器重新请求资源，还可能会因为网络的问题等待良久。
单页应用在初次进入页面时就加载全部的资源，后续除了接口调用，几乎不和服务器进行交互了，页面切换无烦恼。
但使用单页应用也有一个问题，就是当项目很大时，我们常常打包后的文件常常很大，尽管我们可以尝试使用 webpack 的 CommonsChunkPlugin 来提取公共代码，但随着项目体积的增大，打包后的代码还是不够理想。
由于在访问第一个页面时需要加载所有的资源，包括体积庞大的 bundle 文件，会造成首次加载速度变慢，首屏渲染时间增加等一些列的用户体验问题。为了解决这个问题，我们希望有这么一种策略：是否可以在打包时不将所有的文件一起打包，而是只打包最必须的一部分（如首页、登录），剩下的模块进行分片打包，每访问到相应的页面时再按需请求呢？
答案就是 webpack 的分片机制。
webpack 分片机制
webpack 分片机制就是将代码进行分片打包，实现按需加载，使用分片机制前，首先需要满足两个配置条件：
1.output 选项中需要有 chunkFileName：
chunkFilename: "static/js/[name].chunk.js",
2.plugins 选项中需要有 CommonsChunkPlugin：
new webpack.optimize.CommonsChunkPlugin({ name:'common', filename:'static/js/common.js'}),
虽然代码分片打包主要用于生产环境，但建议在开发环境中也加上这样的配置，就可以无需构建而在开发环境（development）时就能看到和生产环境（production）一样的效果了，还可以及早的发现问题。
几种引入文件的方式
webpack 支持下面几种文件的引用方式：
- require
- import
- require.ensure
前两个想必大家都不陌生，最后一个可能不太常见，而这种方式正是使 webpack 进行分片打包的关键。
使用 require 或 import 进行打包时，webpack 在执行静态编译检查时，会将 require 或 import 后的代码打包到同一文件中，而如果使用 require.ensure 引入文件，webpack 在检查时发现这种引入方式，就知道要对这部分文件进行分片打包了，打包的文件名就是前面在 webpack 配置中定义的 chunkFilename。
使用 require.ensure
使用 require.ensure 较为简单，这里以 Home 组件为例：
require.ensure([],(require) => {
const User = require("./User").default
},"user");
下面说一下几个相关参数的含义：
require.ensure 接受两个参数：
- 第一个参数是数组，表示该模块依赖的模块，该模块会在被依赖的模块都被装载后再引入，如果没有依赖性，使用空数组即可
- 第二个参数是一个回调函数，相关的异步模块就是在这个函数中被引入的
- 第三个参数是分片（chunk）文件的文件名，也就是 chunkFileName 配置中的 [name] 属性，如果不指定该参数，将默认为一个数字作为唯一的 ID，建议总是定义 chunk 文件名，方便后期调试。
在 react-router 中使用代码分片
同样，配合 require.ensure 也可以实现路由的按需加载。在使用路由按需加载时，我们只需将前面的函数进行一下包装，再将 component 换成 getComponent 即可。举个例子：
...
const getHomeRoute = ( location,cb ) => {
console.log(location)
require.ensure([],(require) => {
cb(null,require("./Home").default)
},"home");
}
const getUserRoute = ( location,cb ) => {
require.ensure([],(require) => {
cb(null,require("./User").default)
},"user");
}
ReactDOM.render(
<Provider store = { store }>
<Router history = { hashHistory }>
<Route path = "/" component = { App }>
<IndexRoute getComponent = { getHomeRoute } />
<Route path = "home" getComponent = { getHomeRoute }></Route>
<Route path = "user" getComponent = { getUserRoute }></Route>
</Route>
</Router>
</Provider>
, document.getElementById("root"));
如果不使用异步路由，Route 组件中使用 component 属性，如果需要使用异步路由，Route 组件中使用 getComponent 属性，属性值就是前面定义的相应获取函数。
关于获取函数的两个参数：
- 第一个参数 location 是当前的路由信息
- 第二个参数是一个回调函数，为 Node 的 Error First 风格，该回调函数在异步组件被加载成功后再调用，然后将加载好的组件传给 router。
总结
本文主要讲了使用 require.ensure 配合 webpack 进行异步加载，并讲到了其和 react-router 的配合实现异步路由，要实现异步路由加载，需要满足以下两个条件：
- 使用 require.ensure 让 webpack 对代码进行分片打包
- 在 react-router 中使用 getComponent 而不是 component 加载异步分片文件
webpack 的看家本领就是文件打包，对于异步文件分片的支持自然也不在话下，使用代码分片打包可以显著降低打包后的文件大小，并在生产场合下提高用户体验。
完。
