国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

減小發布到npm包的體積與避免重復依賴

xiaotianyi / 4289人閱讀

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

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

背景

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

我們需要發布經過打包之后的代碼嗎

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

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

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

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

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

如何解決副作用

babel轉碼后再發布

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

判斷重復依賴的機制

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

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

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

如何解決

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

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

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

總結

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

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

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

相關文章

  • webpack打包分析與性能優化

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

    joy968 評論0 收藏0

  • 前端性能優化與上線

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

    wupengyu 評論0 收藏0

  • 使用 NodeJS 構建現代化的命令行工具

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

    QLQ 評論0 收藏0

  • nodejs包依賴管理

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

    chenatu 評論0 收藏0

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

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

    Object 評論0 收藏0

發表評論

0條評論

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