webpackCommonChunk最佳配置

webpack.optimize.CommonsChunkPlugin插件用于抽取模块中的复用部分，以减小打包的代码量，咱们还须要考虑到缓存的优化

首先是文件名包含文件的hash值，只有在文件有变更时hash值才会变

其次咱们想要将引用的js资源进行几个文件的拆分，

• 第一个文件是最不常常变更的第三方的库文件，

• 第二个文件是业务的公用组件

• 第三个文件是每个页面的js代码

咱们的最佳配置以下：

entry: {
        vender:['./src2/Vue.js','./src2/vender.js'],  //指明vender的库
        common: ['./src2/component1.js','./src2/component2.js'],
        global:['./src2/global.js'], //须要全局进行配置的代码
        page1: ['./src2/page1.js'],
        page2: ['./src2/page2.js']
    },
plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['common','vender','boot'], 
            filename: '[name].[chunkhash].js',
            minChunks: 2
        })
]

minChunks是配置模块复用多少次以上进行抽取。

chunkhash 是这个chunk的hash，而hash是对全部打包的js总体生成的hash，因此为了对缓存的优化，咱们采用chunkhash。

CommonsChunkPlugin中配置的name和entry中配置的入口之间有什么关系？

若是CommonsChunkPlugin 中配置的name在entry中存在，那么这个抽取的模块首先是包含enry中指定的js文件，而后再考虑包含抽取其余entry中的公用部分。

为何要在common中配置boot？

由于配置CommonsChunkPlugin插件之后，就须要在window上挂载window["webpackJsonp"]方法，这个方法中有全部chunk的chunkhash，因此只要有chunk变化，那么这个脚本就变化，因此应该把这个启动脚本单独抽成一个文件，不然就会影响其余不变的文件也改变hash值。

CommonsChunkPlugin中配置的name顺序有什么关系，每个公用模块的抽取逻辑是什么？

这个没有找到官方的解释，经过实践，我认为应该是倒序考虑的，首先是启动脚本放在数组的最后一个文件中，例如boot中。
每个模块的逻辑以下：

首先看本身有没有对应的entry，若是有则抽取entry对应的模块，并递归抽取模块中公用的模块。例如common中的component1.js和component2.js共同依赖jquery，则common中也抽取jquery。

其次看数组中是否还有上一个元素，若是没有则将全部entry中剩余没有抽取的公用模块也都抽取出来，若是有则交给上一个元素，本身也就执行完了。例如vender先将Vue.js和vender.js抽取出来，而后发现还有common模块，因此本身就执行完了，common先将component1.js和component2.js抽取出来之后，发现上面没有文件了，因此就把entry中剩余没有抽取的公共模块也抽取出来了，好比page1.js和page2.js公用的componet4.js。

这样打包之后咱们须要保证页面中文件引用的顺序，由于他们之间有了依赖关系，例如上面的配置页面的引用顺序应该是
1 boot.js
2 vender.js
3 common.js
而后是每个页面的js page1.js 或者page2.js

如何保证页面中js文件的引用顺序?

HtmlwebpackPlugin插件提供了 chunksSortMode方法，能够对页面中引用的chunk进行排序，咱们先定义chunk的顺序数组，而后相似于数组的sort，用小的减去大的返回正序。

var chunksort = ['boot','vender','common','global'];
new HtmlwebpackPlugin({
    chunks: ['boot','vender','common','global',page.outputPath],
    title: page.title,
    // extra: extra, //包含页面额外的配置信息
    template: "src/index.html",
    filename: page.outputPath + '.html',
    chunksSortMode: function (a, b) {
        var aIndex =chunksort.indexOf(a.names[0]);
        var bIndex =chunksort.indexOf(b.names[0]);
        aIndex = aIndex < 0 ? chunksort.length + 1 : aIndex;
        bIndex = bIndex < 0 ? chunksort.length + 1 : bIndex;
        return aIndex - bIndex;
    }
})