成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

釋放webpack的真正潛力

xioqua / 566人閱讀

摘要：檢查的時(shí)候發(fā)現(xiàn)中的確用到了，所以不會(huì)把去掉。在項(xiàng)目中，注意要把設(shè)置，避免將模塊轉(zhuǎn)為規(guī)范。引入的模塊包，也必須是符合規(guī)范，并且在最新的中加了一條限制，即在中定義，這也是為了避免出現(xiàn)導(dǎo)致模塊內(nèi)部的一些函數(shù)執(zhí)行后影響全局環(huán)境，卻被去除掉的情況。

在上周末廣州舉辦的feday中，webpack的核心開(kāi)發(fā)者Sean在介紹webpack插件系統(tǒng)原理時(shí)，隆重介紹了一個(gè)中國(guó)學(xué)生于Google夏令營(yíng)，在導(dǎo)師Tobias帶領(lǐng)下寫(xiě)的一個(gè)webpack插件，webpack-deep-scope-analysis-plugin，這個(gè)插件能夠大大提高webpack tree-shaking的效率。

tree-shaking目前的缺陷

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

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

這個(gè)例子中，webpack會(huì)尋找引入變量的引用，當(dāng)發(fā)現(xiàn)沒(méi)有對(duì)isNumber的引用時(shí)，就會(huì)去除isNumber的代碼。這其實(shí)不太實(shí)用，畢竟在現(xiàn)在的vscode中，沒(méi)有引用的變量在ide中都會(huì)灰顯提示，一般不會(huì)犯這種import某個(gè)模塊卻不用的錯(cuò)誤了。

如果是接下來(lái)這種引入方式呢，我寫(xiě)了一個(gè)demo如下

這個(gè)例子非常簡(jiǎn)單，如果用圖來(lái)表示是這樣

在index.js中引入了func.js中的func2，并沒(méi)有引入func1，但是func1引入了lodash。webpack檢查的時(shí)候發(fā)現(xiàn)func.js中的確用到了lodash，所以不會(huì)把lodash去掉。實(shí)際上，我們根本沒(méi)用到它。

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

插件效果

引入前

引入后

85.8kb -> 不到1kb?

當(dāng)然，我這里是標(biāo)題黨了，因?yàn)檫@里直接把一個(gè)lodash庫(kù)給去掉了，所以變化才這么驚人。但是即使在實(shí)際項(xiàng)目中，我們也能輕易用一個(gè)插件減少大量的不必要的引入。

原理

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

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

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

最佳實(shí)踐

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

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

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

未來(lái)

當(dāng)時(shí)跟這位插件作者溝通，他說(shuō)將來(lái)有可能Tobias會(huì)把這個(gè)插件內(nèi)置到webpack中，這也是符合webpack4零配置的趨勢(shì)。但是我們也看得到，要將前端工程的dead code elimination做到和其他靜態(tài)語(yǔ)言一樣好，靠這些工具是遠(yuǎn)遠(yuǎn)不夠的，模塊自身也必須配合做到符合規(guī)范。

參考鏈接：

github項(xiàng)目地址：https://github.com/vincentdch...
Medium博客地址：https://medium.com/webpack/be...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97585.html

相關(guān)文章

  • 邊緣計(jì)算是釋放5G真正潛力的關(guān)鍵

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

    alexnevsky 評(píng)論0 收藏0

  • 優(yōu)刻得張靜如：如何打通數(shù)據(jù)孤島？且看“安全屋”的數(shù)據(jù)流通新模式

    摘要：優(yōu)刻得數(shù)據(jù)安全流通平臺(tái)安全屋的出現(xiàn)，可以說(shuō)恰逢其時(shí)。未來(lái)，我們期待優(yōu)刻得的安全屋產(chǎn)品繼續(xù)在數(shù)據(jù)流通中發(fā)揮安全堡壘作用，服務(wù)更多的政企客戶(hù)。UCloud優(yōu)刻得政府事業(yè)部解決方案架構(gòu)師張靜如接受信息化和軟件服務(wù)網(wǎng)采訪(fǎng)時(shí)表示：政府?dāng)?shù)字化轉(zhuǎn)型需要加強(qiáng)對(duì)數(shù)據(jù)的整合、治理。她指出，數(shù)字化轉(zhuǎn)型已成為各方共識(shí)，政府?dāng)?shù)字化轉(zhuǎn)型不僅要加強(qiáng)數(shù)字化治理能力，更要充分發(fā)揮數(shù)據(jù)價(jià)值。伴隨數(shù)字政府建設(shè)邁入深水區(qū)，數(shù)據(jù)作為...

    Tecode 評(píng)論0 收藏0

  • [譯]如何寫(xiě)一個(gè)webpack插件

    摘要：原文譯者插件能夠?qū)⒁娴娜繚摿Ρ┞督o第三方的開(kāi)發(fā)者。當(dāng)將一個(gè)插件應(yīng)用到環(huán)境中，這個(gè)插件將會(huì)獲得一個(gè)對(duì)于這個(gè)的引用。表示有關(guān)模塊資源，已編譯資源，已更改文件和監(jiān)視依賴(lài)關(guān)系的當(dāng)前狀態(tài)的信息。 原文：how to write a plugin 譯者：neal1991 welcome to star my articles-translator , providing you advanc...

    wupengyu 評(píng)論0 收藏0

  • 李彥宏：未來(lái)百度會(huì)將云計(jì)算技術(shù)充分地開(kāi)放出來(lái)

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

    Snailclimb 評(píng)論0 收藏0

  • PaaS市場(chǎng)發(fā)展潛力可期 看各路玩家如何各顯神通

    摘要：未來(lái)市場(chǎng)發(fā)展?jié)摿善谌绻f(shuō)，云計(jì)算的市場(chǎng)已被巨頭和先進(jìn)入者奪得優(yōu)勢(shì)，那么則還是一片藍(lán)海。通過(guò)技術(shù)不斷創(chuàng)新積累，深入到企業(yè)應(yīng)用領(lǐng)域，贏(yíng)得市場(chǎng)，為應(yīng)用交付資源管理運(yùn)維效率業(yè)務(wù)支撐提供了基于新一代架構(gòu)的重要支撐體系。2017年年初，數(shù)人云也對(duì)外宣布已完成5000萬(wàn)人民幣A＋輪融資，此次融資由灃源資本領(lǐng)投，云啟資本、唯獵資本以及UCloud等A輪投資方繼續(xù)跟投。靈雀云于2017年11月宣布完成B輪，...

    paraller 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<