讲师中心 微信公众号
AI工具推荐 视频效率加速

什么是Javascript的树摇优化?

千辰大大_1651

千辰大大_1651

发布时间:2025-12-16 22:46:02

|

783人浏览过

|

来源于php中文网

原创

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'
  • 构建工具处于生产模式(如 Webpack 的 mode: '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());

Revealjs Presentations
Revealjs Presentations

创建、编辑并部署 reveal.js 演示文稿为单个 HTML 文件,可选自定义 CSS。适用于需要制作演示文稿、幻灯片或宣传材料时使用。

下载

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

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

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

热门AI工具

更多
AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

LibLibAI
LibLibAI Hot

一款AI视频创作工具,主要用于国内领先的AI创意平台,以海量模型、低门槛操作与“创作-分享-商业化”生态,让小白与专业创作者都能高效实现图文乃至视频创意表达,适合需要提升相关任务效率的用户。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

1975

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2682

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

936

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

2999

2025.09.10

require的用法
require的用法

require的用法有引入模块、导入类或方法、执行特定任务。想了解更多require的相关内容,可以阅读本专题下面的文章。

1935

2023.11.27

全局变量怎么定义
全局变量怎么定义

本专题整合了全局变量相关内容,阅读专题下面的文章了解更多详细内容。

3725

2025.09.18

python 全局变量
python 全局变量

本专题整合了python中全局变量定义相关教程,阅读专题下面的文章了解更多详细内容。

1530

2025.09.18

c++ 全局变量
c++ 全局变量

本专题整合了c++全局变量的使用、定义、作用域等等内容,阅读专题下面的文章了解更多详细内容。

199

2026.03.17

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

60

2026.09.23

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 11.9万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn