Webpack编译多JS入口时大量代码存于缓存文件未被产物包含如何解决

问题原因 #

你遇到的是Webpack 5默认代码分割策略的正常表现：当存在多个入口时，Webpack会自动将多个入口共用的、体积符合阈值的公共依赖抽离为独立的公共chunk（也就是你看到的753kb的vendors文件），避免重复打包冗余代码。单入口场景下没有可抽取的公共代码，因此所有依赖会直接打包到入口文件中。

解决方案 #

如果你需要每个入口输出的JS文件完全独立、包含自身全部依赖、不需要额外加载公共chunk文件，直接禁用Webpack的公共代码抽取配置即可：
在你的Webpack配置中新增/修改optimization字段如下：

module.exports = {
  // 原有入口、loader、插件等配置保持不变
  optimization: {
    // 完全禁用公共chunk抽取
    splitChunks: false,
    // 禁用独立的runtime chunk，将运行时代码也打包进入口文件
    runtimeChunk: false
  }
}

修改配置后重新编译，每个theme--xx.js文件都会包含全部依赖代码，体积回到单入口时的879kb左右，不会再生成额外的公共chunk文件，完全符合你多地区独立部署加载的需求。

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