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

如何优化javascript打包_webpack的tree shaking原理是什么

轻瑶大大_7317

轻瑶大大_7317

发布时间:2025-12-20 21:34:02

|

770人浏览过

|

来源于php中文网

原创

Tree Shaking 是 Webpack 在 production 模式下通过静态分析 ES6 import/export 关系剔除未使用导出的优化机制,仅对 ESM 有效,需满足具名引入、sideEffects 正确声明等条件。

如何优化javascript打包_webpack的tree shaking原理是什么

Webpack 的 Tree Shaking 是一种在构建阶段自动剔除未使用代码的优化机制,核心目标是减小最终打包体积。它不是运行时行为,也不依赖执行逻辑,而是靠静态分析 ES6 模块的 import/export 关系来判断哪些导出从未被引用,从而安全移除。

Tree Shaking 为什么只对 ES6 模块有效

ES6 模块的导入导出是静态声明(编译期即可确定),比如 import { foo } from './utils.js',Webpack 能明确知道只用了 foo,而 bar 没被引用。但 CommonJS 的 require() 是动态的,可能受条件、变量影响,无法静态判定依赖路径和导出使用情况,所以不支持 Tree Shaking。

  • 避免混用 require 和 import,尤其在同一个模块中
  • Babel 配置中必须设 modules: false,否则会把 import 编译成 require,导致 Tree Shaking 失效
  • 第三方库若用 CommonJS 发布(如早期 lodash),需借助 lodash-es 等 ESM 版本才能摇掉未用方法

Webpack 中 Tree Shaking 的实际触发条件

它不是“开了就一定生效”的开关,需要同时满足几个前提:

java-api-doc-generator
java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码,自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载
  • mode 必须为 'production':Webpack 5+ 默认开启,开发模式下即使配置了也不会执行剔除
  • 模块必须有明确的 export,并且 import 方式是具名或默认的静态引入:例如 import { debounce } from 'lodash' 可摇,import _ from 'lodash' 则整个包都会被打入
  • package.json 中正确声明 "sideEffects":值为 false 表示所有文件都无副作用(可安全摇),值为数组(如 ["*.css", "src/init.js"])则列出不能被摇的文件;不写或设为 true 会禁用该模块的 Tree Shaking

如何验证 Tree Shaking 是否起作用

最直接的方式是看打包后代码里是否还存在未使用的导出声明,以及是否被标记为 /* unused harmony export xxx */:

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

  • 构建时加 --stats=verbose,再用 webpack-bundle-analyzer 查看模块构成,未引用的模块或导出通常不会出现在依赖图中
  • 检查 dist 目录下 bundle 文件源码,搜索 unused harmony export,若有说明 Webpack 已完成标记,后续由 Terser 删除
  • 对比启用前后 bundle 大小变化,尤其是引入大型工具库(如 moment、date-fns)时效果明显

常见导致 Tree Shaking 失效的情况

即使配置正确,以下写法也会让 Webpack “不敢”摇掉代码:

  • 导出被间接引用:比如 export const x = 1,然后在另一个文件里 const obj = { x },再 export default obj —— Webpack 可能因不确定 x 是否被外部访问而保留
  • 模块内有副作用(如修改全局变量、调用 console、操作 DOM)但未在 sideEffects 中声明,Webpack 会保守保留整块代码
  • 使用了动态 import():这种异步导入无法静态分析具体用到哪个导出,相关模块整个保留
  • 循环引用中涉及导出使用,可能干扰标记逻辑,建议重构拆分

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek

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

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

WorkBuddy

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

Atoms
Atoms Hot

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

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

豆包大模型

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

讯飞智作

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

相关专题

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

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

2195

2023.08.07

json是什么
json是什么

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

3482

2023.08.23

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

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

1176

2023.10.13

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

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

3999

2025.09.10

es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

285

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

406

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

375

2025.12.24

require的用法
require的用法

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

1975

2023.11.27

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

40

2026.10.28

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 1.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 6.1万人学习

CSS教程
CSS教程

共754课时 | 99.2万人学习

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

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