資訊專欄INFORMATION COLUMN
摘要：檢查的時候發(fā)現(xiàn)中的確用到了，所以不會把去掉。在項目中，注意要把設置，避免將模塊轉為規(guī)范。引入的模塊包，也必須是符合規(guī)范，并且在最新的中加了一條限制，即在中定義，這也是為了避免出現(xiàn)導致模塊內部的一些函數(shù)執(zhí)行后影響全局環(huán)境，卻被去除掉的情況。
在上周末廣州舉辦的feday中，webpack的核心開發(fā)者Sean在介紹webpack插件系統(tǒng)原理時，隆重介紹了一個中國學生于Google夏令營，在導師Tobias帶領下寫的一個webpack插件，webpack-deep-scope-analysis-plugin，這個插件能夠大大提高webpack tree-shaking的效率。
tree-shaking目前的缺陷tree-shaking 作為 rollup 的一個殺手級特性，能夠利用ES6的靜態(tài)引入規(guī)范，減少包的體積，避免不必要的代碼引入，webpack2也很快引入了這個特性，但是目前，webpack只能做比較簡單的解決方案，比如：
import { isNumber, isNull } from "lodash-es"
export function fun1() {
// do something
}
export function isNull(...args) {
return isNull(...args)
}
這個例子中，webpack會尋找引入變量的引用，當發(fā)現(xiàn)沒有對isNumber的引用時，就會去除isNumber的代碼。這其實不太實用，畢竟在現(xiàn)在的vscode中，沒有引用的變量在ide中都會灰顯提示，一般不會犯這種import某個模塊卻不用的錯誤了。
如果是接下來這種引入方式呢，我寫了一個demo如下
這個例子非常簡單，如果用圖來表示是這樣
在index.js中引入了func.js中的func2，并沒有引入func1，但是func1引入了lodash。webpack檢查的時候發(fā)現(xiàn)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規(guī)范的。這也是為什么我在前面的demo中，引入的是lodash-es而不是lodash。
在項目中，注意要把babel設置module: false，避免babel將模塊轉為CommonJS規(guī)范。引入的模塊包，也必須是符合ES6規(guī)范，并且在最新的webpack中加了一條限制，即在package.json中定義sideEffect: false，這也是為了避免出現(xiàn)import xxx導致模塊內部的一些函數(shù)執(zhí)行后影響全局環(huán)境，卻被去除掉的情況。
未來當時跟這位插件作者溝通，他說將來有可能Tobias會把這個插件內置到webpack中，這也是符合webpack4零配置的趨勢。但是我們也看得到，要將前端工程的dead code elimination做到和其他靜態(tài)語言一樣好，靠這些工具是遠遠不夠的，模塊自身也必須配合做到符合規(guī)范。
參考鏈接：github項目地址：https://github.com/vincentdch...
Medium博客地址：https://medium.com/webpack/be...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://m.hztianpu.com/yun/97585.html
摘要：接近邊緣也許縮小這一差距并抓住真正潛力的最大機會將來自邊緣計算。結合邊緣，這些連接優(yōu)勢是巨大的并且可以推動重大的數(shù)字化轉型計劃。 多年來，5G的宣傳一直是一個越來越響亮的鼓點，在各個行業(yè)，它所能帶來的價值是顯而易見的。零售商和雜貨店正在利用倉庫內的聯(lián)網(wǎng)機器人來搬運和堆放物資。能源行業(yè)有現(xiàn)場車輛，提取引擎由控制中心管理，攝像頭通過5G向操作員提供清晰的視頻。在醫(yī)療保健領域，5G提供患者數(shù)據(jù)...
摘要：優(yōu)刻得數(shù)據(jù)安全流通平臺安全屋的出現(xiàn)，可以說恰逢其時。未來，我們期待優(yōu)刻得的安全屋產品繼續(xù)在數(shù)據(jù)流通中發(fā)揮安全堡壘作用，服務更多的政企客戶。UCloud優(yōu)刻得政府事業(yè)部解決方案架構師張靜如接受信息化和軟件服務網(wǎng)采訪時表示：政府數(shù)字化轉型需要加強對數(shù)據(jù)的整合、治理。她指出，數(shù)字化轉型已成為各方共識，政府數(shù)字化轉型不僅要加強數(shù)字化治理能力，更要充分發(fā)揮數(shù)據(jù)價值。伴隨數(shù)字政府建設邁入深水區(qū)，數(shù)據(jù)作為...
摘要：原文譯者插件能夠將引擎的全部潛力暴露給第三方的開發(fā)者。當將一個插件應用到環(huán)境中，這個插件將會獲得一個對于這個的引用。表示有關模塊資源，已編譯資源，已更改文件和監(jiān)視依賴關系的當前狀態(tài)的信息。 原文：how to write a plugin 譯者：neal1991 welcome to star my articles-translator , providing you advanc...
摘要：在本次發(fā)布會上，李彥宏表示百度云是云計算大數(shù)據(jù)人工智能的三位一體，并闡述了他對于未來云計算發(fā)展的深入思考。作為發(fā)布會的第一位演講嘉賓，李彥宏講述了百度云的發(fā)展戰(zhàn)略。百度云計算戰(zhàn)略發(fā)布會 百度云計算戰(zhàn)略發(fā)布會在北京舉行，百度董事長兼CEO李彥宏、中國工程院院士倪光南、百度首席科學家吳恩達、百度云計算事業(yè)部總經理劉煬，以及來自英特爾、諾禾致源、民生銀行、全民TV、太原鐵路局的眾多合作伙伴和主流...
摘要：未來市場發(fā)展?jié)摿善谌绻f，云計算的市場已被巨頭和先進入者奪得優(yōu)勢，那么則還是一片藍海。通過技術不斷創(chuàng)新積累，深入到企業(yè)應用領域，贏得市場，為應用交付資源管理運維效率業(yè)務支撐提供了基于新一代架構的重要支撐體系。2017年年初，數(shù)人云也對外宣布已完成5000萬人民幣A＋輪融資，此次融資由灃源資本領投，云啟資本、唯獵資本以及UCloud等A輪投資方繼續(xù)跟投。靈雀云于2017年11月宣布完成B輪，...
閱讀 3316·2021-11-17 09:33
閱讀 3361·2021-11-15 11:37
閱讀 3019·2021-10-19 11:47
閱讀 3258·2019-08-29 15:32
閱讀 1065·2019-08-29 15:27
閱讀 1585·2019-08-29 13:15
閱讀 991·2019-08-29 12:47
閱讀 2082·2019-08-29 11:30
