在 javascript 项目中配置 tree shaking 的 sideeffects，核心在于让打包工具（如 webpack）能够安全地移除未使用的模块。具体做法是在项目的 package.json 文件中添加 "sideeffects" 字段，其值可以是布尔值、字符串或数组。如果设置为 false，表示所有模块都没有副作用，可以大胆删除未引用的代码；如果设置为数组，则列出那些虽然未被直接引用但会产生全局影响的文件路径（如 css 文件或 polyfill），这些文件会被保留。
如何配置 sideEffects 为 false 以启用最大程度的摇树优化？
当你的项目完全由纯函数组成，且没有任何模块会修改全局环境时，可以将 sideEffects 配置为 false。这告诉打包工具，任何未被导入的代码都可以被安全地丢弃，从而实现最大的体积缩减。
{
"name": "my-project",
"version": "1.0.0",
"sideEffects": false
}在上述配置中，sideEffects 被显式设置为 false。这意味着构建工具（如 Webpack 4+ 或 Rollup）在处理 ES Modules 时，会假设每个模块都是纯函数式的。只要某个模块没有被其他模块通过 import 语句引用，它就会被从最终的 bundle 中移除。这种配置适用于大多数现代前端库，前提是开发者确保没有隐式的全局副作用。
立即学习“Java免费学习笔记（深入）”；
如何处理包含 CSS 或 Polyfill 等副作用文件的配置？
如果项目中引入了需要执行才能生效的文件，例如 CSS 文件（用于注册样式）或某些 Polyfill（用于修补浏览器特性），这些文件即使未被直接导入变量，也必须被包含在最终产物中。此时，需要将 sideEffects 配置为一个数组，明确列出这些特殊文件的路径。
{
"name": "my-project",
"version": "1.0.0",
"sideEffects": [
"*.css",
"src/polyfills.js"
]
}在这个配置示例中，sideEffects 是一个包含两个元素的数组。第一个元素 *.css 使用通配符匹配所有 CSS 文件，确保它们不会被误删。第二个元素 src/polyfills.js 指定了具体的 Polyfill 文件。这样，打包工具会保留这些文件，同时仍然对数组中未列出的其他 JS 模块执行 Tree Shaking。需要注意的是，通配符的使用依赖于打包工具的具体实现，Webpack 通常支持简单的 glob 模式，而更复杂的模式可能需要使用正则表达式或插件辅助。
当 sideEffects 配置错误导致运行时报错时，如何排查和修正？
如果在配置 sideEffects 后出现运行时错误，通常是因为打包工具错误地移除了具有副作用的关键代码。例如，如果将 sideEffects 设为 false，但项目中实际存在一个未被导入却必须执行的初始化脚本，该脚本会被删除，导致功能缺失。
// src/init.js
console.log('App initialized'); // 这个副作用可能被误删
// src/main.js
import { helper } from './utils'; // 仅导入 utils
helper();在上述代码场景中，src/init.js 包含一个全局日志输出，但它没有被 main.js 导入。如果 sideEffects 配置为 false，init.js 将被移除，导致应用缺少初始化步骤。修正方法是检查报错信息，定位缺失的功能，然后在 package.json 中将 sideEffects 改为数组形式，并加入 src/init.js。或者，重构代码，将初始化逻辑合并到被导入的模块中，从而消除隐式依赖。
