釋放webpack的真正潛力

xioqua 發布于2019-08-23 11:51 / 559人閱讀

摘要：檢查的時候發現中的確用到了，所以不會把去掉。在項目中，注意要把設置，避免將模塊轉為規范。引入的模塊包，也必須是符合規范，并且在最新的中加了一條限制，即在中定義，這也是為了避免出現導致模塊內部的一些函數執行后影響全局環境，卻被去除掉的情況。

在上周末廣州舉辦的feday中，webpack的核心開發者Sean在介紹webpack插件系統原理時，隆重介紹了一個中國學生于Google夏令營，在導師Tobias帶領下寫的一個webpack插件，webpack-deep-scope-analysis-plugin，這個插件能夠大大提高webpack tree-shaking的效率。

tree-shaking目前的缺陷

tree-shaking 作為 rollup 的一個殺手級特性，能夠利用ES6的靜態引入規范，減少包的體積，避免不必要的代碼引入，webpack2也很快引入了這個特性，但是目前，webpack只能做比較簡單的解決方案，比如：

import { isNumber, isNull } from "lodash-es"
export function fun1() {
  // do something
}
export function isNull(...args) {
  return isNull(...args)
}

這個例子中，webpack會尋找引入變量的引用，當發現沒有對isNumber的引用時，就會去除isNumber的代碼。這其實不太實用，畢竟在現在的vscode中，沒有引用的變量在ide中都會灰顯提示，一般不會犯這種import某個模塊卻不用的錯誤了。

如果是接下來這種引入方式呢，我寫了一個demo如下

這個例子非常簡單，如果用圖來表示是這樣

在index.js中引入了func.js中的func2，并沒有引入func1，但是func1引入了lodash。webpack檢查的時候發現func.js中的確用到了lodash，所以不會把lodash去掉。實際上，我們根本沒用到它。

webpack-deep-scope-analysis-plugin就可以解決這種判斷。

插件效果

引入前

引入后

85.8kb -> 不到1kb?

當然，我這里是標題黨了，因為這里直接把一個lodash庫給去掉了，所以變化才這么驚人。但是即使在實際項目中，我們也能輕易用一個插件減少大量的不必要的引入。

原理

原理方面，可以參考作者的Medium文章，解釋得非常清楚，這里不做贅述。

webpack的原理，其實就是遍歷所有的模塊，把它們打包成一個文件，在這個過程中，它就知道哪些export的模塊有被使用到。那我們同樣也可以遍歷所有的scope（作用域），簡化沒有用到的scope，最后只留下我們需要的。
我們提到的這個webpack插件，正是內置了這樣一個scope分析器，它能夠從入口文件中分析出scope的引用關系，最后排除掉所有沒有用到的模塊。

當然，這個插件也并不是自己做了所有的事情，它也是依賴于了前人的工作。 escope 是一個分析ES中scope的工具，插件作者將它改成了ts版本集成到了插件中，并且利用了webpack暴露的接口，可以解析出來的模塊的AST樹，基于這個AST就可以交給escope分析出scope的引用關系。

最佳實踐

一些使用此插件的特殊情況也可以參考作者的原Medium文章。

首先，要用到tree-shaking，必然要保證引用的模塊都是ES6規范的。這也是為什么我在前面的demo中，引入的是lodash-es而不是lodash。

在項目中，注意要把babel設置module: false，避免babel將模塊轉為CommonJS規范。引入的模塊包，也必須是符合ES6規范，并且在最新的webpack中加了一條限制，即在package.json中定義sideEffect: false，這也是為了避免出現import xxx導致模塊內部的一些函數執行后影響全局環境，卻被去除掉的情況。

未來

當時跟這位插件作者溝通，他說將來有可能Tobias會把這個插件內置到webpack中，這也是符合webpack4零配置的趨勢。但是我們也看得到，要將前端工程的dead code elimination做到和其他靜態語言一樣好，靠這些工具是遠遠不夠的，模塊自身也必須配合做到符合規范。

參考鏈接：

github項目地址：https://github.com/vincentdch...
Medium博客地址：https://medium.com/webpack/be...

GPU云服務器云服務器實現區塊鏈的潛力 webpack的作用 webpack的cdn 真正的公有云

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97585.html

邊緣計算是釋放5G真正潛力的關鍵

摘要：接近邊緣也許縮小這一差距并抓住真正潛力的最大機會將來自邊緣計算。結合邊緣，這些連接優勢是巨大的并且可以推動重大的數字化轉型計劃。多年來，5G的宣傳一直是一個越來越響亮的鼓點，在各個行業，它所能帶來的價值是顯而易見的。零售商和雜貨店正在利用倉庫內的聯網機器人來搬運和堆放物資。能源行業有現場車輛，提取引擎由控制中心管理，攝像頭通過5G向操作員提供清晰的視頻。在醫療保健領域，5G提供患者數據...

alexnevsky 2021-11-15 11:36 評論0 收藏0
優刻得張靜如：如何打通數據孤島？且看“安全屋”的數據流通新模式

摘要：優刻得數據安全流通平臺安全屋的出現，可以說恰逢其時。未來，我們期待優刻得的安全屋產品繼續在數據流通中發揮安全堡壘作用，服務更多的政企客戶。UCloud優刻得政府事業部解決方案架構師張靜如接受信息化和軟件服務網采訪時表示：政府數字化轉型需要加強對數據的整合、治理。她指出，數字化轉型已成為各方共識，政府數字化轉型不僅要加強數字化治理能力，更要充分發揮數據價值。伴隨數字政府建設邁入深水區，數據作為...

Tecode 2022-06-28 18:59 評論0 收藏0
[譯]如何寫一個webpack插件

摘要：原文譯者插件能夠將引擎的全部潛力暴露給第三方的開發者。當將一個插件應用到環境中，這個插件將會獲得一個對于這個的引用。表示有關模塊資源，已編譯資源，已更改文件和監視依賴關系的當前狀態的信息。原文：how to write a plugin 譯者：neal1991 welcome to star my articles-translator , providing you advanc...

wupengyu 2019-08-20 16:32 評論0 收藏0
李彥宏：未來百度會將云計算技術充分地開放出來

摘要：在本次發布會上，李彥宏表示百度云是云計算大數據人工智能的三位一體，并闡述了他對于未來云計算發展的深入思考。作為發布會的第一位演講嘉賓，李彥宏講述了百度云的發展戰略。百度云計算戰略發布會　　百度云計算戰略發布會在北京舉行，百度董事長兼CEO李彥宏、中國工程院院士倪光南、百度首席科學家吳恩達、百度云計算事業部總經理劉煬，以及來自英特爾、諾禾致源、民生銀行、全民TV、太原鐵路局的眾多合作伙伴和主流...

Snailclimb 2019-04-28 19:28 評論0 收藏0
PaaS市場發展潛力可期看各路玩家如何各顯神通

摘要：未來市場發展潛力可期如果說，云計算的市場已被巨頭和先進入者奪得優勢，那么則還是一片藍海。通過技術不斷創新積累，深入到企業應用領域，贏得市場，為應用交付資源管理運維效率業務支撐提供了基于新一代架構的重要支撐體系。2017年年初，數人云也對外宣布已完成5000萬人民幣A＋輪融資，此次融資由灃源資本領投，云啟資本、唯獵資本以及UCloud等A輪投資方繼續跟投。靈雀云于2017年11月宣布完成B輪，...

paraller 2019-04-30 11:33 評論0 收藏0