亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

減小發(fā)布到npm包的體積與避免重復(fù)依賴

xiaotianyi / 4375人閱讀

摘要：我們可以把未經(jīng)過(guò)打包的源代碼發(fā)布到，并把中的字段指向源代碼，這樣引入的就交由項(xiàng)目的構(gòu)建工具來(lái)進(jìn)行處理，因此理論上就可以避免重復(fù)依賴了?？偨Y(jié)通過(guò)這兩天的折騰，主要收獲有點(diǎn)發(fā)布包的流程中的字段判斷重復(fù)依賴的機(jī)制基于組件封裝組件時(shí)如何避免重復(fù)依賴

這兩天一直在忙于封裝一個(gè)vue table組件并發(fā)布到npm，記錄一下我是如何把npm包的大小從100多kb減小到不足1kb的過(guò)程。

背景

這個(gè)組件底層依賴于element-ui，使用了其table組件和pagination組件，最終的組件是一個(gè)完全通過(guò)配置來(lái)描述每一列的表格組件。最開(kāi)始我發(fā)布的是打包之后的代碼。如果使用的這個(gè)組件的項(xiàng)目中沒(méi)有引入過(guò)element-ui組件，那么不會(huì)造成任何重復(fù)的依賴，直接引用打包后的版本。但是如果項(xiàng)目本身已經(jīng)引入了完整的element-ui(我們公司使用這個(gè)組件的10余個(gè)系統(tǒng)均引入了完整的element-ui)，那么很明顯會(huì)造成代碼的重復(fù)，會(huì)使bundle增加90kb(未壓縮時(shí))。

我們需要發(fā)布經(jīng)過(guò)打包之后的代碼嗎

如果發(fā)布的經(jīng)過(guò)打包后的組件，是沒(méi)辦法避免重復(fù)依賴的。如果可以像把源代碼直接copy到項(xiàng)目再import引入這樣，就可以避免重復(fù)的依賴了。這個(gè)可以使用package.json中的module字段來(lái)完成。

當(dāng)package.json中存在module字段時(shí)，會(huì)優(yōu)先尋找module對(duì)應(yīng)的文件，并使用ES模塊規(guī)范處理。

我們可以把未經(jīng)過(guò)打包的源代碼發(fā)布到npm，并把package.json中的module字段指向源代碼，這樣引入的package就交由項(xiàng)目的構(gòu)建工具（webpack, babel）來(lái)進(jìn)行處理，因此理論上就可以避免重復(fù)依賴了。

使用module字段是否會(huì)有副作用

有可能，因?yàn)閣ebpack插件可以配置exclude字段，如果項(xiàng)目的webpack配置exclude掉了node_modules，就會(huì)產(chǎn)生副作用。比如可能未經(jīng)babel轉(zhuǎn)碼成es5代碼（我發(fā)布的這個(gè)組件目前只會(huì)存在這樣一種可能的副作用）。

如何解決副作用

babel轉(zhuǎn)碼后再發(fā)布

在readme中指出，讓用戶取消掉babel的exclude

判斷重復(fù)依賴的機(jī)制

到目前為止，還并不能解決重復(fù)依賴的問(wèn)題。。。這是因?yàn)橹貜?fù)依賴的判斷機(jī)制.Node.js中相同模塊是否會(huì)被加載多次？

nodeJs是根據(jù)模塊的路徑來(lái)判斷是否為同一依賴的，而大家都知道node.js會(huì)從當(dāng)前模塊所在目錄的node_module開(kāi)始找起，如果沒(méi)找到再會(huì)去找上級(jí)目錄的node_modules，直到根目錄為止。那么問(wèn)題就來(lái)了。

我發(fā)布的包里面dependencies里包含element-ui，這沒(méi)問(wèn)題，我確實(shí)依賴了element-ui。那么install包時(shí)，會(huì)根據(jù)我寫(xiě)明的dependencies下載element-ui并放在包的node_modules里面。所以這個(gè)包引用的element-ui和項(xiàng)目本身引用的element-ui由于path不同被認(rèn)為是不同的依賴，于是都被打包進(jìn)了bundle里面造成了重復(fù)依賴。

如何解決

方法1，在項(xiàng)目的babel配置中添加按需引入element-ui的配置，但是這個(gè)方法需要修改項(xiàng)目的配置，比較繁瑣，我維護(hù)的10來(lái)個(gè)系統(tǒng)需要一個(gè)一個(gè)去改，太麻煩了。。。。

方法2，很簡(jiǎn)單，把發(fā)布的包的package.json的dependencies的element-ui和Vue刪掉，這樣npm install的時(shí)候就不會(huì)下載element-ui到包的node_modules,就是往上級(jí)目錄找，直到項(xiàng)目node_modules里面的element-ui，這樣，包引用的element-ui和項(xiàng)目引用的element-ui就是同一個(gè)依賴，就不會(huì)重復(fù)打包這和vue-cli3打包的庫(kù)不會(huì)包含Vue依賴是同一個(gè)原理。最終的結(jié)果就是最終生產(chǎn)環(huán)境打包后的chunk-vender.js僅僅增加了不到1kb。

