javascript tree shaking 的初始化脚本处理依赖于构建工具（如 webpack、vite）的配置以及代码中是否使用了 es module (esm) 语法。核心做法是确保入口文件及其依赖链完全使用 import 和 export，并正确配置构建工具的 sideeffects 属性以排除副作用文件。
如何配置 sideEffects 以优化打包体积
在 package.json 或构建配置中声明 sideEffects 数组，告诉打包器哪些文件包含全局副作用（如修改原型链、注册全局变量），从而允许其安全地移除未使用的模块。
{
"name": "my-app",
"version": "1.0.0",
"sideEffects": [
"src/polyfill.js",
"*.css"
]
}
当 sideEffects 设置为 false 时，表示所有模块都是纯函数式的，没有副作用，打包器可以激进地删除任何未被直接引用的导出。如果某些文件（如样式表或 polyfill）即使未被显式导入也需要执行，则需将其列入数组。例如，若 src/utils.js 导出了多个函数但只用了其中一个，且该文件无副作用，Webpack 5 或 Vite 即可将其余部分摇树掉。
如何处理带有副作用的初始化逻辑
对于必须执行的初始化代码（如自动注册组件或启动服务），应将其封装在独立的文件中，并通过显式导入触发执行，同时确保这些文件不被标记为可摇树。
// src/init.js
import { registerPlugin } from './plugin';
registerPlugin();
// main.js
import './init'; // 触发副作用
import { App } from './app';
new App().start();
在此结构中，src/init.js 被显式导入，因此不会被丢弃。而 src/plugin.js 中的其他未使用导出会被移除。关键在于区分“副作用”与“纯计算”。如果初始化逻辑只是设置状态而不影响全局环境，可以考虑重构为纯函数，通过返回值传递结果，从而享受更彻底的 Tree Shaking。
为什么某些 ESM 模块无法被摇树
当模块内部存在隐式副作用或未正确导出时，Tree Shaking 会失效。常见原因包括：使用了 CommonJS (require) 混合 ESM、模块顶部有直接执行的语句、或依赖了动态导入。
检查你的初始化脚本是否混用了 module.exports。ESM 要求静态分析，任何动态行为都会阻止打包器确定依赖关系。此外，确保所有初始化代码都包裹在函数或类中，避免在模块顶层直接调用 API 或操作 DOM。若必须保留顶层执行，请将其移至专门的副作用文件，并在 sideEffects 中声明。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
