跳到主要内容

配置项

2024年11月23日
柏拉文
越努力，越幸运

一、chunks​

1.1 认识​

chunks 定义分割的代码类型

  • async：仅分割动态导入的模块（默认）。

  • initial：仅分割初始加载模块。

  • all：分割所有模块（推荐，常用）。

1.2 语法​

optimization: {
    splitChunks: {
      chunks: "all", 
      cacheGroups: {
        lodash: {
          name: "lodash", 
          test: /[\\/]node_modules[\\/]lodash[\\/]/, 
          chunks: "all",
        },
        vendors: {
          chunks: "all",
          name: "vendors",
          test: /[\\/]node_modules[\\/]/,
        },
        common: {
          chunks: "all", 
          name: "common",
          test: /[\\/]src[\\/]common[\\/]/,
        },
      },
    }
}

二、minSize​

2.1 认识​

minSize 模块分割的最小大小（单位：字节）。模块小于这个值时，不会被分割。

2.2 语法​

optimization: {
    splitChunks: {
      cacheGroups: {
        common: {
          minSize: 0, 
          name: "common",
          test: /[\\/]src[\\/]common[\\/]/,
        }
      },
    }
}

三、minChunks​

3.1 认识​

minChunks 模块被引用的最少次数，满足这个条件的模块才会被分割。

四、cacheGroups​

4.1 认识​

cacheGroups 定义分组规则，决定模块最终的归属和输出文件。

4.2 语法​

splitChunks.cacheGroups 语法

optimization: {
    splitChunks: {
      chunks: "all", 
      cacheGroups: {
        lodash: {
          name: "lodash", 
          test: /[\\/]node_modules[\\/]lodash[\\/]/, 
          chunks: "all",
          priority: 10, 
        },
        vendors: {
          chunks: "all",
          priority: 9,
          name: "vendors",
          test: /[\\/]node_modules[\\/]/,
        },
        common: {
          priority: 8,
          minSize: 0, 
          chunks: "all", 
          name: "common",
          test: /[\\/]src[\\/]common[\\/]/,
          reuseExistingChunk: true, 
        },
      },
    },
}

4.3 配置项​

  • test：匹配的模块路径或名称（支持正则）。

  • name：输出文件的名称。

  • chunks: 定义分割的代码类型, ``async**：仅分割动态导入的模块（默认）。**initial**：仅分割初始加载模块。**all`：分割所有模块（推荐，常用）。

  • priority：优先级，数值越大优先级越高。

  • reuseExistingChunk：如果模块已经存在于某个分组中，其他分组引用时复用，而不是重新打包。如果关闭的话，每个分组都会重新生成模块副本，可能导致重复代码。建议：开启以减少重复代码。主要用于避免生成重复的 chunk， reuseExistingChunk 用于检查是否已经存在可以复用的代码块。如果某些模块已经被打包到某个 chunk 中，则复用该 chunk，而不生成新的代码块。

4.4 构建顺序​

splitChunks.cacheGroups 构建顺序: 在 Webpack 的 splitChunks.cacheGroups 配置中，最终的构建结果与规则的顺序和优先级有关。cacheGroups 是一个对象，其中的每个键定义了一个分组规则。Webpack 按照以下逻辑决定模块最终分配到哪个分组：

  1. priority 属性: 每个分组可以设置 priority，值越高，优先级越高。优先级高的分组会抢先匹配模块。如果模块符合多个分组规则，则分配给优先级最高的分组。

  2. 定义顺序（当 priority 相同）: 如果没有明确指定 priority，则按定义顺序决定优先级，越早定义的分组优先匹配。

  3. 默认分组: 当模块未被任何分组匹配，或者所有分组的 test 条件都不满足时，模块会归入默认分组（如 default 和 defaultVendors）。

splitChunks.cacheGroups priority 决定归属:

cacheGroups: {
  react: {
    name: 'react',
    test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
    chunks: 'all',
    priority: 25,
  },
  vendors: {
    name: 'vendors',
    test: /[\\/]node_modules[\\/]/,
    chunks: 'all',
    priority: 10,
  },
}

react 分组优先级高于 vendors（25 > 10），因此 react 和 react-dom 模块会被优先提取到 react.js，即使它们也符合 vendors 分组规则。

splitChunks.cacheGroups 顺序影响默认行为: 如果没有设置 priority，Webpack 会按分组的定义顺序匹配：

cacheGroups: {
  vendors: {
    name: 'vendors',
    test: /[\\/]node_modules[\\/]/,
    chunks: 'all',
  },
  react: {
    name: 'react',
    test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
    chunks: 'all',
  },
},

在这种情况下，react 和 react-dom 会被 vendors 捕获，因为 vendors 规则定义在前。

splitChunks.cacheGroups 规则冲突时的分组分配: 当多个规则的优先级相同时, 模块会按最后一个规则匹配分组。如果模块被两次以上使用，默认会划分到最通用的分组。

五、maxAsyncRequests​

maxAsyncRequests 限制异步模块内部并行加载的最大请求数, 也就是每个 import() 里面最大的请求数

六、maxInitialRequests​

maxInitialRequests 限制初始并行加载的最大请求数 , 也就是说每个 import() 里面最大的请求数

七、enforceSizeThreshold​

enforceSizeThreshold

八、automaticNameDelimiter​

automaticNameDelimiter