- 综合排序
- 最热优先
- 最新优先
- 来自专栏coding个人笔记
Tree-shaking
Tree-shaking是webpack内置的一个优化，主要功能就是去除没有用到代码。 因为JavaScript大多数是要通过加载的，加载的文件越小，性能越好，所以Tree-shaking对于优化JavaScript很有意义。 Tree-shaking主要依赖于ES6的模块化import和export，我们都知道ES6的module只能是顶层出现，和运行时无关，不能运行时加载，Tree-shaking主要就是依靠这个基础进行静态分析 如果是require，需要执行后才知道有没有引用，就无法进行Tree-shaking。 所以当你觉得Tree-shaking无效的时候，可以用看看打包出来的代码是否有副作用。当然，这一块本人觉得还是当一条咸鱼忽略吧。
70530发布于 2020-05-29 - 来自专栏Young Dreamer
webpack中tree-shaking技术介绍
正基于此，webpack2引入了tree-shaking技术，能够在模块的层面上做到打包后的代码只包含被引用并被执行的模块，而不被引用或不被执行的模块被删除掉，以起到减包的效果。 webpack的tree-shaking案例 下面结合实际代码来解释webpack2是如何实现tree-shaking的，示例代码可到github进行下载。 webpack的tree-shaking的局限性 （1）只能是静态声明和引用的ES6模块，不能是动态引入和声明的； 在打包阶段对冗余代码进行删除，就需要webpack需要在打包阶段确定模块文件的内部结构 /module2'; } 而CommonJS模块支持动态结构的，所以不能对CommonJS模块进行tree-shaking处理。 （2）只能处理模块级别，不能处理函数级别的冗余； 因为webpack的tree-shaking是基于模块间的依赖关系，所以并不能对模块内部自身的无用代码进行删除。
1.1K50发布于 2018-01-31 - 来自专栏前端小菜鸟
Tree-Shaking的工作原理
Tree-shaking （树摇）最早是由Rollup实现，是一种采用删除不需要的额外代码的方式优化代码体积的技术，webpack2借鉴了这个特性也增加了tree-shaking的功能。 tree-shaking 只能在静态modules下工作，在ES6之前我们使用CommonJS规范引入模块，具体采用require()的方式动态引入模块，这个特性可以通过判断条件解决按需记载的优化问题， } else { module = requitre('BeyModule'); } 但是CommonJS规范无法确定在实际运行前需要或者不需要某些模块，所以CommonJS不适合tree-shaking bey from "Bey"; import other from "Other" if(condition) { // hello } else { // bey } Tree-shaking ES6 Modules in webpack 2 Tree-Shaking性能优化实践 - 原理篇
4.3K03发布于 2020-05-06 - 来自专栏采云轩
Rollup 与 Webpack 的 Tree-shaking
Rollup 与 Webpack 的 Tree-shaking http://zoo.zhengcaiyun.cn/blog/article/tree-shaking Rollup 和 Webpack 本文就来简单分析下两者 Tree-shaking 的流程和效果差异。 Tree-shaking 的目的 Tree-shaking 的目标只有一个，去除无用代码，缩小最终的包体积，至于什么算是无用代码呢？ 对比 Tree-Shaking 前体积 Tree-Shaking 后体积 打包时长 webpack（5.52.0） 46kb 44kb 4.8s rollup（1.32.1） 24kb 18kb 3.7s 关于 Tree-shaking 的问题也欢迎你在下面留言讨论。
1.8K30编辑于 2022-12-01 - 来自专栏2014前端笔记
Tree-shaking VS dead code elimination 【翻译】
这里是原文链接Tree-shaking versus dead code elimination 我一直致力于一个叫rollup的工具，它可以将js各个模块打包在一起。 其中他有一个特性叫tree-shaking，他会只将你程序需要的js代码打包进去。 有人问我这个概念从哪里得来的？ tree-shaking,则是完全相反的一方面，告诉我我要做什么蛋糕，混合的时候需要什么原料。 相比较dead code， 我们推荐live code。 ## Limits of Rollup’s tree-shaking Rollup现在根据顶层的ASTnode节点来打包，而不是零碎的层级，所以他包含的代码可能比他需要的更多。 ## Rollup is about more than tree-shaking rollup的目标是生产一个最高效的打包工具，看起来就像是我们写的一样。
1.1K30发布于 2019-11-20 - 来自专栏猫哥学前班
Import 方式对 Tree-shaking 的影响
[xos41w4w5d.png] 最近从小被子那里学了不少 Tree-shaking 的知识，Tree-shaking 译作“摇树优化”，是 DCE（Dead Code Elimination）优化的一种实现 DIY 首先我们使用以下命令，来搭建一套实验环境，加深对 Tree-shaking 的理解。 补充：Vue SFC 写法对 Tree-shaking 的影响 Tree-shaking 的使用场景，主要是为了将第三方 npm 模块中未用到的代码剔除出打包后的文件。 如果是项目本身的 src 文件，Tree-shaking 的意义并不大。 [Vue SFC & Tree-shaking]
4.3K30发布于 2019-06-27 - 来自专栏前端自习课
【面试】1902- tree-shaking的原理是什么？
，所以面试官也常常会问到tree-shaking的原理是什么，这时我们该如何回答呢？ 而今天我主要介绍的就是AST的一大应用，就是我们webpack强大的Tree-Shaking能力。 Tree-shaking Tree-shaking翻译过来的意思就是摇树。 掉，拿到这些信息之后，接下来我们开始生成tree-shaking后的代码。 就完成了，当然，webpack的tree-shaking的能力远比这个强大的多，我们只是写了个最简单版本，实际项目要比这复杂得多： 处理文件依赖import/export 作用域scope的处理 递归tree-shaking 小结 本文通过ast的语法分析能力，分析JavaScript代码中未被引用的函数或变量，进而实现了一个最简单版本的tree-shaking，希望大家看完都能有所收获哦~
33610编辑于 2023-12-26 - 来自专栏网络日志
Tree-Shaking性能优化实践 - 原理篇
什么是Tree-shaking 先来看一下Tree-shaking原始的本意 上图形象的解释了Tree-shaking 的本意，本文所说的前端中的tree-shaking可以理解为通过工具"摇"我们的JS Tree-shaking 较早由 Rich_Harris 的 rollup 实现，后来，webpack2 也增加了tree-shaking 的功能。 二. tree-shaking的原理 Tree-shaking的本质是消除无用的js代码。 Tree-shaking 和传统的 DCE的方法又不太一样，传统的DCE 消灭不可能执行的代码，而Tree-shaking 更关注宇消除没有用到的代码。 (2) 再来看一下Tree-shaking消除大法 前面提到了tree-shaking更关注于无用模块的消除，消除那些引用了但并没有被使用的模块。
78710编辑于 2024-06-12 - 来自专栏IMWeb前端团队
webpack2 的 tree-shaking 好用吗？
tree-shaking 较早由 Rich_Harris 的 rollupjs 实现，webpack2 也引入了tree-shaking 的能力。 什么是 tree-shaking ？ tree-shaking 可以形象的理解为摇树。在 webpack 项目中，有一个入口文件，相当于一棵树的主干，入口文件有很多依赖的模块，相当于树枝。 通过 tree-shaking，将没有使用的模块摇掉，这样来达到删除无用代码的目的。 ? ? ? 0});var e=r(0);console.log(e.a)}]); 为什么 tree-shaking 不能消除带有副作用的代码。 所以，其实使用 tree-shaking 的局限性还是比较大。 适用场景 目前看到使用 tree-shaking 比较成功的例子是 d3-jsnext ，不过使用的是 rollupjs 的方案。
1.7K30发布于 2019-12-05 - 来自专栏IMWeb前端团队
webpack2 的 tree-shaking 好用吗？
tree-shaking 较早由 Rich_Harris 的 rollupjs 实现，webpack2 也引入了tree-shaking 的能力。 什么是 tree-shaking ？ tree-shaking 可以形象的理解为摇树。在 webpack 项目中，有一个入口文件，相当于一棵树的主干，入口文件有很多依赖的模块，相当于树枝。 通过 tree-shaking，将没有使用的模块摇掉，这样来达到删除无用代码的目的。 0});var e=r(0);console.log(e.a)}]); 为什么 tree-shaking 不能消除带有副作用的代码。 而现在实现的 tree-shaking 并不能区分 B.prototype.render 和 Array.prototype.unique ，既然后者不能移除，那么前者也不能移除。
1.7K50发布于 2018-01-08 - 来自专栏Tecvan
Webpack 原理系列九：Tree-Shaking 实现原理
一、什么是 Tree Shaking Tree-Shaking 是一种基于 ES Module 规范的 Dead Code Elimination 技术，它会在运行过程中静态分析模块之间的导入导出，确定 二、实现原理 Webpack 中，Tree-shaking 的实现一是先「标记」出模块导出值中哪些没有被用过，二是使用 Terser 删掉这些没被用到的导出语句。
2.8K11编辑于 2021-12-09 - 来自专栏腾讯IMWeb前端团队
基于Tree-shaking的多平台Web代码打包实践
只要我们合理使用Webpack的Tree-shaking功能，就可以很好地解决问题。 3.3 开启 Tree-shaking 功能 本文章已 Webpack4 的角度进行阐述，其他版本或者构建工具可以进行参考。 3.3.1 更新构建配置 开启Tree-shaking，具体查看 本文档。 消除了； 4.3 Tree-shaking 模块 到底有什么办法可以确认哪些模块会被移除呢? 当然 Tree-shaking 最后是由著名压缩工具 UglifyJS 做的。
65710编辑于 2022-06-29 - 来自专栏前端Q
「知识拾遗」Tree-Shaking与构建工具选择
Tree-Shaking Tree-Shaking，它代表的大意就是删除没用到的代码。这样的功能对于构建大型应用时是非常好的，因为日常开发经常需要引用各种库。 但大多时候仅仅使用了这些库的某些部分，并非需要全部，此时Tree-Shaking如果能帮助我们删除掉没有使用的代码，将会大大缩减打包后的代码量。 Tree-Shaking的原理，通过静态分析，找出未被引用、未被执行、无法到达的代码进行消除，也就是DCE(dead code elimination)。
68320发布于 2019-12-21 - 来自专栏前端自习课
【Webpack】507- 基于Tree-shaking的多平台Web代码打包实践
只要我们合理使用Webpack的Tree-shaking功能，就可以很好地解决问题。 3.3 开启 Tree-shaking 功能 本文章已 Webpack4 的角度进行阐述，其他版本或者构建工具可以进行参考。 3.3.1 更新构建配置 开启Tree-shaking，具体查看 本文档。 消除了； 4.3 Tree-shaking 模块 到底有什么办法可以确认哪些模块会被移除呢? 当然 Tree-shaking 最后是由著名压缩工具 UglifyJS 做的。
1.1K50发布于 2020-02-26 - 来自专栏前端博客
webpack原理(2)：ES6 module在Webpack中如何Tree-shaking构建
Tree-shaking 最早由打包工具 Rollup 提出DCE 作用于模块内（webpack 的 DCE 通过 UglifyJS 完成），而 Tree-shaking 则是在打包的时候通过模块之间的信息打包必须的代码 Webpack 从 2 开始也支持 Tree-shaking，对于一个模块，没有被使用过的引入代码并不会被打包 DCE AST 对 JS 代码进行语法分析后得出的语法树 (Abstract Syntax 在编写支持 tree-shaking 的代码时，导入方式非常重要。你应该避免将整个库导入到单个 JavaScript 对象中。 当然，Lodash 还需要其他的步骤来做 tree-shaking，但这是个很好的起点。 // 全部导入 (不支持 tree-shaking)import _ from 'lodash';// 具名导入(支持 tree-shaking)import { debounce } from 'lodash
1.2K10编辑于 2023-03-18 - 来自专栏前端技术江湖
Webpack 实现 Tree shaking 的前世今生
项目减重之 rollup 的 Tree-shaking，那你一定对 tree-shaking 不陌生了。 如果对 tree-shaking 相关知识不熟悉，请先点开上面这篇文章花 5 分钟了解一下：什么是 tree-shaking。 众所周知，原本不支持 tree-shaking 的 Webpack 在它的 2.x 版本也实现了 tree-shaking，好奇心又来了，rollup 从一开始就自实现了 tree-shaking，而 Tree-shaking 实现机制 快速浏览完官方文档和一众文章后，发现 webpack 实现 tree-shaking 的方式还不止一种！但是，都与 rollup 不同。 webpack4 的时候还要手动配置一下压缩插件，但最新的 webpack5 已经内置实现 tree-shaking 啦！在生产环境下无需配置即可实现 tree-shaking !
1.5K20发布于 2021-07-12 - 来自专栏『学习与分享之旅』
webpack-JS-Tree-Shaking
Tree-Shaking 概述过滤掉无用的 JS 代码和 CSS 代码, 我们称之为 Tree-Shaking例如: 在 a.js 中引入了 b 模块, b 模块中有 2 个方法, 但是我只用到了 1 /guides/tree-shaking 在这里就不在写多余的废物案例了，就直接介绍一下开启环境和生产环境的使用即可，如果是在开发环境当中的话需要修改开发环境的 webpack.config.js, 也就是修改 所以博主这里就先排除掉 CSS 相关的过滤，修改 package.json 配置, 告诉 webpack 哪些文件不做 Tree-Shaking：图片"sideEffects": [ "*.css" 相关配置和使用，接下来就是生产环境的 Tree-Shaking 相关使用，其实在生产环境模式中，是无需进行任何配置的, webpack 默认已经实现了 Tree-Shaking 直接利用 npm run prod 打包即可：图片注意点只有 ES module 导入才支持 Tree-Shaking任何导入的文件都会受到 Tree-Shaking 的影响这意味着，如果在项目中使用类似 css-loader
49200编辑于 2023-09-28 - 来自专栏vue学习
16、webpack从0到1-tree shaking
tree-shaking只有使用es6的模块化规范才有效，如果你使用commonJs模块化规范是搞不了tree-shaking的，为什么？ 而CommonsJs必须在跑起来运行的时候才能确定依赖关系，所以与不能tree-shaking。 -- 参考阮大神的讲解-->Module 的语法 概述 2、配置开发环境 如果你看要tree-shaking的一个具体的效果，那么你需要在mode:development中，因为在生产环境的时候， webpack会自动帮我们做tree-shaking。 模式mode要为production，因为production会自动使用terser-webpack-plugin这个插件来做一些压缩、无用代码的剔除实现tree-shaking。
1.1K20发布于 2020-03-25 - 来自专栏王鹤的专栏
Vue.js前后端同构方案之准备篇：代码优化
三、代码优化实施 1、优化方向一，其实通过tree-shaking的能力就可以做到了。我们使用Webpack2来实现我们tree-shaking的能力。 证明我们的tree-shaking是成功的。而且要看到ddd是基类模块的方法，证明在继承的情况下，tree-shaking也是正确执行的！ 尽量使用import * as uu from '. 使用前者非常方便的在调用的时候使用uu.xxx这种写法，而且tree-shaking是可以正确解析的。 比如代码中只调用了uu.ddd，那么uu.aaa, uu.bbb, uu.ccc是可以tree-shaking过滤掉的。而不用特意地指定import {ddd} from '. tree-shaking是很智能的！ 阶段性小结： 1）用import/export来改造代码，这是tree-shaking的基础，ES6的模块支持继承，可以正确执行tree-shaking。
6.8K20发布于 2017-05-08 - 来自专栏一路向前端
Rollup处理并打包JS文件项目实例
Rollup最主要的优点是它是基于ES2015模块的，相比于webpack或Browserify所使用的CommonJS模块更加有效率，因为Rollup使用一种叫做tree-shaking的特性来移除模块中未使用的代码 ，这也就是说当我们引用一个库的时候，我们只用到一个库的某一段的代码的时候，它不会把所有的代码打包进来，而仅仅打包使用到的代码(webpack2.0+貌似也引入了tree-shaking)。 注意：Rollup只会在ES6模块中支持tree-shaking特性。目前按照CommonJS模块编写的jquery不能被支持tree-shaking。
1.3K40发布于 2019-09-04
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号