前端高級進階：在生產環境中使你的 npm i 速度提高 50%

這是山月關於高級前端進階暨前端工程系列文章的第 M 篇文章 (M 隨便打的，畢竟也不知道能寫多少篇)，關於前 M-1 篇文章，能夠從個人 github repo shfshanyue/blog 中找到，若是點進去的話能夠捎帶~點個贊~，若是沒有點進去的話，那就給這篇文章點個贊。

本篇文章地址在 前端工程化系列，歡迎訂閱。

1. 前端高級進階：javascript 代碼是如何被壓縮
2. 前端高級進階：如何更好地優化打包資源
3. 前端高級進階：網站的緩存控制策略最佳實踐及注意事項
4. 前端高級進階：在生產環境中使你的 npm i 速度提高 50%

---

對於一個前端應用，或者說是一個 Node 應用，在 CICD pipeline 中，不管是構建，測試，部署，其中必不可少的環節就是依賴安裝: npm i。

npm i 不只是必不可少的環節，並且極可能也是耗時最長的一個環節。

打蛇打七寸，優化應該從瓶頸處開始，若是能從依賴安裝下手，將能極大地縮短部署時間，提升產品交付效率，改善 DevOps 流程，從而促進敏捷開發。

CI 環境中的優化不一樣於本地開發環境，其中最大的不一樣在於: 在本地環境中安裝依賴是有狀態的，如 node_modules，~/.npmrc，~/.npm 一系列硬盤目錄及文件，無不構成狀態。而在生產環境中，每每結合 CICD 工具，每次分配的 Runner 不必定是一臺服務器(容器)，每每被視爲無狀態，於是沒法有效利用緩存而致使 CI 中部署用時過長。

但也正由於 CICD Runner 的無狀態化，這意味着你只要參考構建腳本，如 .gitlab-ci.yaml，.travis.yaml 或者 .github/workflows/deploy.yaml，就能夠從零把項目跑起來，而避免過多在熟悉新項目時求助他人。

不一樣的部署方式，不一樣的持續集成工具備不一樣的實踐方法，但優化的原理大同小異。

<!--more-->

若是嫌文章太長，直接直接拉到最下方看總結

只安裝有必要的庫

npm install 的速度顯然與它依賴的包的多少是正相關的，那減小包的數量就能夠減小裝包所花費的時間。這個道題如同天天都少吃一頓飯就會變瘦同樣簡單。

使用 --production 能夠只安裝 package.json 中 dependencies 中的依賴項，只把要安裝在 CI 中須要使用到的依賴。在生產環境部署時能夠指定 --production。

npm install --production

另外，經過設置環境變量 NODE_ENV=production 至關於指定 --production，測試以下:

$ NODE_ENV=production npm config get production
true

這惟一的不足就是須要你謹小慎微戰戰兢兢，如臨深淵如履薄冰地把 packages 分揀到 devDependencies 與 dependencies 中。

使用私有鏡像倉庫

從 npm 的官方倉庫能夠發佈與拉取 package，好比 react，vue 和 express 都發布在官方倉庫中。官方 registory 地址是 https://registry.npmjs.org/，這對國內的前端應用來講，因爲遠在國外，遠程倉庫的服務器時延過大，此時的瓶頸在於網絡。

國內的公有鏡像庫是一個不錯的選擇，如淘寶鏡像，它每隔十分鐘與官方鏡像倉庫同步一次，而它位於國內，網絡不至於太慢。

對於企業級項目的生產環境來講，在集羣內部搭建私有倉庫是一個更好的選擇，也更能縮短時延。 流量能在局域網完成的，就不須要去互聯網中溜圈了。

使用 npm config 來設置 npm 倉庫，它將把倉庫信息寫入 ~/.npmrc 中，這足以適用於 CICD 中。

npm config set registry https://registry-npm.shanyue.tech/

緩存：人不能兩次踏進同一條河流

人不能踏進同一條河流兩次，一個接口不能連續慢兩次，npm install 一樣不能慢兩次。

正如 http cache 同樣，npm install 也能夠充分利用緩存，npm 的緩存在 linux 系統中存在於如下路徑:

• ~/.npm

命令 npm cache verify 能夠校驗緩存，以下所示:

$ npm cache verify
Cache verified and compressed (~/.npm/_cacache):
Content verified: 4415 (156612117 bytes)
Index entries: 6239
Finished in 14.017s

結合 npm install --prefer-offline 緩存優先策略充分利用緩存

可是有一個悖論，在 CI 中是無狀態的: 你本次裝的 node_modules 和生成的 ~/.npm 將會在下次裝包時丟失。

這時候就須要利用 CI 的緩存功能，如如下是 travis ci 的配置

install:
- npm ci
# keep the npm cache around to speed up installs
cache:
  directories:
  - "$HOME/.npm"

progress: 屏蔽非必要打印信息

當設置 progress 爲 true 時，npm install 時將會顯示進度條，把它設置爲 false 可小幅提升 npm install 的速度。

修改設置:

npm set progress=false

在 官方文檔 中對 progress 有如下介紹：

Default: true, unless TRAVIS or CI env vars set.
Type: Boolean

所以，只須要在構建服務器中簡單設置一個 CI=true 的環境變量便可以很輕便地解決問題

使用 npm ci 替代 npm i

單看名字，裏邊有個 CI，它就像適用在 CI 中，事實也如此。它在 CI 環境中作了一系列優化，如去除掉一些面向用戶的特性來增強速度。除了性能，它也有一些在 CI 上基於完整性與安全性的檢查，如 package.json 與 package-lock.json 版本不一致的問題。

爲了更好地提升速度，npm ci 基於一個獨立的庫 libcipm 安裝依賴，而它擁有和 npm install 兼容的 API。而且當它安裝依賴時，默認是緩存優先的，它會充分利用緩存，從而加速裝包。

經實驗，npm ci 能夠減小將近一半的的依賴安裝時間。

$ npm install
added 1154 packages in 60s

$ npm ci
added 1154 packages in 35s

總結

最後總結一下如何減小 npm install 的時間，都是很簡單的設置，一分鐘搞定

1. 選擇時延低的 registry，須要企業技術基礎建設支持
2. NODE_ENV=production，只安裝生產環境必要的包
3. CI=true，npm 會在此環境變量下自動優化
4. 結合 CI 的緩存功能，充分利用 npm cache
5. 使用 npm ci 代替 npm i，既提高速度又保障應用安全性

與我交流

掃碼添加個人機器人微信，將會自動（自動拉人程序正在研發中）把你拉入前端高級進階學習羣

---

大廠招聘

推薦一個關於大廠招聘的公衆號【互聯網大廠招聘】，做者將在公衆號裏持續推送各個大廠的招聘職位及要求，並與大廠面試官以及招聘負責人直通，感興趣的能夠直接與負責人交流。

另外，做者也將持續推送優質的大廠面試經驗，各類大廠獨家面試題以及優秀文章分享，不限於前端，後端，運維和系統設計。

我在 github 上新建了一個倉庫 每日一題，天天一道面試題，歡迎交流。

• 前端面試題小記
• 計算機基礎面試題小計