前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Tree-Shaking的工作原理

Tree-Shaking的工作原理

原创
作者头像
伯爵
修改2020-05-07 10:05:28
4.1K0
修改2020-05-07 10:05:28
举报
文章被收录于专栏:前端小菜鸟

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

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

代码语言:txt
复制
let module;



if(condition) {

    module =  require("HellowModule") ;

} else {

    module = requitre('BeyModule');  

}

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

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

代码语言:txt
复制
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. 静态分析程序流,判断那些模块和变量未被使用或者引用,进而删除对应代码

参考

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

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Tree-shaking的实现原理
    • 利用ES6模块特性:
      • 代码删除:
      • 参考
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档