原来项目打包也有这么技巧浅谈TreeS

作者:前端小智

今天介绍了TreeShaking的相关基本观念,虽然说身为一位前端工程师不一定要懂这个概念,毕竟现在很多主流的框架都已经先把bundler的相关config都写好了,但了解这些工具背后在做的事情也能帮助到自己在开发时可以稍微省思一下要如何改良自己的代码,进而提升整体的打包后的性能。

前言

身为一位前端工程师或多或少都有听过Webpack这套前端打包工具吧,为了让最终打包的档案不会过于庞大,Webpack可是下了非常多的苦功,例如:利用CodeSplitting产出一个又一个的chunk让网页不会一次载入一份很大JS包。

然而今天的文章其实不是要讲CodeSplitting,而是要讲一个比较深入的原理:TreeShaking。

什么是TreeShaking?

什么是TreeShaking?TreeShaking就字面上翻译来看就是摇晃树木,在Webpack的世界中我们通常都会设定一个EntryPoints来告诉webpack要从哪个文件开始往其他文件进行打包,如果用Tree的概念来看就是一个主干配上很多的树枝。

DynamicLanguageStaticLanguage

接下来讲个跟TreeShaking比较无关的小知识,但这个小观念可以帮助我们了解为何要在JavaScript上执行TreeShaking并不是我们想像中的那麽容易。

接下来讲个跟TreeShaking比较无关的小知识,但这个小观念可以帮助我们了解为何要在JavaScript上执行TreeShaking并在程式语言中有分为动态语言(DynamicLanguage)以及静态语言(StaticLanguage),被归类在DynamicLanguage中比较常见的有JavaScript、PHP、Python等语不是我们想像中的那么容易。

在编程语言中有分为动态语言(DynamicLanguage)以及**静态语言(StaticLanguage)**,被归类在DynamicLanguage中比较常见的有JavaScript、PHP、Python等语言,至于被归类在StaticLanguage比较常见的有C++、Java等语言。

在DynamicLanguage中由于我们可以动态的载入非常多东西,例如function、object等,对于TreeShaking来说这种会动态载入的东西实在是太难捉摸了,这也让DynamicLanguage的TreeShaking很难达到最完美。

DeadCodeElimination

在开始讲TreeShaking原理之前必须要了解一个技术:死码删除(Dea诶CodeElimination)。




转载请注明:http://www.aierlanlan.com/tzrz/1746.html