精华内容
下载资源
问答
  • Tree-Shaking原理

    千次阅读 2020-02-10 22:42:25
    Tree-Shaking性能优化实践 - 原理篇 一. 什么是Tree-shaking 先来看一下Tree-shaking原始的本意 上图形象的解释了Tree-shaking 的本意,本文所说的前端中的tree-shaking可以理解为通过工具"摇"我们的JS...

     

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

     

    一. 什么是Tree-shaking

    先来看一下Tree-shaking原始的本意

     

    上图形象的解释了Tree-shaking 的本意,本文所说的前端中的tree-shaking可以理解为通过工具"摇"我们的JS文件,将其中用不到的代码"摇"掉,是一个性能优化的范畴。具体来说,在 webpack 项目中,有一个入口文件,相当于一棵树的主干,入口文件有很多依赖的模块,相当于树枝。实际情况中,虽然依赖了某个模块,但其实只使用其中的某些功能。通过 tree-shaking,将没有使用的模块摇掉,这样来达到删除无用代码的目的。

     

    Tree-shaking 较早由 Rich_Harris 的 rollup 实现,后来,webpack2 也增加了tree-shaking 的功能。其实在更早,google closure compiler 也做过类似的事情。三个工具的效果和使用各不相同,使用方法可以通过官网文档去了解,三者的效果对比,后文会详细介绍。

     

    二. tree-shaking的原理

    Tree-shaking的本质是消除无用的js代码。无用代码消除在广泛存在于传统的编程语言编译器中,编译器可以判断出某些代码根本不影响输出,然后消除这些代码,这个称之为DCE(dead code elimination)。

    Tree-shaking 是 DCE 的一种新的实现,Javascript同传统的编程语言不同的是,javascript绝大多数情况需要通过网络进行加载,然后执行,加载的文件大小越小,整体执行时间更短,所以去除无用代码以减少文件体积,对javascript来说更有意义。

    Tree-shaking 和传统的 DCE的方法又不太一样,传统的DCE 消灭不可能执行的代码,而Tree-shaking 更关注宇消除没有用到的代码。下面详细介绍一下DCE和Tree-shaking。

     

    (1)先来看一下DCE消除大法

     

    Dead Code 一般具有以下几个特征

    •代码不会被执行,不可到达

    •代码执行的结果不会被用到

    •代码只会影响死变量(只写不读)

     

    下面红框标示的代码就属于死码,满足以上特征

    图4

    传统编译型的语言中,都是由编译器将Dead Code从AST(抽象语法树)中删除,那javascript中是由谁做DCE呢?

    首先肯定不是浏览器做DCE,因为当我们的代码送到浏览器,那还谈什么消除无法执行的代码来优化呢,所以肯定是送到浏览器之前的步骤进行优化。

    其实也不是上面提到的三个工具,rollup,webpack,cc做的,而是著名的代码压缩优化工具uglify,uglify完成了javascript的DCE,下面通过一个实验来验证一下。

     

    以下所有的示例代码都能在我们的github中找到,欢迎戳❤

    github.com/lin-xi/tree…

     

    分别用rollup和webpack将图4中的代码进行打包

    图5

    中间是rollup打包的结果,右边是webpack打包的结果

    可以发现,rollup将无用的代码foo函数和unused函数消除了,但是仍然保留了不会执行到的代码,而webpack完整的保留了所有的无用代码和不会执行到的代码。

     

    分别用rollup + uglify和 webpack + uglify 将图4中的代码进行打包

    图6

    中间是配置文件,右侧是结果

    可以看到右侧最终打包结果中都去除了无法执行到的代码,结果符合我们的预期。

     

    (2) 再来看一下Tree-shaking消除大法

    前面提到了tree-shaking更关注于无用模块的消除,消除那些引用了但并没有被使用的模块。

    先思考一个问题,为什么tree-shaking是最近几年流行起来了?而前端模块化概念已经有很多年历史了,其实tree-shaking的消除原理是依赖于ES6的模块特性。

    ES6 module 特点:

    • 只能作为模块顶层的语句出现
    • import 的模块名只能是字符串常量
    • import binding 是 immutable的

    ES6模块依赖关系是确定的,和运行时的状态无关,可以进行可靠的静态分析,这就是tree-shaking的基础。

    所谓静态分析就是不执行代码,从字面量上对代码进行分析,ES6之前的模块化,比如我们可以动态require一个模块,只有执行后才知道引用的什么模块,这个就不能通过静态分析去做优化。

    这是 ES6 modules 在设计时的一个重要考量,也是为什么没有直接采用 CommonJS,正是基于这个基础上,才使得 tree-shaking 成为可能,这也是为什么 rollup 和 webpack 2 都要用 ES6 module syntax 才能 tree-shaking。

     

    我们还是通过例子来详细了解一下

    面向过程编程函数和面向对象编程是javascript最常用的编程模式和代码组织方式,从这两个方面来实验:

    • 函数消除实验
    • 类消除实验

    先看下函数消除实验

    utils中get方法没有被使用到,我们期望的是get方法最终被消除。

    注意,uglify目前不会跨文件去做DCE,所以上面这种情况,uglify是不能优化的。

    先看看rollup的打包结果

    完全符合预期,最终结果中没有get方法

    再看看webpack的结果

    也符合预期,最终结果中没有get方法

    可以看到rollup打包的结果比webpack更优化

    函数消除实验中,rollup和webpack都通过,符合预期

     

    再来看下类消除实验

    增加了对menu.js的引用,但其实代码中并没有用到menu的任何方法和变量,所以我们的期望是,最终代码中menu.js里的内容被消除

    main.js

    menu.js

    rollup打包结果

    包中竟然包含了menu.js的全部代码

    webpack打包结果

    包中竟然也包含了menu.js的全部代码

    类消除实验中,rollup,webpack 全军覆没,都没有达到预期

    what happend?

    这跟我们想象的完全不一样啊?为什么呢?无用的类不能消除,这还能叫做tree-shaking吗?我当时一度怀疑自己的demo有问题,后来各种网上搜索,才明白demo没有错。

    下面摘取了rollup核心贡献者的的一些回答:

    图7

    • rollup只处理函数和顶层的import/export变量,不能把没用到的类的方法消除掉
    • javascript动态语言的特性使得静态分析比较困难
    • 图7下部分的代码就是副作用的一个例子,如果静态分析的时候删除里run或者jump,程序运行时就可能报错,那就本末倒置了,我们的目的是优化,肯定不能影响执行

     

    再举个例子说明下为什么不能消除menu.js,比如下面这个场景

    function Menu() {
    }
    
    Menu.prototype.show = function() {
    }
    
    Array.prototype.unique = function() {
        // 将 array 中的重复元素去除
    }
    
    export default Menu;
    复制代码

    如果删除里menu.js,那对Array的扩展也会被删除,就会影响功能。那也许你会问,难道rollup,webpack不能区分是定义Menu的proptotype 还是定义Array的proptotype吗?当然如果代码写成上面这种形式是可以区分的,如果我写成这样呢?

    function Menu() {
    }
    
    Menu.prototype.show = function() {
    }
    
    var a = 'Arr' + 'ay'
    var b
    if(a == 'Array') {
        b = Array
    } else {
        b = Menu
    }
    
    b.prototype.unique = function() {
        // 将 array 中的重复元素去除
    }
    
    export default Menu;
    复制代码

    这种代码,静态分析是分析不了的,就算能静态分析代码,想要正确完全的分析也比较困难。

    更多关于副作用的讨论,可以看这个

    图标

    Tree shaking class methods · Issue #349 · rollup/rollupgithub.com

     

    tree-shaking对函数效果较好

    函数的副作用相对较少,顶层函数相对来说更容易分析,加上babel默认都是"use strict"严格模式,减少顶层函数的动态访问的方式,也更容易分析

     

    我们开始说的三个工具,rollup和webpack表现不理想,那closure compiler又如何呢?

    将示例中的代码用cc打包后得到的结果如下:

    天啊,这不就是我们要的结果吗?完美消除所有无用代码的结果,输出的结果非常性感

    closure compiler, tree-shaking的结果完美!

    可是不能高兴得太早,能得到这么完美结果是需要条件的,那就是cc的侵入式约束规范。必须在代码里添加这样的代码,看红线框标示的

    google定义一整套注解规范Annotating JavaScript for the Closure Compiler,想更多了解的,可以去看下官网。

    侵入式这个就让人很不爽,google Closure Compiler是java写的,和我们基于node的各种构建库不可能兼容(不过目前好像已经有nodejs版 Closure Compiler),Closure Compiler使用起来也比较麻烦,所以虽然效果很赞,但比较难以应用到项目中,迁移成本较大。

     

    说了这么多,总结一下:

    三大工具的tree-shaking对于无用代码,无用模块的消除,都是有限的,有条件的。closure compiler是最好的,但与我们日常的基于node的开发流很难兼容。

    tree-shaking对web意义重大,是一个极致优化的理想世界,是前端进化的又一个终极理想。

    理想是美好的,但目前还处在发展阶段,还比较困难,有各个方面的,甚至有目前看来无法解

    决的问题,但还是应该相信新技术能带来更好的前端世界。

    优化是一种态度,不因小而不为,不因艰而不攻。

     

    知识有限,如果错误,请不惜指正,谢谢

     

    下一篇将继续介绍 Tree-Shaking性能优化实践 - 实践

     

    展开全文
  • webpack之Tree Shaking

    2021-01-03 19:20:42
    目录Tree ShakingTree Shaking定义Tree Shaking原理Dead Code 特征不同模式测试1. development 模式2. production 模式sideEffects副作用使 Tree Shaking 失效副作用导致的问题sideEffects 作用sideEffects 注意事项...

    Tree Shaking

    Tree Shaking定义

    • 树抖动(Tree Shaking),是JavaScript上下文中常用于消除死代码的术语
    • 通俗:通过工具"摇"JS文件,将其中用不到的代码"摇"掉,提升运行性能

    Tree Shaking原理

    • 通过 DCE(dead code elimination),消除无效代码
    • 依赖于ES2015模块语法的静态结构
      • es6 模块预编译,可做静态分析
      • cjs(commonJS)模块,动态导入

    Dead Code 特征

    • 代码不会被执行,不可到达
    • 代码执行的结果不会被用到
    • 代码只会影响死变量(只写不读)

    不同模式测试

    • 测试代码
    // index.js
    import { square } from './math'
    
    const v = square(2) // 只读不写
    
    // math.js
    export function square(x) {
      return x * x;
    }
    

    1. development 模式

    • 无 Tree Shaking
      在这里插入图片描述

    2. production 模式

    • Tree Shaking
      在这里插入图片描述

    sideEffects

    副作用使 Tree Shaking 失效

    副作用: 一个函数会、或者可能会对函数外部变量产生影响的行为(日志,全局变量等)
    结果:打包后,副作用代码保留,其他代码被删除

    // index.js
    import './menu'
    
    // menu.js
    function Menu() {
    }
    
    Menu.prototype.show = function () {
    }
    
    Array.prototype.unique = function () {
    
    }
    
    window.a = 1
    
    console.log(111)
    
    export const c1 = class {
      constructor() {
        this.data = 1
      }
      getData() {
        return this.data
      }
    }
    
    document.write(111)
    export default Menu;
    
    
    // index.less
    body{
      color: red;
    }
    
    • 日志和全局变量相关的代码保留,其他代码被 Tree Shaking
      在这里插入图片描述

    副作用导致的问题

    • 开发 npm 模块时,希望编写的功能纯粹,只在包内部使用,外部不依赖
    // utils/index.js
    export * from './a';
    export * from './b';
    // utils/a.js
    export function a() {
      console.log('aaaaaaaaaaaaa');
    }
    // utils/b.js
    Object.defineProperty(Array.prototype, 'sum', {
      value: function () {
        return this.reduce((sum, num) => sum += num, 0);
      }
    })
    export function b() {
      console.log([1, 2, 3, 4].sum());
    }
    // app.js
    import { a } from './utils';
    a();
    
    // webpack.config.js
    module.exports = {
    	entry: './src/app.js',
    }
    
    • 输出
      在这里插入图片描述
    • 问题:Array原型的sum方法,不希望暴露到外部

    sideEffects 作用

    • 目的:sideEffects 通知 webpack 该模块是可以安全的 tree-shaking 的, 无需关心其副作用
    sideEffects: boolean | string[]
    
    • package.json 配置
    "sideEffects": false // 表明整个工程是"无副作用"的
    
    // 或
    "sideEffects": [
      "./src/utils"
    ]
    
    • 上面demo输出
      在这里插入图片描述

    sideEffects 注意事项

    • 不需要 Tree Shaking 的模块 : import ‘xxx’ 语句是仅引入而未使用
      • css 文件
      • js 执行文件
    // polyfill.js
    function aaa(...arr) {
      console.log(arr)
    }
    aaa(1, 2, 3)
    
    // app.js
    import { a } from './utils';
    import './polyfill';
    a();
    
    // package.json
    "sideEffects": [
        "./src/polyfill.js"
      ]
    
    

    在这里插入图片描述

    参考链接

    测试代码

    展开全文
  • tree shaking简单分析

    2017-07-10 00:55:49
    tree shaking原理 什么是tree shaking tree shaking首先是由rollup的作者提出的,它是DCE(dead code elimination)的一个实现,通过tree shaking的分析,可以使你代码里没有使用的代码全部删...
        

    文章梗概

    1. 什么是tree shaking

    2. 为什么需要tree shaking

    3. tree shaking原理

    什么是tree shaking

    tree shaking首先是由rollup的作者提出的,它是DCE(dead code elimination)的一个实现,通过tree shaking的分析,可以使你代码里没有使用的代码全部删除。然而它又区别于普通的dec,这里作者有一个比喻很形象

    imagine that you made cakes by throwing whole eggs into the mixing bowl and smashing them up, instead of cracking them open and pouring the contents out. Once the cake comes out of the oven, you remove the fragments of eggshell, except that’s quite tricky so most of the eggshell gets left in there.

    简单翻译一下就是,如果将dec比作制作蛋糕,传统的dec做法就是,将整个鸡蛋丢进碗里搅拌,然后放进烤箱,烤完之后从做好的蛋糕里,找到不需要的蛋壳扔掉,而tree shaking是将鸡蛋打破把蛋黄等有用的东西丢进碗里搅拌,最后直接做出蛋糕。

    为什么需要tree shaking

    主要还是为了减少页面的加载时间,将无用的代码删除,减少js包的大小,从而减少用户等待的时间,使用户不因为漫长的等待而离开。
    那为什么已经有了dec,还要做tree shaking呢,根据作者的意思是,由于js静态语法分析的局限性,从已有代码里去删除代码不如去寻找真正使用的代码来的好。

    tree shaking实现的原理

    其实关于tree shaking的实现原理上文多少都有提到,用一句话解释就是,找到你整个代码里真正使用的代码,打包进去,那么没用的代码自然就剔除了。
    然而事情并非说的那么简单,我们如何知道哪些代码有用,哪些代码没用呢?其实tree shaking得以实现,是依赖es6的module模块的。是es6的模块特性,奠定了tree shaking的实现基础。
    关于es6 module的特性,大概有如下几点:

    1. 必须写在最外层,不能写在函数里

    2. import的语句具有和var一样的提升(hoist)特性。

    具体还有哪些特性可以查一下文档。

    tree shaking首先会分析文件项目里具体哪些代码被引入了,哪些没有引入,然后将真正引入的代码打包进去,最后没有使用到的代码自然就不会存在了。

    展开全文
  • 写在前面今天这道题目是在和小红书的一位面试官聊的时候:我:如果要你选择一道题目来考察面试者,你最有可能选择哪一道?面试官:那应该就是介绍一下tree shaking及其工作原理?我:为什么...

    写在前面

    今天这道题目是在和小红书的一位面试官聊的时候:

    我:如果要你选择一道题目来考察面试者,你最有可能选择哪一道?

    面试官:那应该就是介绍一下tree shaking及其工作原理?

    我:为什么?

    面试官:是因为最近面了好多同学,大家都说熟悉webpack,在项目中如何去使用、如何去优化,也都或多或少会提到tree shaking,但是每当我深入去问其工作机制或者原理时,却少有人能回答上来。(小声 bb:并不是我想内卷,确实是工程师的基本素养啊,哈哈 ????)

    面试官:那你来回答一下这个问题?

    我:我也用过tree shaking,只是知道它的别名叫树摇,最早是由Rollup实现,是一种采用删除不需要的额外代码的方式优化代码体积的技术。但是关于它的原理,我还真的不知道,额,,,,

    我们平时更多时候是停留在应用层面,这种只是能满足基础的业务诉求,对于后期的技术深挖以及个人的职业发展都是受限的。还是那句老话:知其然,更要知其所以然~

    话不多说,下面我就带大家一起来深入探究这个问题。

    什么是Tree shaking

    Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术,专业术语叫 Dead code elimination

    这个概念,我相信大多数同学都是了解的。什么,你不懂?

    不懂没关系,我可以教你啊(不过那是另外的价钱,哈哈 ????)

    走远了,兄弟,让我们言归正传:tree shaking如何工作的呢?

    tree shaking如何工作的呢?

    虽然 tree shaking 的概念在 1990 就提出了,但直到 ES6ES6-style 模块出现后才真正被利用起来。

    ES6以前,我们可以使用CommonJS引入模块:require(),这种引入是动态的,也意味着我们可以基于条件来导入需要的代码:

    let dynamicModule;
    // 动态导入
    if (condition) {
      myDynamicModule = require("foo");
    } else {
      myDynamicModule = require("bar");
    }
    

    但是CommonJS规范无法确定在实际运行前需要或者不需要某些模块,所以CommonJS不适合tree-shaking机制。在 ES6 中,引入了完全静态的导入语法:import。这也意味着下面的导入是不可行的:

    // 不可行,ES6 的import是完全静态的
    if (condition) {
      myDynamicModule = require("foo");
    } else {
      myDynamicModule = require("bar");
    }
    

    我们只能通过导入所有的包后再进行条件获取。如下:

    import foo from "foo";
    import bar from "bar";
    
    if (condition) {
      // foo.xxxx
    } else {
      // bar.xxx
    }
    

    ES6import语法可以完美使用tree shaking,因为可以在代码不运行的情况下就能分析出不需要的代码。

    看完上面的分析,你可能还是有点懵,这里我简单做下总结:因为tree shaking只能在静态modules下工作。ECMAScript 6 模块加载是静态的,因此整个依赖树可以被静态地推导出解析语法树。所以在 ES6 中使用 tree shaking 是非常容易的。

    tree shaking的原理是什么?

    看完上面的分析,相信这里你可以很容易的得出题目的答案了:

    • ES6 Module引入进行静态分析,故而编译的时候正确判断到底加载了那些模块

    • 静态分析程序流,判断那些模块和变量未被使用或者引用,进而删除对应代码

    common.js 和 es6 中模块引入的区别?

    但到这里,本篇文章还没结束。从这道题目我们可以很容易的引申出来另外一道“明星”面试题:common.js 和 es6 中模块引入的区别?

    这道题目来自冴羽大佬的阿里前端攻城狮们写了一份前端面试题答案,请查收[1]

    这里就直接贴下他给出的答案了:

    CommonJS 是一种模块规范,最初被应用于 Nodejs,成为 Nodejs 的模块规范。运行在浏览器端的 JavaScript 由于也缺少类似的规范,在 ES6 出来之前,前端也实现了一套相同的模块规范 (例如: AMD),用来对前端模块进行管理。自 ES6 起,引入了一套新的 ES6 Module 规范,在语言标准的层面上实现了模块功能,而且实现得相当简单,有望成为浏览器和服务器通用的模块解决方案。但目前浏览器对 ES6 Module 兼容还不太好,我们平时在 Webpack 中使用的 exportimport,会经过 Babel 转换为 CommonJS 规范。在使用上的差别主要有:

    1、CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。

    2、CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。

    3、CommonJs 是单个值导出,ES6 Module可以导出多个

    4、CommonJs 是动态语法可以写在判断里,ES6 Module 静态语法只能写在顶层

    5、CommonJsthis 是当前模块,ES6 Modulethisundefined

    冴羽大佬的文章质量都非常高,也欢迎大家多去支持冴羽大佬,相信看完一定会对你有所收获。

    总结一下

    这是大厂面试问题解析的第二篇了,和之前准备写这一系列的初衷一样:我力求通过一些面试题去发掘自己未曾了解或者未曾深入了解的一个领域。

    面试题更多时候是一个引子,更多是想通过面试题去思考题目背后带来的对某一模块的深入学习和探讨。

    当然,每篇文章也不会只是草草给出答案,我都会尽量深入浅出的给出自己对于这道题目的理解,也会在这个基础上做一些拓展。

    参考资料

    [1]

    阿里前端攻城狮们写了一份前端面试题答案,请查收: https://juejin.cn/post/6844904097556987917

    展开全文
  • Tree shaking学习

    2020-09-02 10:59:53
    一、Tree shaking是什么 Tree shaking 是一个通常用于描述...二、Tree shaking原理 2.1 原理 Tree shaking的本质是移除掉无用的js代码。无用代码移除存在于各种compiler中,compiler会根据代码的export和import的关
  • tree shaking

    2021-03-03 14:02:43
    tree-shaking的消除原理是依赖于ES6的模块特性,因为ES6模块的依赖关系是确定的,和运行时的状态无关,可以进行可靠的静态分析,然后进行消除,这也是 ES6 modules 在设计时的一个重要考量,也是为什么没有直接采用 ...
  • 一、tree shaking (摇树优化) tree shaking概念: 1个模块可能有多个方法,只要其中某个方法使用了,整个文件会被打到bundle中 tree shaking 只将用到的...tree shaking原理:依赖于ES6 moudel特性 只能作为模块
  • 写在前面今天这道题目是在和小红书的一位面试官聊的时候:我:如果要你选择一道题目来考察面试者,你最有可能选择哪一道?面试官:那应该就是介绍一下tree shaking及其工作原理?我:为什...
  • webpack 中的 tree shaking

    2020-10-31 08:44:44
    webpack 中 tree shaking 的用途和原理是什么? 参考链接: https://webpack.docschina.org/guides/tree-shaking/ https://juejin.im/post/6844903544756109319 tree shaking 的基本概念 对无用代码进行剔除,以...
  • 概念:1 个模块可能有多个⽅法,只要其中的某个⽅法使⽤到了,则整个⽂件都会被打到 bundle ⾥⾯去,tree shaking 就是只把⽤到的⽅法打⼊ bundle ,没⽤到的⽅法会在 uglify 阶段被擦除掉。 使⽤: webpack 默认...
  • tree shaking 是一个术语,通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code) 如果将应用程序比作一棵树。 绿色表示实际用到的源码和 library,是树上活...tree shaking原理可以参考Tree-Shaking性...
  • webpack构建之tree-shaking原理是什么

    千次阅读 2020-08-20 17:53:03
    我们在开发一个项目的时候,总会遇到这样的问题,就是比如我们写了一个utils工具类,我们在某一个组件内要用到utils这个类里的其中一个或者某几个方法,但是当我们引入utils的时候,实际是...tree-shaking原理 利用es6
  • Webpack 中的 TreeShaking 是什么?

    千次阅读 2021-01-13 06:51:27
    tree shaking就是通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的静态结构特性,例如import和export。 原理 ESM import 只能作为模块顶层的语句出现 import 的模块名...
  • 一. 什么是Tree-shaking 先来看一下Tree-shaking原始的本意 上图形象的解释了Tree-shaking 的本意,本文所说的前端中的tree-shaking可以理解为通过工具"摇"...
  • webpack之摇树优化(tree shaking

    千次阅读 2019-06-25 20:54:14
    tree shaking主要作用是打包项目时会将不用到的方法不打包入项目中,这样得以优化项目体积。 主要原理: 利用ES6模块的特点: 只能作为模块顶层的语句出现 import 的模块名只能是字符串常量 import binding 是 ...
  • 这次学习webpack4不仅仅要会配置,记住核心API,最好还要理解一下webpack更深层次的知识,比如打包原理等等,所以可能会省略一些比较基础的内容,但是希望我可以通过此次学习掌握webpack,更好地应对以后的工作。...
  • Webpack4: Tree-shaking 深度解析

    千次阅读 2019-02-15 04:36:25
    什么是Tree-shaking 所谓Tree-shaking就是‘摇’的意思,作用是把项目中没必要的模块全部抖掉,用于在不同的模块之间消除无用的代码,...至于为什么不完备,可以看一下百度外卖的Tree-shaking原理 Tree-shading原理...
  • 上一篇文章 Tree-Shaking性能优化实践 - 原理篇 介绍了 tree-shaking原理,本文主要介绍 tree-shaking 的实践三. tree-shaking实践webpack2 发布,宣布支持tree-shaking,webpack 3发布,支持作用域提升,生成的...
  • 目录Tree-Shaking原理副作用成也Babel,败也Babel不够屌的UglifyJS那到底该怎么办?如果是使用webpack打包JavaScript库使用rollup打包JavaScript库使用webpack打包工程化项目总结 本文将探讨tree-shaking在当下的...

空空如也

空空如也

1 2 3
收藏数 55
精华内容 22
关键字:

treeshaking原理