Webpack高级配置「四」-- 抽离公共代码和第三方模块 ***

为什么要抽离公共模块、第三方模块？

多入口打包时引入公共部分，公共部分会进行重复打包，打包效率降低，打包文件体积变大；
第三方模块不会改变，但页面发生任何变动，第三方模块都需要重新打包，通过抽离第三方模块，页面变动时命中缓存，只打包开发部分代码，提升打包性能。

1. 将第三方模块、公共模块分别打包为chunk

将第三方模块、公共模块分别打包，分别产出对应的chunk，以便按需引用；
将两者均放在cacheGroups做缓存分组中，将包作为缓存使用，避免重复打包；

• optimization.splitChunks 进行分割代码块
• optimization.splitChunks.cacheGroups做缓存分组：第三方模块、公共模块

[webpack.prod.js]

optimization: {
  // 分割代码块
  splitChunks: {
    chunks: 'all',
    /**
      * initial 入口 chunk，对于异步导入的文件不处理
        async 异步 chunk，只对异步导入的文件处理
        all 全部 chunk
      */

    // 缓存分组
    cacheGroups: {
      // 第三方模块
      vendor: {
        name: 'vendor', // chunk 名称
        priority: 1, // 权限更高，优先抽离，重要！！！
        test: /node_modules/, // 模块的路径
        minSize: 0, // 大小限制
        minChunks: 1 // 最少复用过几次，只要命中一次，就把他作为单独的模块
      },
      // 公共的模块
      common: {
        name: 'common', // chunk 名称
        priority: 0, // 优先级
        minSize: 0, // 公共模块的大小限制
        minChunks: 2 // 公共模块最少复用过几次，引用两次及以上，把公共模块拆分
      }
    }
  }
}

2. 按需配置入口文件的chunk

多入口时，每个入口文件可以 按需配置自己所需要的chunk模块：

• HtmlWebpackPlugin插件用于生成html文件
• 在 HtmlWebpackPlugin插件 的chunks属性中配置当前html需要引入的chunk

[webpack.common.js]

plugins: [
  // 多入口 - 生成 index.html
  new HtmlWebpackPlugin({
    template: path.join(srcPath, 'index.html'),
    filename: 'index.html',
    // chunks 表示该页面要引用哪些 chunk （即上面的 index 和 other），默认全部引用
    chunks: ['index', 'vendor', 'common'] // 要考虑代码分割
  }),
  // 多入口 - 生成 other.html
  new HtmlWebpackPlugin({
    template: path.join(srcPath, 'other.html'),
    filename: 'other.html',
    chunks: ['other', 'common'] // 考虑代码分割
  })
]

3. 抽离后打包产出

执行npm run build打包后dist文件中：

• index.html引入文件 变为vendor.js common.js index.js；
• other.html引入文件 变为common.js other.js

综上，公共模块和第三方模块进行了独立的分包打包并用作为缓存，避免了重复打包；同时多入口又可以按需引用自己所需模块，避免引用无用包，提升了打包性能；