tree shaking簡單分析

jasperyang 發布于2019-08-20 17:53 / 1986人閱讀

摘要：是的模塊特性，奠定了的實現基礎。首先會分析文件項目里具體哪些代碼被引入了，哪些沒有引入，然后將真正引入的代碼打包進去，最后沒有使用到的代碼自然就不會存在了。

文章梗概

什么是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 簡單數據分析

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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