webpack分离打包第三方库之CommonsChunkPlugin

CommonsChunkPlugin

这CommonsChunkPlugin是一个选入功能，它创建一个单独的文件（称为块），由多个入口点之间共享的通用模块组成。通过将通用模块从bundle中分离出来，所产生的分块文件最初可以被加载一次，并存储在缓存中供以后使用。这会导致pagespeed优化，因为浏览器可以快速提供缓存中的共享代码，而不必在访问新页面时强制加载更大的包。

使用 CommonsChunkPlugin 为每个页面间的应用程序共享代码创建 bundle。由于入口起点增多，多页应用能够复用入口起点之间的大量代码/模块，从而可以极大地从这些技术中受益。
多页面程序开发中，存在不同页面JS引入了相同的库和模块，这时候将公共的库抽成一个JS文件，每个页面都可能会引入这份公共的JS文件，这份JS文件只要没有更新，就只用下载一次。生成的时候使用hash做标志，进行缓存。

image.png

在只更新了main的情况下，index页面获取资源文件情况如图，indexJS和CommonJS都是获取的缓存。
CommonsChunkPlugin这个插件是用来提取公共代码的，通过将公共模块提取出来，只在页面加载的时候引入一次，其他页面可以利用前一个页面缓存下来的类库，提升应用的加载效率。
对于你自己的app来说，可能也会出现共享的自己写的公共模块假设叫Common，所以你也需要提取这个common。这个时候需要用到CommonsChunkPlugin，官方的文档说的很清楚了，这个CommonsChunkPlugin 可以通过传参minChunks来控制你希望重复出现几次的module 被提取出来打包。也就是说你自己可以控制当一个模块被引入几次可以被打包到共用的chunk中，还可以规定如果这个公共模块小于一个值 minSize，就不被提取出来这些都可以帮助你控制你想要的粒度。当你改的不是公共模块的代码，理论上webpack 打包的时候本来就不会影响其他代码。

new webpack.optimize.CommonsChunkPlugin({
            name: 'vendors', // 将公共模块提取，生成名为`vendors`的chunk
            chunks: ['index','list','about'], //提取哪些模块共有的部分
            minChunks: 3 // 提取至少3个模块共有的部分
        }),

webpack打包生成多个vendor
因为有时候不想把所有库都打包到一起，势必要分开打包，例如把jQuery和react分开打包成两个vendor
CommonsChunkPlugin里面，vender的顺序要和加载顺序相反。
其它提取vendor的配置，官方已经给出了demo：
Common and Vendor Chunks
Multiple Common Chunks
Multiple Entry Points with Commons Chunk

entry:{
        index:path.resolve(__dirname,"../app/js/index.js"),
        main:path.resolve(__dirname,"../app/js/main.js"),
        vendor_1:["jquery"],
        vendor_2:[path.resolve(__dirname,"../app/lib/common.js")]
    },
plugins:[
        new webpack.optimize.CommonsChunkPlugin({
            name: ["vendor_2","vendor_1"],
            minChunks: Infinity,
        })
    ]

想避免重复打包第三方库

 //为了避免vendor.*.js的hash值发生改变需要输出一个manifest.*.js文件
        new webpack.optimize.CommonsChunkPlugin({
            name: ‘manifest‘ //But since there are no more common modules between them we end up with just the runtime code
included in the manifest file
        })