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

資訊專欄INFORMATION COLUMN

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

xiaotianyi / 4320人閱讀

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

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

背景

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

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

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

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

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

使用module字段是否會有副作用

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

如何解決副作用

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

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

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

到目前為止，還并不能解決重復(fù)依賴的問題。。。這是因為重復(fù)依賴的判斷機制.Node.js中相同模塊是否會被加載多次？

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

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

如何解決

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

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

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

總結(jié)

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

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

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

相關(guān)文章

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

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

    joy968 評論0 收藏0

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

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

    wupengyu 評論0 收藏0

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

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

    QLQ 評論0 收藏0

  • nodejs包依賴管理

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

    chenatu 評論0 收藏0

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

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

    Object 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<