什么是Javascript的树摇优化?

4次阅读

Tree Shaking 是一种构建时静态分析移除未使用 ES Module 导出代码的技术,依赖 ES 模块语法、按需引入、生产模式及无副作用声明,剔除未被 import 的导出(如未引用的函数 b),但不处理死代码或动态逻辑。

什么是 Javascript 的树摇优化?

树摇优化(Tree Shaking)是一种在构建阶段自动移除 javaScript 中未使用代码的技术。它不运行代码,而是靠静态分析 import/export 语句,识别出哪些函数、变量或模块从未被引用,然后把它们从最终打包产物里剔除。

为什么 叫“树摇”?

把整个项目想象成一棵树:?
– 树干和枝叶 = 所有模块和导出内容
– 枯叶 = 没被任何地方 import 的导出(比如只定义但没用过的函数)
– 摇一摇 = 构建 工具 扫描依赖、标记、剔除
– 最后留下的,是真正支撑应用运行的“健康部分”

它靠什么工作?

必须同时满足这几个条件:

  • 代码用的是 ES Module 语法(export / import),不是 require 或 module.exports
  • 导入方式是“按需引入”,比如 import {throttle} from 'lodash-es',而不是 import _ from 'lodash'
  • 构建 工具 处于生产模式(如 webpackmode: 'production'),并启用标记功能(如 usedExports: true
  • 没有意外的副作用——比如某文件 一加 载就改 全局变量、注入样式或执行 IifE,这类代码默认不会被删,除非明确声明 "sideEffects": false 在 package.json 里

它到底删了什么?

删的是“未被引用的导出”,不是“没调用的函数”。举个例子:

// utils.js
export function a() { return 1;}
export function b() { return 2;}
export function c() { return 3;}
// main.js
import {a, c} from ‘./utils’;
console.log(a(), c());

立即学习Java 免费学习笔记(深入)”;

构建后,b 函数会被完全剔除,连同它可能依赖的其他未引用内容。但注意:Tree Shaking 不处理 if 分支里的死代码、eval、动态 import 或 try/catch 里的不可达逻辑——这些得靠后续压缩工具(如 Terser)进一步清理。

基本上就这些。不复杂但容易忽略细节。

站长
版权声明:本站原创文章,由 站长 2025-12-16发表,共计964字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
1a44ec70fbfb7ca70432d56d3e5ef742
text=ZqhQzanResources