如何让Webpack对ES6模块执行Tree Shaking？为何无用代码未被过滤？

看起来你遇到的问题是Tree Shaking没有正确过滤掉未使用的login-button模块，导致它的副作用意外执行了。我来帮你拆解问题根源和解决方案：

问题根源分析 #

1. 模块入口的导出方式限制了Webpack的静态分析 #

你的模块入口文件index.mjs用了import * as lib from './dist/esm'然后export default lib，这种写法会把dist/esm下的所有模块聚合到一个对象后导出。Webpack的Tree Shaking依赖ES模块的静态语法分析，当你导出整个对象时，Webpack无法提前判断你会使用对象中的哪些属性，只能默认打包所有关联模块——包括你没用到的login-button。

2. 开发模式下Webpack默认跳过Tree Shaking优化 #

你用npm start启动的是CRA的开发模式，Webpack在开发模式下为了保证构建速度和调试友好性，会跳过Tree Shaking、代码压缩等优化步骤。哪怕配置完全正确，开发模式也会打包所有代码。

3. 模块级副作用的触发逻辑 #

login-button里直接写了document.body.innerHTML = ...，这属于模块级副作用——只要模块被加载，这段代码就会执行。如果Webpack因为导出方式的问题不得不加载该模块，不管你有没有使用组件，副作用都会跑出来。

解决方案 #

步骤1：修改模块导出方式，使用静态具名导出 #

把index.mjs改成直接导出各个组件的具名形式，让Webpack能精准识别被引用的模块：

// index.mjs
export { default as Avatar } from './components/avatar';
export { default as Image } from './components/image';
export { default as LoginButton } from './components/login-button';

同时在CRA的app.js里，只导入需要的组件：

import { Avatar } from 'treeshaking-test-module';

function App() {
  return (
    <div className="App">
      <Avatar />
    </div>
  );
}

这种静态具名导出是Webpack实现Tree Shaking的核心前提，它能明确告知打包工具哪些模块被实际使用。

步骤2：切换到生产模式构建 #

停止npm start，改用生产模式执行构建：

npm run build

CRA的生产模式会自动开启Webpack的Tree Shaking、Terser代码压缩等优化，此时未被引用的login-button模块会被完全过滤掉，不会出现在最终的bundle中。

步骤3：确认sideEffects配置的准确性 #

你的package.json里sideEffects: false是正确的，它告诉Webpack你的模块没有全局副作用（比如全局样式、全局变量修改）。如果后续模块需要添加有副作用的文件（如CSS），可以改成精准配置：

"sideEffects": ["*.css"]

这样Webpack会保留这些有副作用的文件，同时继续对其他无副作用模块执行Tree Shaking。

步骤4：验证Babel配置的有效性 #

你的.babelrc中@babel/preset-env设置modules: false是正确的，这能阻止Babel将ES6模块转译为CommonJS模块——CommonJS的动态导入导出会破坏Webpack的静态分析能力，直接导致Tree Shaking失效。

验证结果 #

完成以上修改后，执行npm run build并打开构建后的页面，你会发现login-button的副作用文本已消失，打包后的bundle中也不会包含该组件的代码。

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