不過(guò)這樣也造成了一定的問(wèn)題，那就是本身不使用element-ui的項(xiàng)目需要手動(dòng)引入打包之后的發(fā)布的文件。不過(guò)不使用element-ui組件的項(xiàng)目使用這個(gè)表格組件的收益和概率都不高，如果真的要用的話，多帶帶再發(fā)布一個(gè)完全打包之后的包，也能快速解決問(wèn)題。

總結(jié)

通過(guò)這兩天的折騰，主要收獲有4點(diǎn)
1、發(fā)布npm包的流程
2、package.json中的module字段
3、判斷重復(fù)依賴的機(jī)制
4、基于ui組件封裝組件時(shí)如何避免重復(fù)依賴

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

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

相關(guān)文章

  • webpack打包分析與性能優(yōu)化

    摘要：打包分析與性能優(yōu)化背景在去年年末參與的一個(gè)項(xiàng)目中，項(xiàng)目技術(shù)棧使用，生產(chǎn)環(huán)境全量構(gòu)建將近三分鐘，項(xiàng)目業(yè)務(wù)模塊多達(dá)數(shù)百個(gè)，項(xiàng)目依賴數(shù)千個(gè)，并且該項(xiàng)目協(xié)同前后端開(kāi)發(fā)人員較多，提高構(gòu)建效率，成為了改善團(tuán)隊(duì)開(kāi)發(fā)效率的關(guān)鍵之一。 webpack打包分析與性能優(yōu)化 背景 在去年年末參與的一個(gè)項(xiàng)目中，項(xiàng)目技術(shù)棧使用react+es6+ant-design+webpack+babel，生產(chǎn)環(huán)境全量構(gòu)建將...

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

  • 前端性能優(yōu)化與上線

    摘要：看下?tīng)顟B(tài)可以看到我已經(jīng)有一些鏡像了我已經(jīng)刪除了拉鏡像正常即可，中間那段是中國(guó)鏡像源，我們成功下來(lái)了的鏡像。攻破像我這樣屌絲的服務(wù)器一般都買(mǎi)的，大的資源文件不住，一個(gè)動(dòng)輒的文件這很蛋疼，不上很難受。 4000字長(zhǎng)文，多圖預(yù)警！?。×髁可魅耄?！ 性能優(yōu)化 - 屌絲前端性能優(yōu)化、上線一條龍 大家好我又來(lái)了，本章給大家?guī)?lái)的內(nèi)容是：上線和上線后的性能優(yōu)化 項(xiàng)目地址 實(shí)戰(zhàn)預(yù)覽地址 實(shí)戰(zhàn)項(xiàng)目地址...

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

  • 使用 NodeJS 構(gòu)建現(xiàn)代化的命令行工具

    摘要：前言這是一篇關(guān)于如何使用構(gòu)建高性能高可讀性的現(xiàn)代化命令行工具的博客。對(duì)于命令行工具來(lái)說(shuō)，運(yùn)行時(shí)的權(quán)限是巨大的，但不要因此弄臟用戶的系統(tǒng)。 前言 這是一篇關(guān)于如何使用 NodeJS 構(gòu)建高性能、高可讀性的現(xiàn)代化命令行工具的博客。 每當(dāng)我們想要?jiǎng)?chuàng)建一個(gè)基于 NodeJS 的命令行工具時(shí)，就會(huì)衍生出一堆問(wèn)題需要解決，比如如何準(zhǔn)備開(kāi)發(fā)環(huán)境，如何打包轉(zhuǎn)譯代碼，如何使代碼在轉(zhuǎn)譯后保持可調(diào)用的狀態(tài)同...

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

  • nodejs包依賴管理

    摘要：鮮花總需要綠葉襯托的，對(duì)比的包依賴管理，頓時(shí)覺(jué)得包依賴機(jī)制真是漂亮。此文不吐槽的包管理是如何難用和混亂，也不去抨擊包管理的孱弱，僅僅討論如何優(yōu)雅地使用進(jìn)行包依賴管理。 鮮花總需要綠葉襯托的，對(duì)比php, java, python的包依賴管理，頓時(shí)覺(jué)得nodejs包依賴機(jī)制真是漂亮。此文不吐槽python的包管理是如何難用和混亂，也不去抨擊php包管理的孱弱，僅僅討論如何優(yōu)雅地使用npm...

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

  • webpack V3.X 入門(mén)指南(完)

    摘要：通俗的說(shuō)，預(yù)處理器用一種專(zhuān)門(mén)的編程語(yǔ)言，進(jìn)行頁(yè)面樣式設(shè)計(jì)，然后再編譯成正常的文件，以供項(xiàng)目使用。在開(kāi)發(fā)過(guò)程中，使用擴(kuò)展名為的文件來(lái)編寫(xiě)樣式 webpack 前言 這篇文章是我在學(xué)習(xí)過(guò)程中對(duì)自己的一個(gè)記錄和總結(jié)，也希望可以幫助到和我當(dāng)初同樣對(duì)webpack有困惑的小伙伴 我在自學(xué)webpack時(shí)也參考了很多大神的文章，參考的帖子太多就不一一謝過(guò)了，再次感謝各位大神的幫助 文章中的每個(gè)例...

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

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

0條評(píng)論

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