Webpack splitChunks插件疑问：优先级为何引发代码异步初始化？

先理清楚你的场景：需要app.header.js在页面头部同步加载并初始化（提供全局方法给后续内联脚本调用），其余脚本放在body末尾加载；当前遇到的问题是必须在common chunk的条件中加入!isUsedInAppHeader才能生成common.header chunk，而用优先级修复会导致app.header.js异步初始化。

1. 为何必须添加!isUsedInAppHeader条件？ #

这本质是Webpack splitChunks的默认合并逻辑导致的：

• 默认情况下，splitChunks会把所有入口（包括app.header.js和其他页面入口）共享的模块打包到同一个common chunk里。
• 如果app.header.js里的依赖模块被其他异步加载的chunk引用，Webpack会默认把这些模块抽到普通的common chunk（而不是common.header），这就会导致app.header.js失去必要的同步初始化代码——因为核心逻辑被移到了异步加载的common chunk里，无法在页面头部立即执行。

添加!isUsedInAppHeader条件，其实是把app.header.js相关的模块排除在普通common chunk的合并范围外，强制让这些模块进入专门的common.header chunk，保证app.header.js能带着完整的同步初始化代码在页面头部加载，不会被拆分到其他异步chunk中。

2. 解决方案：导出可立即初始化的公共chunk，或替代方案 #

当然有更优雅的方式，不需要依赖自定义的isUsedInAppHeader判断，这里给你两个靠谱的方案：

方案一：配置独立的header专属cacheGroup #

通过明确拆分splitChunks的缓存组，把头部同步代码和其他异步代码的公共模块完全分开：

module.exports = {
  // ...其他配置
  optimization: {
    splitChunks: {
      cacheGroups: {
        // 专门处理头部同步代码的公共chunk
        headerCommon: {
          name: 'common.header',
          // 匹配app.header.js本身及其依赖的模块
          test: /[\\/]src[\\/]header[\\/]|app\.header\.js/,
          chunks: 'initial', // 只处理初始同步chunk，确保能在头部同步加载
          priority: 10, // 优先级高于普通common chunk
          enforce: true, // 强制创建该chunk，不受最小体积/引用次数限制
        },
        // 处理其他异步加载代码的公共chunk
        common: {
          name: 'common',
          test: /[\\/]node_modules[\\/]|src[\\/]common[\\/]/,
          chunks: 'async', // 只处理异步chunk，避免和头部同步代码冲突
          priority: 5,
          minChunks: 2, // 仅合并被引用2次以上的模块
        }
      }
    }
  }
};

这个配置的核心是：

• 用chunks: 'initial'确保common.header是同步加载的chunk，能放在页面头部
• 用chunks: 'async'让普通common chunk只处理异步加载的模块，不会影响头部的同步代码
• 高优先级保证头部相关模块优先进入common.header，不会被普通common chunk合并

方案二：将app.header.js设为独立入口 #

直接把app.header.js作为Webpack的单独入口，而不是作为其他入口的依赖：

module.exports = {
  entry: {
    'app.header': './src/app.header.js', // 头部同步入口
    'app': './src/app.js', // 页面主体入口
    // 其他页面入口...
  },
  // ...其他配置
};

然后在HTML模板中手动指定加载顺序：

<head>
  <!-- 头部加载同步的app.header.js及其公共chunk -->
  <script src="<%= htmlWebpackPlugin.files.chunks['app.header'].entry %>"></script>
  <script src="<%= htmlWebpackPlugin.files.chunks['common.header'].entry %>"></script>
</head>
<body>
  <!-- 页面内容 -->
  <!-- 末尾加载其他脚本 -->
  <script src="<%= htmlWebpackPlugin.files.chunks['common'].entry %>"></script>
  <script src="<%= htmlWebpackPlugin.files.chunks['app'].entry %>"></script>
</body>

这种方式更直观：Webpack会把app.header.js当作独立的初始chunk，自然支持同步加载；如果它有依赖的公共模块，也会被headerCommon缓存组捕获，一起同步加载。

补充：为什么设置优先级会导致异步初始化？ #

你提到的“设置更高优先级导致app.header.js异步”，大概率是因为你的common.header缓存组没有设置chunks: 'initial'——如果默认用chunks: 'all'，Webpack可能会把app.header.js的模块和异步模块合并，导致整个app.header相关的chunk变成异步加载类型，无法在头部同步初始化。只要把chunks明确设为initial，就能避免这个问题。

内容的提问来源于stack exchange，提问作者actimel