...持续中

=======================================================

抽离公共代码

我们在开发多个页面的项目的时候，有时候会在几个页面中引用某些公共的模块，这些公共模块多次被下载会造成资源浪费，如果把这些公共模块抽离出来只需下载一次之后便缓存起来了，这样就可以避免因重复下载而浪费资源，那么怎么在webpack中抽离出公共部分呢？方法如下：

公共模块抽离

举例：

项目中分别有a.js, b.js, page1.js, page2.js这四个JS文件， page1.js 和 page2.js中同时都引用了a.js, b.js， 这时候想把a.js, b.js抽离出来合并成一个公共的js，然后在page1, page2中自动引入这个公共的js，怎么配置呢？如下：

配置webpack.config.js文件：

module.exports = {  //...  //优化项配置  optimization: {    // 分割代码块    splitChunks: {      cacheGroups: {        //公用模块抽离        common: {          chunks: 'initial',           minSize: 0, //大于0个字节          minChunks: 2 //抽离公共代码时，这个代码块最小被引用的次数        }      }    }  }}

完成！

第三方模块抽离

页面中有时会引入第三方模块，比如import $ from 'jquery'; page1中需要引用，page2中也需要引用，这时候就可以用vendor把jquery抽离出来，方法如下：

module.exports = {  //...  //优化项配置  optimization: {    // 分割代码块    splitChunks: {      cacheGroups: {        //公用模块抽离        common: {          chunks: 'initial',          minSize: 0, //大于0个字节          minChunks: 2, //在分割之前，这个代码块最小应该被引用的次数        },                //第三方库抽离        vendor: {          priority: 1, //权重          test: /node_modules/,          chunks: 'initial',          minSize: 0, //大于0个字节          minChunks: 2, //在分割之前，这个代码块最小应该被引用的次数        }      }    }  }}

注意：这里需要配置权重 priority，因为抽离的时候会执行第一个common配置，入口处看到jquery也被公用了就一起抽离了，不会再执行wendor的配置了，所以加了权重之后会先抽离第三方模块，然后再抽离公共common的，这样就实现了第三方和公用的都被抽离了。

不加权重之前：

加了权重之后：