渐进式配置webpack4单页面和多页面(二)优化拆包优化

2023-12-11 04:40:16

在我们上一节中，我们实现了webpack4的单页面和多页面打包。这节我们将从上一节的代码基础上，通过对optimization.splitChunks的配置，来实现对代码的分包优化，解决项目中可能因为各个模块之间依赖过多而导致的代码体积太大问题。

优化前的代码分析

webpack的optimization.splitChunks的优化原理是将chunks中公用的模块拆分出来。默认将node_modules中引入的模块都视为公用的。这种配置虽然简单，但也容易产生问题，比如：

默认配置不会拆分同步模块，如果我们想对同步模块进行拆分，就需要将optimization.splitChunks.chunks从async改为all。
默认配置只会对node_modules中的模块进行拆分，不会对src中的模块进行拆分，如果我们想对src中的模块进行拆分，就需要将optimization.splitChunks.cacheGroups中增加一个cacheGroup。

优化后的配置

了解了默认配置的优缺点之后，我们可以根据自己的实际情况进行优化配置。比如，我们可以将optimization.splitChunks配置如下：

optimization: {
  splitChunks: {
    chunks: 'all', // 拆分同步模块
    cacheGroups: {
      commons: {
        test: /[\\/]node_modules[\\/]/, // 将node_modules中的模块拆分成一个chunk
        name: 'commons', // 拆分后的chunk的名字
        chunks: 'all', // 拆分同步和异步模块
        minSize: 30000, // 拆分出至少30KB的模块
        minChunks: 2 // 拆分出至少被2个模块引入的模块
      },
      vendor: { // 将src中的模块拆分成一个chunk
        test: /[\\/]src[\\/]/,
        name: 'vendor',
        chunks: 'all',
        minSize: 30000,
        minChunks: 2
      }
    }
  }
}