JavaScript 中性能优化怎么通过 Tree Shaking 技术在打包时移除未使用的死代码-js教程-PHP中文网

tree shaking 是构建时移除未使用代码的机制，需满足三条件：es 模块语法、正确声明副作用、生产模式启用压缩工具；commonjs 不支持，须用 lodash-es 等 es 版本，设 "sideeffects": false 并精准排除真实副作用文件。

javascript 中性能优化怎么通过 tree shaking 技术在打包时移除未使用的死代码

Tree Shaking 是打包阶段自动移除未使用代码的关键手段，不是运行时行为，也不依赖代码执行逻辑。它只在构建时生效，且必须同时满足三个条件：使用 ES 模块语法、明确声明副作用情况、启用生产模式与压缩工具。

CommonJS（require/module.exports）是动态加载，打包器无法静态分析依赖关系，因此完全不支持 Tree Shaking。

✅ 推荐写法：import { debounce } from 'lodash-es' 或 export const utils = {...}
❌ 避免写法：const _ = require('lodash') 或 module.exports = { foo }
第三方库优先选提供 ES 模块版本的，比如 date-fns 替代 moment，lodash-es 替代 lodash

如果一个模块在顶层执行了副作用（如修改全局对象、注入样式、调用立即执行函数），打包器为安全起见会保留整个模块，哪怕你只用了其中一个小函数。

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

在项目根目录的 package.json 中加 "sideEffects": false，表示所有模块默认无副作用
若某些文件确实有副作用（例如 main.css、polyfill.js），可精确声明："sideEffects": ["*.css", "src/polyfill.js"]
把副作用逻辑封装进函数里再导出，避免在模块顶层直接执行语句

Tree Shaking 不是默认一直开着的开关，它依赖构建工具在生产环境下触发，并配合压缩器做最终清理。

Webpack：确保 mode: 'production'，并开启 Terser 压缩（默认已启用）
Vite：vite build 默认启用 Tree Shaking，无需额外配置；可通过 vite build --report 生成可视化报告验证
Rollup：需在 output.preserveModules: false 和 treeshake: true 下工作