tree shaking简单分析

jasperyang 发布于2019-08-20 17:53 / 1990人阅读

摘要：是的模块特性，奠定了的实现基础。首先会分析文件项目里具体哪些代码被引入了，哪些没有引入，然后将真正引入的代码打包进去，最后没有使用到的代码自然就不会存在了。

文章梗概

什么是tree shaking

为什么需要tree shaking

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的特性，大概有如下几点：

必须写在最外层，不能写在函数里

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

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

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

GPU云服务器云服务器 tree-shaking 简单分析 shaking 简单数据分析

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83947.html

webpack4 系列教程(九): CSS Tree Shaking

摘要：按照我们的仿真的环境，最终之后的效果应该是打包后的文件不含有样式类。如果忘记了它的用法，请查看系列教程六处理系列教程五处理所以，我们的文件如下安装完相关插件后，我们需要在的配置中引用第三部分定义的代码。教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步原文地址有空就来看看个人技术小站, 我一直都在 0. 课程介绍和资料本次课程的代码目录(如下图所示)：s...

赵连江 2019-08-29 16:36 评论0 收藏0
webpack4 系列教程(九): CSS Tree Shaking

摘要：按照我们的仿真的环境，最终之后的效果应该是打包后的文件不含有样式类。如果忘记了它的用法，请查看系列教程六处理系列教程五处理所以，我们的文件如下安装完相关插件后，我们需要在的配置中引用第三部分定义的代码。教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步原文地址有空就来看看个人技术小站, 我一直都在 0. 课程介绍和资料本次课程的代码目录(如下图所示)：s...

superw 2019-08-23 11:40 评论0 收藏0
你的Tree-Shaking并没什么卵用

摘要：升级之后，项目的压缩包并没有什么明显变化。这里可以参考下阮老师介绍的基本语法的循环是通过遍历器迭代的，循环数组时并非是，然后通过下标寻值。楼主好奇为什么不能消除未引用的类。楼主我的代码没什么副作用啊。本文将探讨tree-shaking在当下(webpack@3, babel@6 以下)的现状，以及研究为什么tree-shaking依旧举步维艰的原因，最终总结当下能提高tree-sha...

cncoder 2019-08-21 18:47 评论0 收藏0
带着问题学习webpack

摘要：在学习过程中把自己看到的，学过的一些东西总结出来，供大家参考。在学习之前必须了解的几个概念。通过或是使再次打包文件名不变。在中是通过来来需要使用这段时间一直在学习webpack,感觉webpack的功能太强大了。在学习过程中把自己看到的，学过的一些东西总结出来，供大家参考。在学习webpack之前必须了解的几个概念。什么是webpack和grunt和gulp有什么不同 Webpac...

guyan0319 2019-08-26 12:12 评论0 收藏0
释放webpack的真正潜力

摘要：检查的时候发现中的确用到了，所以不会把去掉。在项目中，注意要把设置，避免将模块转为规范。引入的模块包，也必须是符合规范，并且在最新的中加了一条限制，即在中定义，这也是为了避免出现导致模块内部的一些函数执行后影响全局环境，却被去除掉的情况。在上周末广州举办的feday中，webpack的核心开发者Sean在介绍webpack插件系统原理时，隆重介绍了一个中国学生于Google夏令营，在...

xioqua 2019-08-23 11:51 评论0 收藏0