1分钟了解 Tree-shaking
1分钟了解 Tree-shaking
- 1. 概念
- 2. 原理
- 3. 对比
1. 概念
Tree-shaking 中文译为摇晃之后的树,用在 webpack 打包中。其功能是移除 JavaScript 上下文中未引用的代码。比如在项目中引用了一个模块 antd 。但其实只使用到了 Button 组件、Input 组件、Form 组件等。那么 webpack 在打包后会消除掉以上组件之外的其他 antd 组件。从而减小打包体积,以此达到性能优化的目的。
新的 webpack 4 正式版本拓展了这个检测的功能。
2. 原理
Tree-shaking 的消除原理是依赖于 ES6 模块系统中的静态结构特性。即 import 和 export。
ES6 模块的特点:
- 只能作为模块顶层的语句出现。
- import 的模块名只能是字符串常量。
- import binding 是 immutable(不可变的) 的。
在 webpack 中使用 Tree-shaking 的三步:
找到未使用的代码
模块必须使用 ES6 的 import 导入 和 export 导出,以此找出未使用的代码。标记无副作用
通过 package.json 的sideEffects
属性来标记为"无副作用",可以安全地删除。也可以在 module.rules 配置选项 中设置 “sideEffects”。
{"name": "your-project","sideEffects": false
}
- 安全删除
引入一个能够删除未引用代码(dead code)的压缩工具(minifier)(例如 UglifyJSPlugin)。 从 webpack 4 开始,也可以通过 “mode” 配置选项轻松切换到压缩输出,只需设置为 “production”。也可以在命令行接口中使用--optimize-minimize
标记来使用 UglifyJSPlugin。
webpack.config.js
const path = require('path');module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},mode: "production"
};
3. 对比
DCE(dead code elimination)译为消除无用代码。其原理是通过编译器判断某些代码根本不影响输出,所以将其消除掉。
Tree-shaking 是 DCE 的一种实现。两者实现的方法又有些不同。DCE 旨在消除不可能执行的代码。而 Tree-shaking 是消除没有用到的代码。
DCE 消除大法:
- 代码不会被执行。
- 代码执行的结果不会被用到。
- 代码只会影响死变量(只读不写)。
例1:
function a(){return 10;let x = 30;return x;
}
以上 a 函数中 return10 之后不会再执行后面的代码,所以会被消除。
例2:
function b(){let x = 30;if(false){x = 100;};return x;
}
以上 b 函数中 if(false) 永远不会满足条件,即该片段也不会执行,所以会被消除。
Tree-shaking 消除大法:
- 只能处理函数和顶层的 import/expor 变量,不能消除没用到的类的方法。
- Javascript 动态语言的特性使得静态分析比较困难。
- 如果静态分析的时候删除某些方法,程序运行时就可能报错,那就本末倒置了。
传统编译型语言中都是由编译器将 dead code 从 AST (抽象语法树)中删除。我们都知道 JavaScript 不是编译型语言,所以一般是由 uglify 插件来完成 Javascript 的 DCE。
1分钟了解 Tree-shaking相关推荐
- Webpack 实现 Tree shaking 的前世今生
作者 | 左琳 责编 | 欧阳姝黎 前言 如果看过 rollup 系列的这篇文章 - 无用代码去哪了?项目减重之 rollup 的 Tree-shaking,那你一定对 tree-shak ...
- Tree Shaking概念详解
这篇文章写于两年前,前端的发展日新月异,新的构建工具已经开始崭露头角.Vite已经出来很久了,新版本也比较稳定,推荐大家学习这一款构建工具. 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、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 ...
最新文章
- 中国17种稀土有啥军事用途?没它们,美军技术优势将归零
- 购物商城---购物车,结算
- Linux与shell环境,Linux 环境及 Shell 程序
- 成功解决利用matplotlib.pyplot进行绘图的时候整个画布中的绘制曲线只显示一部分
- MapReduce实现手机上网日志分析(分区)
- hadoop hive 2.1.1 将Hive启动为服务
- leetcode95. 不同的二叉搜索树 II(递归)
- ICCV 2019 Best Paper :SinGAN 解读,强烈推荐!
- git pull ---rebase
- PHP中Foreach在引用时的陷阱
- Android开发之科大讯飞语音合成与播报
- Android开发必知的maven-publish插件知识
- 海外文摘杂志海外文摘杂志社海外文摘编辑部2022年第4期目录
- EHCI主机控制器--周期帧列表(periodic frame list)
- Keil5开发工具 --- 背景颜色绿色护眼
- python使用opencv如何保存图片_OpenCV Python 保存图片
- vscode CommandNotFoundError: Your shell has not been properly configured to use ‘conda activate‘.解决
- 单片机入门教程:第七章 1602LCD液晶显示模块
- Filter、FilterChain、FilterConfig
- TI推出工业市场最强异构处理器AM57X 双核A15怕不怕
热门文章
- mysql 联结主键_联结表中的复合主键 - Sequelize
- 【VIM】如何优雅地保存退出VIM编辑器
- 袋鼠云数据中台专栏2.0 | 企业数字化(数据界面)整体架构
- 我国疫苗监管体系通过世卫组织新一轮评估
- Allegro指定gerber生成路径
- 阿里云https证书替换未生效
- BN(Batch Normalization):批量归一化
- 梦想中的“元宇宙“工厂,第三代数字孪生是什么?
- 资源管理器和计算机的功能基本相同吗,2019年上半年山东教师资格证小学信息技术面试试讲真题:《资源管理器》...
- win10 linux 黑屏,win10系统黑屏无法显示桌面解决