Tree-shaking

Tree-shaking的本质

tree-shaking的本质是消除无用的js代码。和传统的dead code elimination（DCE）区别为传统DCE消除不可能执行的代码，tree-shaking更关注消除没有用到的代码。

通过ES Module的特性可以进行静态分析的特点，在编译时进行静态分析导入导出关系，识别出无用代码进行剔除
ES Module特性

import只能作为顶层语句出现
import的模块名只能是字符串常量
import不可变的

webpack中Tree-shaking流程

启动 Tree Shaking 功能必须同时满足三个条件

使用 ESM 规范编写模块代码
配置 optimization.usedExports 为 true，启动标记功能
启动代码优化功能，可以通过如下方式实现：
- 配置 mode = production
- 配置 optimization.minimize = true
- 提供 optimization.minimizer 数组

整体流程

收集模块导出
1.1 将模块的所有 ESM 导出语句转换为 Dependency对象，并记录到 module 对象的 dependencies 集合
1.2 触发finishModules钩子，执行 FlagDependencyExportsPlugin 插件回调。从 entry 开始读取 ModuleGraph 中存储的模块信息，遍历所有 module 对象。遍历 module 对象的 dependencies 数组。将其转换为 ExportInfo 对象并记录到 ModuleGraph 体系中
标记模块导出
2.1 出发 optimizeDependencies 钩子，执行 FlagDependencyUsagePlugin 。从 entry 开始逐步遍历 ModuleGraph 存储的所有 module 对象
2.2 遍历 module 对象对应的 exportInfo 数组
2.3 exportInfo 对象执行 compilation.getDependencyReferencedExports 方法，确定其对应的 dependency 对象有否被其它模块使用
2.4 被使用的导出值，调用 exportInfo.setUsedConditionally 方法将其标记为已被使用
2.5 exportInfo._usedInRuntime 属性，记录该导出被如何使用
生成代码
Webpack 根据 ModuleGraph 体系中记录的导出值使用情况生成不同的代码
删除无用代码
由 Terser、UglifyJS 等工具“摇”掉这部分无效代码

Rollup中Tree-shaking流程

无需额外配置，只要代码符合ES Module规范，即可实现tree-shaking。

基于ES6模块的静态分析
分析程序流，判断哪些变量被使用、引用

分析程序流
基于作用域，在AST时对韩素或全局对象进行对象记录，然后在形成的整个作用域链对象中进行匹配import的导入并标识起来，最后打包匹配的代码，删除未匹配的

整体流程

从入口文件出发，找出所有读取的变量，找这些变量在哪里定义的，将定义语句包含进来，无关代码抛弃。

副作用以及Babel

一个函数会、或者可能会对函数外部变量产生影响的行为，会产生副作用。
Babel 将 ES6/ES7 代码进行转换时，可能会使原本没有副作用的代码，产生副作用,进而无法进行 tree shaking。

Tree-shaking相关推荐

Webpack进阶（一） tree shaking与不同mode
Tree Shaking 生产环境去除没有使用到的内容(开发环境没有删除,会影响调试) 只支持ESM规范(静态引入,编译时引入),不支持CJS(动态引入,执行时引入) // webpack.confi ...
webpack学习(四) -- css tree shaking
css tree shaking 我们和webpack(三)一样,用案例说话安装css需要的两个loader,css-loader 和style-loader npm install css-loa ...
demo10 关于JS Tree Shaking
1.什么是 tree shaking 借助于 es6 (es2015) 模块系统 (import 和 export) 的静态解析,webpack 能够利用 Tree Shaking 进行按需加载,移除 ...
Webpack 实现 Tree shaking 的前世今生
作者 | 左琳责编 | 欧阳姝黎前言如果看过 rollup 系列的这篇文章 - 无用代码去哪了?项目减重之 rollup 的 Tree-shaking,那你一定对 tree-shak ...
webpack构建中tree shaking、scope Hoisting（面试题）
一.tree shaking (摇树优化) tree shaking概念: 1个模块可能有多个方法,只要其中某个方法使用了,整个文件会被打到bundle中 tree shaking 只将用到的方法打到 ...
webpack高级应用篇（九）：tree shaking（usedExports）与 sideEffects
目录 tree shaking(usedExports) tree shaking 前 tree shaking 后 sideEffects(副作用) 解释 tree shaking 和 `sideE ...
Tree Shaking和sideEffects配置
需要将 mode 配置设置成 development,以确定 bundle 不会被压缩: const path = require('path');module.exports = {entry: ' ...
【tree shaking】Tree-shaking之副作用
前言 Tree-shaking,顾名思义"摇树".webpack会在生产环境打包时"摇"掉无用的,死的代码,也就是dead code. 由于Tree-shaki ...
配置Tree Shaking来减少JavaScript的打包体积
译者按: 用Tree Shaking技术来减少JavaScript的Payload大小原文: Reduce JavaScript Payloads with Tree Shaking 译者: Fun ...
Angular 应用里的摇树优化 - tree shaking
Tree Shakeable Providers and Services in Angular Angular 最近推出了一项新功能,Tree Shakeable Providers. Tree S ...

Tree-shaking

Tree-shaking的本质

webpack中Tree-shaking流程

整体流程

Rollup中Tree-shaking流程

整体流程

副作用以及Babel

Tree-shaking相关推荐

最新文章

热门文章