专栏首页前端小菜鸟Tree-Shaking的工作原理
原创

Tree-Shaking的工作原理

Tree-shaking (树摇)最早是由Rollup实现,是一种采用删除不需要的额外代码的方式优化代码体积的技术,webpack2借鉴了这个特性也增加了tree-shaking的功能。

tree-shaking 只能在静态modules下工作,在ES6之前我们使用CommonJS规范引入模块,具体采用require()的方式动态引入模块,这个特性可以通过判断条件解决按需记载的优化问题,具体如下

let module;



if(condition) {

    module =  require("HellowModule") ;

} else {

    module = requitre('BeyModule');  

}

但是CommonJS规范无法确定在实际运行前需要或者不需要某些模块,所以CommonJS不适合tree-shaking机制。

在JavaScript模块话方案中,只有ES6的模块方案:import()引入模块的方式采用静态导入,可以采用一次导入所以的依赖包再根据条件判断的方式,获取不需要的包,然后执行删除操作。

import hello from "Hellow";

import bey from "Bey";

import other from "Other"



if(condition) {

    // hello

} else {

    // bey

}

Tree-shaking的实现原理

利用ES6模块特性:

  • 只能作为模块顶层的语句出现
  • import的模块名只能是字符串常量
  • import binding 是 immutable的,引入的模块不能再进行修改

代码删除:

  • uglify:判断程序流,判断变量是否被使用和引用,进而删除代码

实现原理可以简单的概况:

  1. ES6 Module引入进行静态分析,故而编译的时候正确判断到底加载了那些模块
  2. 静态分析程序流,判断那些模块和变量未被使用或者引用,进而删除对应代码

参考

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript中call,apply,bind方法的使用及原理

    在JavaScript里,call(),apply(),bind()都是Function内置的三个方法, 它们的作用都是显示的绑定this的指向,三个方法的第一...

    伯爵
  • 前端开发涉及的Web安全

    前端开发涉及常见的Web安全漏洞有:浏览器Web安全,跨站脚本攻击(XSS),跨站请求伪装(CSRF),点击劫持,HTTP劫持,DNS劫持,文件上传漏洞等,以跨...

    伯爵
  • Jsonp原理和实例

    在浏览器的web端,img,script,style等标签是少数几个不受同源策略的影响。

    伯爵
  • 深入理解JS异步编程五(脚本异步加载)

    版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

    空空云
  • JavaScript 是如何工作的:模块的构建以及对应的打包工具

    如果你是 JavaScript 的新手,一些像 “module bundlers vs module loaders”、“Webpack vs Browseri...

    前端小智@大迁世界
  • python3第六天(数据结构)

        列表可以当作栈来使用(先进后出),利用append()和pop()方法。

    py3study
  • Python从菜鸟到高手(4):导入Py

      如果在Python程序中大量使用模块中的某些函数,那么每次在调用函数时都要加上“模块名”显得有些麻烦,所以在这种情况下,可以使用from…import…语句...

    py3study
  • css3的transform造成z-index无效, 附我的牛逼解法

    我想锁表头及锁定列。昨天新找的方法是用css3的transform,这个应该在IE9以上都可以的。

    申君健

扫码关注云+社区

领取腾讯云代金券