关于webpack(v5.74.0)的tree-shaking原理
在webpack中tree-shaking至关重要，首先会解析模块依赖收集模块的导入导出，然后在生成代码的时候会给当前导入导出变量打标记，最后在生成代码时使用terser将代码压缩和删除无副作用的代码。所以具体的tree-shaking过程是由terser插件实现的。
解析模块依赖
解析模块依赖的过程发生在_doBuild的回调中，主要执行parse方法去解析当前模块的依赖和导出：
这里会分析当前模块的依赖，只引入未使用的是不会被记录到dependency列表中的。
打标记
打标记的意思是标记当前模块对应的ModuleGraphModule的exports信息。如果该变量在当前模块中被用到，那么就会设置_usedInRuntime的值。
生成代码
在生成代码的过程根据变量的_usedInRuntime值解析依赖的时候将变量添加到initFragments。并将initFragments中的片段转换成标记的代码添加到source中。
删除死代码
删除死代码的过程并不是webpack做的，而是通过terser模块去删除无用代码。
总结
- webpack的tree-shaking第一步优化是通过ast去解析依赖，未使用的依赖不会被添加到dependency列表中。
- 第二步是设置导入的模块对应的exports信息。如果该变量在当前模块中被使用那么会根据当前依赖找到对应的模块，并设置该模块的_usedInRuntime值，在代码生成的时候就会被标记为
/* harmony import */。 - 第三步是通过terser删除无用的代码以及压缩等。
关于webpack(v5.74.0)的tree-shaking原理相关推荐
- Webpack进阶（一） tree shaking与不同mode
Tree Shaking 生产环境去除没有使用到的内容(开发环境没有删除,会影响调试) 只支持ESM规范(静态引入,编译时引入),不支持CJS(动态引入,执行时引入) // webpack.confi ...
- webpack构建中tree shaking、scope Hoisting（面试题）
一.tree shaking (摇树优化) tree shaking概念: 1个模块可能有多个方法,只要其中某个方法使用了,整个文件会被打到bundle中 tree shaking 只将用到的方法打到 ...
- webpack中的tree shaking(树摇)-----移除未使用的代码
本篇大致概括一下tree shaking的作用以及与webpack相结合使用 什么是tree shaking 引用webpack官网的原文来说: tree shaking 是一个术语,通常用于描述移除 ...
- Tree Shaking概念详解
这篇文章写于两年前,前端的发展日新月异,新的构建工具已经开始崭露头角.Vite已经出来很久了,新版本也比较稳定,推荐大家学习这一款构建工具. Tree Shaking 指的就是当我引入一个模块的时候, ...
- Tree Shaking和DCE
Tree Shaking和DCE Tree Shaking 指的就是当我引入一个模块的时候,我不引入这个模块的所有代码,我只引入我需要的代码,这就需要借助 webpack 里面自带的 Tree Sha ...
- Webpack 实现 Tree shaking 的前世今生
作者 | 左琳 责编 | 欧阳姝黎 前言 如果看过 rollup 系列的这篇文章 - 无用代码去哪了?项目减重之 rollup 的 Tree-shaking,那你一定对 tree-shak ...
- webpack学习(四) -- css tree shaking
css tree shaking 我们和webpack(三)一样,用案例说话 安装css需要的两个loader,css-loader 和style-loader npm install css-loa ...
- webpack高级应用篇（九）：tree shaking（usedExports） 与 sideEffects
目录 tree shaking(usedExports) tree shaking 前 tree shaking 后 sideEffects(副作用) 解释 tree shaking 和 `sideE ...
- Webpack Tree Shaking
Tree Shaking tree shaking 是一个术语,通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code).它依赖于 ES2015 模块语法的 静态结构 特性, ...
最新文章
- Leangoo自定义字段
- 【Cocos2D-X 学习笔记】Node父类的方法和属性
- idea findbugs使用_「测试」 - 静态测试 amp; FindBugs
- 浅入浅出Typescript Decorators
- SAP Spartacus HTML Tags 实现介绍
- Google SRE 读书笔记 扒一扒SRE用的那些工具
- 支付宝pc支付php,laravel框架下的pc支付宝支付接入
- group by rollup
- php case 多个条件判断语句,Shell case语句（多分支条件判断）
- python编程入门教程下载-Python编程从入门到实践的PDF教程免费下载
- 收到客户反馈的BUG，主管应该怎么办
- python 反编译exe文件为py文件
- android的sd卡分区,AndroidSD卡做磁盘分区图文教程
- 算24点的一般方法及例题
- VUE3模板，JSX，JSV
- 医院公厕智能化管理需要实现哪些功能
- linux0.11内存memory.c一些函数的简单的注释（一）
- android5.0新特性 clipping的用法
- Linux 下各文件夹的结构说明及用途介绍
- 量化投资工具-AKShare是如何进行投资交易的？