Webpack技术疑问：单个导出是原子实体还是模块为原子单元？

Webpack默认以整个模块作为基本打包原子单元，而非单个导出项。针对你描述的场景：

• 模块A导出X、Y、Z三个函数，且三个导出分别被不同入口引用（无死代码）
• 未开启额外拆分优化的情况下，入口1（模块B导入X）的chunk会包含整个模块A的代码，同理入口2、3的chunk也会各自包含完整的模块A。

为什么会这样？ #

Webpack的Tree Shaking功能主要用于移除未被任何入口引用的死代码，但你的场景中三个导出都被不同入口使用，不存在死代码，所以Tree Shaking不会触发代码移除。同时，默认配置下Webpack不会自动拆分单个模块内的不同导出——即使这些导出被不同入口引用，整个模块的代码仍会被完整打包到每个引用它的入口chunk中。

这是否符合预期？ #

这属于Webpack默认行为的正常结果，但未必符合你减少chunk体积的预期。如果希望每个入口只打包用到的导出部分，需要做以下优化：

• 确保模块A使用ES模块语法（export/import，而非CommonJS的module.exports），这是Tree Shaking和代码拆分的基础。
• 在package.json中配置sideEffects: false（或精确指定有副作用的文件），告诉Webpack模块A的导出可以安全拆分，不会触发未预期的副作用。
• 开启optimization.splitChunks配置，让Webpack将模块A拆分为多个独立的chunk，每个对应一个导出项，或者根据引用关系拆分出共享代码。

举个简单的配置示例：

// webpack.config.js
module.exports = {
  // ...其他配置
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 0, // 允许拆分小体积模块
      cacheGroups: {
        moduleA: {
          test: /moduleA\.js$/,
          chunks: 'all',
          enforce: true,
        },
      },
    },
  },
};

通过上述配置，Webpack会将模块A拆分为对应X、Y、Z的独立chunk，每个入口只会加载自己用到的那个chunk，从而大幅减小单个chunk的体积。

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