在 package.json 中配置 tree shaking 的核心是声明模块类型为 module，并确保构建工具（如 webpack）开启了优化模式。具体做法是在 package.json 根节点添加 "type": "module"，这会让 node.js 和打包工具将文件视为 es module (esm)。配合 webpack 的 mode: 'production' 或手动设置 optimization.usedexports 和 optimization.minimize，即可实现未引用代码的移除。
如何启用 Webpack 的摇树优化功能？
要真正触发 Tree Shaking，除了正确的模块类型声明，还需要在 Webpack 配置中显式开启导出标记和压缩功能。Webpack 默认在生产模式下会尝试移除未使用的代码，但前提是它必须能静态分析出哪些导出未被使用。通过设置 optimization.usedExports = true，Webpack 会在内部标记每个模块中未被引用的导出项。随后，结合 optimization.minimize = true 并配置 TerserPlugin，这些被标记的代码才会被实际删除。需要注意的是，Tree Shaking 仅对 ES Module 有效，CommonJS (require) 由于是动态加载机制，无法进行静态分析，因此不会被摇树。
{
"name": "my-project",
"version": "1.0.0",
"type": "module",
"scripts": {
"build": "webpack --config webpack.config.js"
},
"devDependencies": {
"webpack": "^5.88.0",
"webpack-cli": "^5.1.4",
"terser-webpack-plugin": "^5.3.7"
}
}
上述 package.json 配置了项目类型为 ESM。对应的 webpack.config.js 关键配置如下：
立即学习“Java免费学习笔记（深入）”；
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
mode: 'production', // 生产模式默认开启 minimize
optimization: {
usedExports: true, // 标记未使用的导出
minimize: true, // 启用压缩插件（如 Terser）来移除代码
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true, // 可选：移除 console
},
},
}),
],
},
};
运行 npm run build 后，Webpack 会分析 index.js 及其依赖。如果某个库导出了多个函数，而你的代码只调用了其中一个，Terser 会将其他未调用的函数从最终输出的 bundle.js 中彻底删除。
如何处理第三方库的 Tree Shaking 兼容性？
许多第三方库虽然支持 Tree Shaking，但其 package.json 可能未正确配置入口点，或者同时提供了 CommonJS 和 ESM 两种格式，导致打包工具误选不可摇树的版本。解决此问题的关键在于确保打包工具优先解析 ESM 入口。在较新的 Webpack 版本中，它会自动遵循 package.json 中的 exports 字段或 module 字段。如果库没有正确配置，你可能需要在 Webpack 配置中使用 resolve.mainFields 来强制指定优先查找的顺序。通常应将 module 放在 main 之前，以确保优先使用 ESM 版本。此外，某些库可能在 sideEffects 字段中标记了副作用，如果库本身有副作用（如修改全局变量），Webpack 可能会保守地保留所有代码，即使它们未被直接引用。此时，可以在项目的 package.json 或 Webpack 配置中覆盖 sideEffects 设置，明确告知打包器哪些文件是无副作用的纯代码模块。
// src/utils/math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
// src/index.js
import { add } from './utils/math.js';
console.log(add(1, 2));
// 注意：subtract 未被导入
在上述示例中，index.js 仅导入了 add。如果 math.js 所在的包在 package.json 中正确设置了 "sideEffects": false 或在 Webpack 中配置了相应的排除规则，那么 subtract 函数将在构建过程中被识别为未使用并被移除。若未做此配置，Webpack 可能因担心潜在的全局副作用而保留整个 math.js 文件。通过检查最终打包产物，可以验证 subtract 是否确实不存在于输出文件中，从而确认 Tree Shaking 对第三方库生效。
当 sideEffects 设置为 false 时，未使用的导出会被移除吗？
当 sideEffects 设置为 false 时，Webpack 会假设当前包中的所有文件都没有副作用，这意味着它可以安全地删除任何未被导入的导出成员，甚至包括那些虽然被导入但未在当前作用域中使用的变量（取决于具体的压缩器配置）。在这种模式下，Tree Shaking 的效果最为激进。例如，如果一个库导出了 10 个工具函数，而你的应用只使用了 1 个，且该库声明了 "sideEffects": false，Webpack 将能够精确地剥离掉其余 9 个函数的代码。然而，这种设置也有风险：如果你的库中确实存在副作用（例如初始化脚本、样式注入或全局变量挂载），将其标记为无副作用会导致这些代码被意外删除，从而引发运行时错误。因此，只有在确定库的所有模块都是纯函数式、不产生外部影响时，才应使用此配置。对于包含副作用的文件，应在 sideEffects 数组中明确列出它们，例如 "sideEffects": ["./src/polyfill.js", "*.css"]，这样 Webpack 就会保护这些文件不被摇树，同时仍然对其他纯代码模块进行优化。
