使用 Webpack 进行代码分片

在使用 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(
    
        
            
                
                
                
            
        
    
, 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 的看家本领就是文件打包，对于异步文件分片的支持自然也不在话下，使用代码分片打包可以显著降低打包后的文件大小，并在生产场合下提高用户体验。

完。