SplitChunksPlugin拆分规则（cli4 实测）

最新推荐文章于 2024-07-10 16:57:37 发布

「已注销」

最新推荐文章于 2024-07-10 16:57:37 发布

阅读量3.8k

点赞数 2

文章标签： cli splitChunks webpack

本文链接：https://blog.csdn.net/qq_34295211/article/details/104916108

版权

本文深入探讨Webpack的SplitChunksPlugin拆分规则，通过实例解析默认配置及minSize参数影响，展示如何避免误用并优化chunks拆分，以实现更高效的资源加载。内容包括：默认配置解析、minSize设置对文件拆分的影响，以及模块在不同场景下的打包行为。

摘要由CSDN通过智能技术生成

熟悉拆分规则才能避免误用SplitChunksPlugin并将chunks的拆分效益最大化。讲这个之前，我们先看一下SplitChunksPlugin的默认配置：

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async', // 仅提取按需载入的module
      minSize: 30000, // 提取出的新chunk在两次压缩(打包压缩和服务器压缩)之前要大于30kb
      maxSize: 0, // 提取出的新chunk在两次压缩之前要小于多少kb，默认为0，即不做限制
      minChunks: 1, // 被提取的chunk最少需要被多少chunks共同引入
      maxAsyncRequests: 5, // 最大按需载入chunks提取数
      maxInitialRequests: 3, // 最大初始同步chunks提取数
      automaticNameDelimiter: '~', // 默认的命名规则（使用~进行连接）
      name: true,
      cacheGroups: { // 缓存组配置，默认有vendors和default
        vendors: {
          test: /[\\/]node_modules[\\/]/, // 匹配需拆分chunk的目录
          priority: -10 // 拆分优先级
        },
        default: {
          minChunks: 2, // 覆盖外层minChunks,用于提取被引用指定次数的公共模块，这里默认2次
          priority: -20,
          reuseExistingChunk: true // 是否重用已存在的chunk
        }
      }
    }
  }
}

官方文档看这里：webpack split-chunks-plugin 插件文档, github上的译文请看这里： github splitChunksPlugin 译文。

官方文档有些地方缺少实例，也比较难理解。译文中有译文作者的补充。下面笔者介绍几个比较重要的规则，并会附上结果截图方便进行对比。

1. splitChunks.chunks (async, initial, all) 这里有三个值，默认是async。 .async对动态加载的模块进行拆分 .in