如何阻止Webpack为内联脚本添加延迟执行机制？

一、那两行延迟代码是什么？ #

你看到的o.O是Webpack运行时的__webpack_require__.O函数，核心作用是等待依赖的chunk加载完成后，再执行目标模块代码。具体来说：

• o.O(void 0, [4998], (() => o(5270)))：表示等待ID为4998的chunk加载完成，再执行ID为5270的模块
• 第二行t = o.O(t)是进一步确认加载状态，确保依赖完全就绪后才继续执行

二、为什么会出现这段代码？ #

根源是你的inlined_script.js依赖了被拆分到chunk-vendors或chunk-common里的模块，但开发环境下你手动注入inlined_script.js时，这些依赖的chunk还未加载：

1. 你的inlined/tier0.ts（inlined_script的入口）引用了符合chunk-vendors规则的模块（比如node_modules中除@company外的包，或src-vendor下的代码）
2. 你的splitChunks配置中，vendors组的minChunks:10说明这些依赖被至少10个入口引用，因此被抽离到chunk-vendors中
3. 开发环境你通过模板手动注入inlined_script.js，跳过了Webpack默认的chunk依赖顺序处理，导致inlined_script.js先加载，但它需要的依赖模块还在未加载的chunk-vendors里，Webpack自动生成这段等待代码来保证执行顺序正确

而手动添加chunk-vendors.js在前面时，依赖的模块已经加载完成，Webpack运行时检测到依赖就绪，就不会触发延迟执行逻辑。

三、解决办法 #

1. 放弃手动注入，让html-webpack-plugin自动管理chunk顺序 #

开发环境不要在模板里手动写script标签，直接配置html-webpack-plugin的chunks属性指定加载顺序，让插件自动生成正确的script标签：

// 在你的Vue CLI配置中修改html插件
config.plugin('html').tap(args => {
  // 指定chunk加载顺序，确保依赖先加载
  if (process.env.NODE_ENV === 'development') {
    args[0].chunks = ['chunk-vendors', 'chunk-common', 'inlined_script'];
  }
  return args;
});

这样模板里可以删掉手动注入的代码，让插件自动处理依赖顺序，避免出现等待逻辑。

2. 如果必须手动注入，确保先加载所有依赖chunk #

如果一定要保留模板里的手动注入逻辑，需要先加载inlined_script依赖的所有chunk：

<%
if (process.env.NODE_ENV === 'development') {
%>
  <script src="<%= JSON.stringify(htmlWebpackPlugin.files.js.find(path => path.startsWith('/js/chunk-vendors.js'))) %>"></script>
  <script src="<%= JSON.stringify(htmlWebpackPlugin.files.js.find(path => path.startsWith('/js/chunk-common.js'))) %>"></script>
  <script src="<%= JSON.stringify(htmlWebpackPlugin.files.js.find(path => path.startsWith('/js/inlined_script.js'))) %>"></script>
<%
}
%>

但这种方式需要手动维护依赖关系，不如让插件自动处理可靠。

3. 调整splitChunks配置，避免inlined_script依赖外部chunk #

如果tier0.ts的依赖只被它自己引用，可以修改splitChunks规则，让这些依赖打包进inlined_script.js本身，这样就不会有外部chunk依赖，也就不会生成等待代码：

config.optimization.splitChunks({
  cacheGroups: {
    vendors: {
      name: 'chunk-vendors',
      // 排除tier0.ts所在目录的依赖
      test: /[\\/]node_modules[\\/](?!@company[\\/])|[\\/]src-vendor[\\/](?!inlined[\\/])/,
      minChunks: 10,
      priority: -10,
      chunks: 'initial'
    },
    // ...其他配置
  }
})

但这种方式可能会增大inlined_script.js的体积，需要权衡。

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