J*aScript压缩优化_Tree Shaking原理_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

2025-11-19

浏览次数：次

Tree Shaking通过静态分析ES6模块消除未使用代码，需使用import/export、构建工具支持及声明副作用，可显著减小打包体积，提升性能。

javascript压缩优化_tree shaking原理

Tree Shaking 是一种在构建过程中消除 J*aScript 中未使用代码的优化技术，主要目标是减少最终打包文件的体积。它并不是某种工具本身，而是一种基于 ES6 模块（ESM）静态结构的优化原理，被广泛应用于现代前端构建工具如 Webpack、Rollup 和 Vite 中。

Tree Shaking 的核心前提是：模块导入和导出必须是静态的，也就是说，import 和 export 语句不能动态执行，这样构建工具才能在编译阶段分析出哪些代码真正被使用。

其工作流程大致如下：

例如，你引入了一个工具库：

import { debounce, throttle } from 'lodash-es';
debounce(myFunc, 300);

如果只用了 debounce，throttle 在整个项目中没有被调用，那么 Tree Shaking 可以将 throttle 相关代码剔除，从而减小包体积。

要让 Tree Shaking 正常工作，需要满足几个关键条件：

使用 ES6 模块语法：必须使用 import/export，CommonJS（require/module.exports）是动态的，无法进行静态分析
构建工具支持：Webpack、Rollup 等需开启生产模式或配置 mode: 'production'，以启用压缩和摇树优化
代码无副作用：构建工具需要知道某些模块是否具有“副作用”，比如修改全局变量、注册钩子等。可通过 package.json 中的 "sideEffects" 字段明确声明

比如在 package.json 中：

Kreado AI

Kreado AI是一个多语言AI视频创作平台，只需输入文本或关键词，即可创作真实/虚拟人物的多语言口播视频。为创作者提供AI赋能

182 查看详情 Kreado AI

{
  "sideEffects": false
}

表示整个项目无副作用，可安全删除未引用的模块。如果有 CSS 文件或全局脚本，则需列出：

{
  "sideEffects": ["./src/polyfill.js", "*.css"]
}

现代前端项目依赖大量第三方库，很多情况下只用到其中一小部分功能。如果没有 Tree Shaking，整个模块都会被打包进去，造成资源浪费。

举个例子：lodash 提供上百个工具函数，若不支持 Tree Shaking，即使只用一个函数也可能引入几十 KB 甚至更多代码。而启用后，仅打包所需部分，显著降低加载时间与内存占用。

这对移动端、弱网环境下的用户体验尤为重要。

很多人以为只要用了 ES6 模块就能自动 Tree Shaking，其实不然。以下是一些容易忽略的点：

使用 babel 转译时，如果配置不当（如把 ES6 模块转成 CommonJS），会破坏静态结构，导致 Tree Shaking 失效。应设置 { "modules": false }
动态导入（dynamic import()）不会参与初始 Tree Shaking，但可用于代码分割
具名导出比默认导出更容易被正确识别和剥离
某些库发布版本已预打包为 bundle，内部不可摇，需选择提供 ESM 版本的库（如 lodash-es）

基本上就这些。Tree Shaking 不复杂，但它依赖正确的模块规范和构建配置。只要保证使用静态导入、合理声明副作用，并选择合适的库格式，就能有效压缩 J*aScript 体积，提升应用性能。

以上就是J*aScript压缩优化_Tree Shaking原理的详细内容，更多请关注其它相关文章！