精华内容
下载资源
问答
  • 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首先会分析文件项目里具体哪些代码被引入了,哪些没有引入,然后将真正引入的代码打包进去,最后没有使用到的代码自然就不会存在了。

    展开全文
  • 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"
      ]
    
    

    在这里插入图片描述

    参考链接

    测试代码

    展开全文
  • webapck tree shaking

    2019-09-29 12:06:49
    这里引用官方的一句话来总结tree shaking tree shaking 是一个术语,通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的 静态结构 特性,例如 import 和 export。 我们的...

    这里引用官方的一句话来总结tree shaking

    tree shaking 是一个术语,通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的 静态结构 特性,例如 import 和 export。

    我们的文件中总会引入各种依赖或者公共方法,例如:定一个一个utils文件,里面放了add,minus两个方法,但是我们的index.js只需引入add方法,而不希望也把minus也打包进来,这时我们就用到了tree shaking。

    src/math.js

    export const add = (a, b) => {
      console.log(a + b);
    }
    
    export const minus = (a, b) => {
      console.log(a - b)
    }

    src/index.js

    import { add } from './math.js'
    
    function component() {
        var element = document.createElement('div');
        element.innerHTML = [
          'Hello webpack!',
          '5 + 6 is sum to ' + add(5, 6)
        ].join('\n\n');
    
        return element;
    }
    document.body.appendChild(component());
        // 为做tree shaking 的打包输出
         Asset       Size  Chunks             Chunk Names
    index.html  323 bytes          [emitted]  
       main.js    121 KiB    main  [emitted]  main
       
       // 编译产出
       
        /***/ "./src/math.js":
        /*!*********************!*\
          !*** ./src/math.js ***!
          \*********************/
        /*! exports provided: add, minus */
        /***/ (function(module, __webpack_exports__, __webpack_require__) {
        
        "use strict";
        __webpack_require__.r(__webpack_exports__);
        /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "add", function() { return add; });
        /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "minus", function() { return minus; });
        var add = function add(a, b) {
          console.log(a + b);
        };
        var minus = function minus(a, b) {
          console.log(a - b);
        };

    从编译产出可以看出来,add 和 minus方法都打包输出了,而在index.js中并没有引入minuns方法,所以,在用tree shaking之后,在来看编译产出

    /***/ "./src/math.js":
    /*!*********************!*\
      !*** ./src/math.js ***!
      \*********************/
    /*! exports provided: add, minus */
    /*! exports used: add */
    /***/ (function(module, __webpack_exports__, __webpack_require__) {
    
    "use strict";
    /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return add; });
    /* unused harmony export minus */
    var add = function add(a, b) {
      console.log(a + b);
    };
    var minus = function minus(a, b) {
      console.log(a - b);
    };

    虽然minus还在,但是并没有输出,在index.js中只引入了add方法;如果要想把minus也剔除掉,我们需要这样做

    • 将文件标记为 side-effect-free
    // package.josn
        "name": "webpack",
        "sideEffects": false,
    • 压缩,在webpack中,把mode改为productin可以自动压缩
    !function(e) {
        var n = {};
        function t(r) {
            if (n[r])
                return n[r].exports;
            var o = n[r] = {
                i: r,
                l: !1,
                exports: {}
            };
            return e[r].call(o.exports, o, o.exports, t),
            o.l = !0,
            o.exports
        }
        t.m = e,
        t.c = n,
        t.d = function(e, n, r) {
            t.o(e, n) || Object.defineProperty(e, n, {
                enumerable: !0,
                get: r
            })
        }
        ,
        t.r = function(e) {
            "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
                value: "Module"
            }),
            Object.defineProperty(e, "__esModule", {
                value: !0
            })
        }
        ,
        t.t = function(e, n) {
            if (1 & n && (e = t(e)),
            8 & n)
                return e;
            if (4 & n && "object" == typeof e && e && e.__esModule)
                return e;
            var r = Object.create(null);
            if (t.r(r),
            Object.defineProperty(r, "default", {
                enumerable: !0,
                value: e
            }),
            2 & n && "string" != typeof e)
                for (var o in e)
                    t.d(r, o, function(n) {
                        return e[n]
                    }
                    .bind(null, o));
            return r
        }
        ,
        t.n = function(e) {
            var n = e && e.__esModule ? function() {
                return e.default
            }
            : function() {
                return e
            }
            ;
            return t.d(n, "a", n),
            n
        }
        ,
        t.o = function(e, n) {
            return Object.prototype.hasOwnProperty.call(e, n)
        }
        ,
        t.p = "",
        t(t.s = 0)
    }([function(e, n, t) {
        "use strict";
        t.r(n);
        var r, o = function(e, n) {
            console.log(e + n)
        };
        document.body.appendChild(((r = document.createElement("div")).innerHTML = ["Hello webpack!", "5 cubed is equal to " + o(5, 6)].join("\n\n"),
        r))
    }
    ]);
    //# sourceMappingURL=main.fb027233efe1c3878b2b.js.map
    

    上段代码是我在浏览器中通过sources格式化出来的,可以清楚的看到minus方法被剔除了

    webpack中的tree shaking的配置

    optimization: {
        //识别package.json中的sideEffects以剔除无用的模块,用来做Tree Shaking
        usedExports: true,
    }

    附:webpack 官方文档tree shaking

    转载于:https://www.cnblogs.com/narutoNinja/p/11400241.html

    展开全文
  • tree shaking

    2020-12-01 20:35:19
    <div><p>Is it possible to enable <a href="https://webpack.js.org/guides/tree-shaking/">tree shaking</a> in this project? Alternatively could the core be imported separately from the rest of the ...
  • webpack tree shaking 总结

    2019-01-02 21:33:39
    什么是tree shaking tree shaking 是一个术语,用于描述移除JavaScript 上下文中的未引用代码 为什么可以实现 它依赖ES2015 模块系统中的静态结构特性,例如import 和export 在webpack 中如何用 版本要求:we...
        

    原文链接 https://www.webpackjs.com/gui...

    什么是tree shaking

    tree shaking 是一个术语,用于描述移除JavaScript 上下文中的未引用代码

    为什么可以实现

    它依赖ES2015 模块系统中的静态结构特性,例如import 和export

    在webpack 中如何用

    版本要求:webpack 4。 在package.json 中添加 sideEffects.

    副作用的定义是,在导入时会执行特殊行为的代码,而不是仅仅暴露一个export 或多个export。例如 polyfill, 它影响全局作用域,并且通常不提供export。
    • 如果所有代码都不包含副作用,将其设置为false. webpack 就可以安全地删除未用到的export 导出
    • 如果你的代码确实有一些副作用,你可以为sideEffects 提供一个数组。

    ps: 任何导入的文件都会受到tree shaking 的影响。这意味着,如果在项目中使用类似css-loader 并导入css文件,需要将其添加到side effect 列表中,以免在生成模式中无意将它删除。

    压缩输出

    设置webpack mode: production 就可以在bundle 中删除那些未被引用的代码


    2019年第一篇

    展开全文
  • Tree shaking

    2021-01-07 11:30:50
    <div><p>Hi, does this work with Webpack 2's tree shaking feature?</p><p>该提问来源于开源项目:TypeStrong/ts-loader</p></div>
  • Tree Shaking

    2020-12-26 06:34:36
    <div><p>It is my impression that Webpack2 automatically can do tree shaking. <p>It just requires the Typescript compiler to output ES2015 modules instead of CommonJS (if you're using Typescript 2)...
  • Webpack 中的 Tree Shaking

    2019-05-29 11:12:00
    Tree Shaking Tree shaking 用于描述移除JavaScript上下文中的未引用代码(dead-code)。 为了更方便地理解tree shaking,我们可以将应用程序想象成一棵树。 绿色表示实际用到的 source code(源码) 和 library(库),是...
  • webpack tree shaking postcss

    2019-09-23 09:20:22
    对于package.json 中 设置script标签中 "dev": "webpack --mode development", "prod": "webpack --mode production" ...tree-shaking技术,能够在模块的层面上做到打包后的代码只包含被引用并...
  • Webpack之Tree Shaking与Scope Hoisting一、Tree Shaking二、webpack中使用Tree-shanking三、Scope Hoisting 一、Tree Shaking Tree-shaking翻译过来就是摇树,作用就是用来【摇掉】代码中为引用的部分==未引用代码...
  • Document tree shaking

    2020-11-29 16:53:51
    <div><p>So after doing some research and chatting on twitter with I think it might be beneficial to include a guide on tree shaking. <p>This guide should discuss the following: - how to use tree ...
  • Tree shaking学习

    2020-09-02 10:59:53
    一、Tree shaking是什么 Tree shaking 是一个通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code) 行为的术语。 它依赖于ES2015中的 import 和 export 语句,用来检测代码模块是否被导出、导入,且被 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,773
精华内容 709
关键字:

shakingtree