首页
学习
活动
专区
圈层
工具
发布

Tree-Shaking性能优化实践 - 原理篇

无用代码消除在广泛存在于传统的编程语言编译器中,编译器可以判断出某些代码根本不影响输出,然后消除这些代码,这个称之为DCE(dead code elimination)。...Tree-shaking 是 DCE 的一种新的实现,Javascript同传统的编程语言不同的是,javascript绝大多数情况需要通过网络进行加载,然后执行,加载的文件大小越小,整体执行时间更短,...Tree-shaking 和传统的 DCE的方法又不太一样,传统的DCE 消灭不可能执行的代码,而Tree-shaking 更关注宇消除没有用到的代码。...图4 传统编译型的语言中,都是由编译器将Dead Code从AST(抽象语法树)中删除,那javascript中是由谁做DCE呢?...的引用,但其实代码中并没有用到menu的任何方法和变量,所以我们的期望是,最终代码中menu.js里的内容被消除 main.js menu.js rollup打包结果 包中竟然包含了menu.js的全部代码

76110
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Rspack 作者揭秘,你的 Tree Shaking 真的起作用了吗?

    这些优化分别作用于不同层面:usedExports 针对导出变量,sideEffects 针对整个模块,而 DCE 则针对 JavaScript 语句。...在 bootstrap.js 中,console.log 语句不会执行,因此在最终输出中被移除,这是 DCE 优化的效果。 // index.js import { a } from '....DCE 优化 在 Webpack 中,死代码消除 (DCE) 的过程相对直接,主要涉及两个重要场景: 假分支 if(false){ false_branch; } else { true_branch...DCE(死代码消除)优化失败 除了 sideEffect 和 usedExports 优化的问题外,大多数其它 Tree shaking 失败可以归因于 DCE 的失败。...DCE 失败的常见原因包括使用了 eval 和 new Function 这样的动态代码结构,这些结构在代码压缩过程中可能导致优化失败。

    76510

    RS232的零调制解调器(Null Modem)连接方式,你了解吗?

    正常连接 在RS-232规范中,DTE(数据终端设备)和DCE(数据通信设备)是指串行连接两端的设备类型。一般来说,DTE和DCE分别指计算机设备和调制解调器。...因为RS-232规范主要涉及将DTE直接连接到DCE,反之亦然,所以引脚的定义使布线变得简单。...DTE到DCE的连接方式一般采用直通布线方式: 零调制解调器(Null Modem) 实际上,如果按照上述标准来说,RS232的网络里面正常应该有DCE设备,但我们在工控应用上很少看到存在Modem的场景...这种方法被称为零调制解调器布线,因为它取代了传统RS-232应用程序在两个DTE之间需要的两个调制解调器。...RS232DTEvsDCE.html https://tech.ifeng.com/c/7g9w8VNfzpo https://www.geeksforgeeks.org/difference-between-dte-and-dce

    1.2K10

    传统 Switch 语句:什么是传统 Switch?使用中存在哪些限制?

    传统 Switch 语句:什么是传统 Switch?使用中存在哪些限制? 粉丝提问: Java 中的传统switch语句是什么?在开发中使用有哪些限制和不足?...本文将详细解析传统switch语句的工作原理、使用场景及其限制,并通过示例说明如何避免使用中的常见问题。 正文 一、什么是传统 switch 语句?...二、传统 switch 的使用场景 传统switch适用于以下简单场景: 整数值判断:处理少量固定整数值的条件分支。 枚举类型匹配:通过枚举值进行条件判断。...三、示例:传统 switch 的用法 1....适时迁移到增强型 switch(JDK 12+) 增强型switch解决了传统switch的一些限制,支持返回值、箭头语法和多分支。

    47610

    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...AST语法树可以把一段 JS 代码的每一个语句都转化为树中的一个节点。DCE Dead Code Elimination [ɪˌlɪmɪˈneɪʃn],在保持代码运行结果不变的前提下,去除无用的代码。...tree shaking可以先回顾下《再唠叨JS模块化加载之CommonJS、AMD、CMD、ES6 》CommonJS 的设计过于灵活,对静态分析不友好。...就如同上文的例子 :我的插件可以从 webpack 得知 file1.js 的导出变量 one 被使用了。

    1.1K10
    领券