在 webpack 中生效 tree shaking 需要确保代码符合 es module (esm) 规范，并在 package.json 中标记为模块，同时在构建配置中开启生产模式或显式启用优化选项。webpack 5 默认在生产模式下已集成该功能，它通过静态分析移除未使用的导出代码，从而减小最终打包体积。
如何配置 package.json 以支持 ESM 分析
要使 Tree Shaking 生效，首要条件是项目必须使用 ES Modules 语法，因为 CommonJS 的 require() 是动态执行的，无法被静态分析工具可靠地追踪。开发者需要在项目的 package.json 文件中添加 "type": "module" 字段，或者确保所有源文件都使用 .mjs 扩展名。这样 Webpack 才能正确识别 import 和 export 语句，建立依赖图谱并标记死代码。
{
"name": "my-app",
"version": "1.0.0",
"type": "module"
}
配置完成后，编写代码时应严格使用命名导出。例如，在一个名为 utils.js 的文件中定义多个函数：
立即学习“Java免费学习笔记（深入）”；
// utils.js
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
在入口文件中只引入需要的部分：
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
// index.js
import { add } from './utils.js';
console.log(add(1, 2));
当运行构建命令时，Webpack 会分析出 subtract 未被使用，并在最终输出中将其剔除。如果错误地使用了 export default 或混合导出，可能会导致整个模块被视为已使用，从而失效。
Webpack 5 中的优化配置与副作用标记
除了语法规范，还需要在 webpack.config.js 中明确配置优化策略，特别是处理第三方库的副作用。Webpack 5 默认在生产模式下 (mode: 'production') 会自动启用 Tree Shaking，但为了更精细的控制，可以在 optimization 选项中设置 usedExports: true 和 sideEffects: true。usedExports 会在内部标记未使用的导出，配合压缩器使用；sideEffects 则允许 Webpack 跳过没有副作用的模块，进一步减少打包内容。
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
mode: 'production',
optimization: {
usedExports: true,
sideEffects: true,
minimize: true
}
};
对于第三方库，如果它们声明了无副作用，可以在 package.json 中添加 "sideEffects": false。如果某些文件（如 CSS 或 polyfills）有副作用但不能被摇树，可以指定数组形式："sideEffects": ["*.css", "./polyfills.js"]。这告诉 Webpack 这些文件必须被包含，即使它们的导出未被直接引用。
命名导出与默认导出的行为差异验证
在实际开发中，区分命名导出和默认导出的处理方式对 Tree Shaking 的效果至关重要。当使用命名导出时，Webpack 可以精确到函数级别进行剔除；而使用默认导出时，通常只能剔除整个模块，除非模块内部结构非常清晰且被特殊处理。以下代码展示了两种导出方式在相同输入下的不同表现。
// namedExport.js
export const name = 'Alice';
export const age = 25;
// defaultExport.js
export default {
name: 'Bob',
age: 30
};
// main.js
import { name } from './namedExport.js'; // 仅引入 name
import person from './defaultExport.js'; // 引入整个默认对象
console.log(name);
console.log(person.name); // 虽然只用了 name，但默认导出通常难以剔除 age
在上述示例中，namedExport.js 中的 age 会被成功移除，因为它是独立的命名导出。然而，defaultExport.js 作为一个整体对象被导入，Webpack 很难确定是否只需要其中的 name 属性，因此通常会保留整个模块的内容。为了确保最佳效果，应优先使用命名导出，并避免在大型库中使用复杂的默认导出结构。
