Webpack优化Chrome扩展打包：排除未使用的大型依赖库

一、如何仅在需要的bundle中包含@somelib？ #

有两种实用的解决方式：

• 方式1：用splitChunks精准拆分
  别用dependOn强制绑定，改用Webpack的splitChunks.cacheGroups针对性拆分。在webpack.config.js中配置：

  module.exports = {
    // ...其他配置
    optimization: {
      splitChunks: {
        cacheGroups: {
          somelib: {
            test: /[\\/]node_modules[\\/]@somelib[\\/]/, // 匹配@somelib的模块路径
            chunks: (chunk) => {
              // 只给用到@somelib的entry拆分这个公共chunk
              return chunk.name === 'popup' || chunk.name === 'content-script'; // 替换成你的实际entry名称
            },
            name: 'somelib-shared',
            enforce: true
          }
        }
      }
    }
  };
  

  这样只有指定的entry会生成依赖somelib-shared的bundle，未用到@somelib的entry完全不会关联这个公共chunk。

• 方式2：仅给需要的entry加dependOn
  单独把@somelib做成一个独立entry，然后只让用到它的脚本依赖这个entry，未使用的脚本正常配置即可：

  module.exports = {
    entry: {
      'somelib-shared': ['@somelib'],
      '用到的脚本': {
        import: './src/used-script.js',
        dependOn: 'somelib-shared'
      },
      '没用到的脚本': './src/unused-script.js' // 这里不设置dependOn
    },
    // ...其他配置
  };
  

  这种方式逻辑直观，彻底避免无关脚本依赖不必要的shared bundle。

二、为什么Webpack会把未使用的库打包进所有bundle？ #

主要有这几个原因：

• 你可能给所有entry都配置了dependOn，强制它们依赖包含@somelib的shared bundle，不管实际有没有用到该库。
• splitChunks的chunks参数设为'all'或'initial'，导致Webpack把@somelib识别为全局公共模块，打包进所有符合条件的bundle。
• Tree shaking未生效：如果@somelib是CommonJS格式的模块，Webpack默认不会做tree shaking，哪怕你没用到库的任何代码，也会把整个库打包进去。这种情况需要开启optimization.usedExports: true，并将mode设为production。
• Chrome扩展的特殊场景：比如某些脚本被manifest指定为content script或background，Webpack将它们作为entry处理时，可能因模块解析逻辑的问题，误把@somelib打包进去。

三、为什么未使用该库的脚本依赖shared后无法工作？ #

核心原因是强制加载了不需要的模块，干扰了脚本的执行环境：

• @somelib可能会在全局注入变量、修改DOM或浏览器API，未使用的脚本本来不需要这些，加载shared后全局环境被修改，导致脚本逻辑隐性出错（比如全局变量被覆盖，但未抛出报错，所以表现为无效果）。
• Webpack生成的bundle会依赖shared bundle的模块导出，未使用的脚本没有引用这些导出，可能导致模块加载顺序异常。比如shared bundle先执行，占用了某些资源或改变了执行上下文，让后续脚本无法正常初始化。
• shared bundle里可能包含自动执行的初始化逻辑（比如库自身的启动函数），这些逻辑和未使用脚本的逻辑冲突，但因未抛出错误，所以表现为脚本无效果。

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