Webpack问题：所有代码分割chunk均被prefetch预加载

我来帮你梳理下这个问题的原因和解决方案：

问题根源 #

Webpack 4及以上版本中，使用动态导入（包括require.ensure或import()语法）时，默认会给生成的分割chunk添加prefetch标记。浏览器会在主线程空闲时自动加载这些标记的chunk，这是Webpack默认的性能优化策略，但如果你的业务场景不需要主页加载时就预取所有分割资源，就需要手动调整配置。

具体解决方案 #

1. 单个动态导入禁用Prefetch #

如果只想针对特定chunk关闭prefetch，可以在导入时添加魔法注释：

// 针对import()语法
import(/* webpackPrefetch: false */ './your-target-module.js')

// 针对require.ensure语法
require.ensure([], function(require) {
  require('./your-target-module.js');
}, 'custom-chunk-name', /* webpackPrefetch: false */);

2. 全局禁用默认Prefetch行为 #

如果想全局关闭所有chunk的自动prefetch，修改Webpack配置文件中的optimization选项：

module.exports = {
  // ...其他配置项
  optimization: {
    splitChunks: {
      // 保留你原有的splitChunks配置
    },
    // 全局禁用prefetch
    prefetch: false
  }
};

也可以做更精细的全局控制，比如只允许特定名称的chunk被prefetch：

module.exports = {
  optimization: {
    prefetch: (chunk) => {
      // 仅让名为"user-center"的chunk触发prefetch
      return chunk.name === 'user-center';
    }
  }
};

3. 检查第三方插件的自动Prefetch配置 #

部分路由类Webpack插件（比如路由懒加载相关插件）会自动给路由对应的chunk添加prefetch标记，你可以检查项目中这类插件的配置，关闭不必要的自动预取逻辑。

验证效果 #

修改配置后重新打包，打开浏览器开发者工具的Network面板，查看chunk的Purpose列，确认非必要chunk不再显示prefetch，而是在实际触发导入逻辑时才会加载。

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