Nodejs 應用編譯構建提速建議-有解無憂

編譯構建的整體程序

拉取編譯鏡像
拉取快取鏡像
拉取專案原始碼
掛載快取目錄
執行編譯命令(用戶自定義)
持久化快取
上傳編譯鏡像

為什么在本地構建就快, 但編譯機上很慢

在編輯機上每次的構建環境都是全新的, 完成一次構建比本地需要多一些步驟:

現成的全域包快取 VS 重新構建快取: 咱可以先簡單理解為咱使用 npm 的時候那個全域的快取目錄, 編輯機需要準備持久化的快取的環境, 包括下載、掛載以重建快取, 如果快取內容過大, 時間也會相對更長, 本地構建直接使用了穩定的本地檔案系統;
增量安裝依賴 VS 全量安裝依賴: 本地不太經常需要執行 install 的程序, 即使需要, 也因為有持久的 node_modules 目錄存在, 不需要全量安裝, 但編輯機環境每次需要重新安裝這個專案需要的所有依賴;
增量構建 VS 全量構建: 本地構建默認會將構建快取放到 node_modules 目錄下, 第二次構建的時候這些構建就能被用起來, 使得后面的構建更快, 但這個構建的默認快取位置在編輯機上不會被持久化, 也就是每次需要全量構建.
網路環境: 有些依賴包安裝依賴外部網路甚至海外網路, 本地的網路環境比較順暢, 但編輯機的網路對與海外網的訪問沒有保證.
難以利用的優勢: 多核大記憶體, nodejs專案的構建, 大部分作業都在一個執行緒上執行了, 不好直接利用編譯機的多核優勢
額外的步驟: 編譯機需要下載鏡像、制作并上傳運行鏡像、快取內容持久化, 而本地一般只是產出包.

所以從以上角度入手, 我們可以基于這樣的一些思路進行構建速度的優化:

優化鏡像大小;
善用持久化快取實作增量構建(編輯機會對 /cache/ 目錄下的內容進行持久快取)
充分利用多核優勢:

比如 ts-loader 的型別校驗就可以通過其它插件在單獨的執行緒執行, eslint-loader 也支持多執行緒(但目前有bug, 不建議使用).

再比如我們可以對專案的各功能模塊解耦, 拆成多個構建同時進行，
減少不必要的構建:

比如合理配置 exclude 以精簡構建檔案范圍;

對于不常變動的檔案, 拆出來一次構建, 下次復用.
判斷是否可能有其它方式去掉對外網依賴的包

如何分析構建速度

檢查 /cache/ 目錄大小:
在編譯命令中加入:du -sh /cache, 通過構建日志查看目錄大小
在整體編譯命令前后都加上date, 可以看自己專案的構建程序耗時, 即編譯命令執行時間
在主要的編譯命令的每一行前面加上time, eg:time npm install可以看 install 程序的實際耗時, build 程序同理.
對比整體構建時間(網頁上直接顯示的任務時間)與編譯命令執行時間(末尾的 date 時間 - 開頭的 date 時間), 如果整體時間超過編譯命令執行時間很多(> 1min30s), 可能是 /cache/ 目錄或鏡像過大導致的，

以下為詳情介紹:

使用更小的運行鏡像

如果有較大的鏡像, 建議聯系運維進行優化.

善用持久快取

快取可以對應用構建帶來提速的效果, 但如果快取目錄持續增長, 大到一定程度反倒可能讓速度變慢.

了解快取機制:

1. 快取目錄: /cache/

2. 默認行為: 對于 nodejs 的應用, 目前持久快取會為 npm, pnpm 提供安裝包的快取, 以加快 npm install / pnpm install 的程序

3. 作業原理: 

    3.1 /cache/ 目錄下的內容會構建成功后自動上傳到服務器進行存盤, 并在下次構建任務執行前進行掛載

    3.2 /cache/ 與 當前作業目錄(即 './', 拉取的原始碼存放位置) 不在同一個檔案系統(相當于是快取在C盤而原始碼在D盤), pnpm install的行為將從 hark link回退為檔案復制(硬鏈接的方式相對于大量小檔案的拷貝, 速度要快很多)

    3.3 /cache/ 的作業涉及上傳、下載程序, 如果過大也將會影響整個構建程序的速度

排除全域快取對構建速度的影響

檢查 /cache/ 的大小, 可以在編譯命令中加入:du -sh /cache, 查看日志, 如果檔案夾超過 1G(僅供參考), 建議咚咚聯系行云部署(j-one)對應用快取進行清理

解決快取跨盤造成的性能損失

主要思路: 使原始碼與 /cache/ 處于同一個檔案系統. 目前對于 pnpm 的應用推薦該方式.

原理: 使原始碼與 /cache/ 處于同一個檔案系統, 這可以讓 pnpm 的 hard link 方式生效, 相對于node_modules那些數以萬計的小檔案復制, 執行效率會得到可觀的提升. 參考:Pnpm 是否可以跨多個驅動器或檔案系統作業？

方式: 將當前作業目錄的代碼復制到 /cache/ 下再執行 install、build 命令.

參考命令:

    # 記下當前作業目錄
    CUR_WORKSPACE=`pwd`
    # 存放原始碼
    # 咱統一用 /cache/source 放原始碼就好, 雖然也可以改成其它目錄的名字
    mkdir -p /cache/source
    # 拷貝當前目錄的代碼, 到 /cache/source 下
    rsync -r ./ /cache/source --exclude=node_modules --exclude=.git
    # 切換 workspace
    cd  /cache/source
    ########## 這里替換成自己需要的內容  ###########
    # 執行 install
    pnpm i
    # 執行 build
    pnpm run build
    ########## 這里替換成自己需要的內容  ###########

    # 將構建結果拷貝到抽包地址
    ########## 如果不是 dist, 請根據需要換成其它目錄, 就是你專案構建完生成的目標代碼目錄
    cp -r ./dist/* ${CUR_WORKSPACE}/.build
    # 洗掉不需要被快取的檔案
    cd ../ && rm -rf /cache/source

以上編譯命令基于行云部署前端專案本身精簡
請大家在理解原理、思路的基礎上根據自身需要修改.

快取構建結果

webpack 及其插件, 會對構建結果進行快取. 我們可以利用 /cache/ 的持久化快取來實作代碼構建快取. 其它構建工具也可以參考相關檔案進行配置.

如果使用 webpack4 或依賴webpack4 的構建工具, 比如 @vue/cli-service 等, 通常會使用 cache-loader 對構建結果進行快取, babel-loader 也會有自己的構建快取, 但默認都放在 node_modules/.cache 目錄下, 建議參考相關檔案將 cache 目錄設定為 /cache/build (或者其它 /cache/ 的子目錄)

對于 webpack5, 自己就已經集成了 cache 功能, 可以刪掉 cache-loader 等插件, 減少不必要的作業. 參考:webpack cache

如果是 monorepo 的應用, 還可以實作子專案級別的快取, 比如使用nx進行monorepo 的管理, 則可以配置 NX_CACHE_DIRECTORY 來設定快取地址, eg:

export NX_CACHE_DIRECTORY=/cache/jdos3-console-ui/.nx

eslint 也是一個很費時的操作, 它也支持快取, 但默認不開啟, 如果有需要也可以開啟快取, 但快取策略需要使用 'content', 因為每次構建檔案的 createTime 都會改變, metadata 的策略會失靈. 參考:eslint cache

通常我們需要同時兼容本地開發和行云部署的構建, 可以通過環境變數的方式實作, 以 webpack5 為例:

webpack5 的快取配置:

{
    cache: {
        type: 'filesystem',
        profile: true,
        cacheDirectory: process.env.BUILD_CACHE_DIRECTORY,
        compression: 'gzip',
    },
}

同時在行云部署的編譯命令中增加:

export BUILD_CACHE_DIRECTORY=/cache/.webpack

另一種利用快取的思路: 快取 node_modules

(編譯團隊提出了這種思路, 我目前沒有進行相關嘗試, 產品上針對該思路的通用解決方案在探索中)
主要思路: 模擬本地構建(本地構建會持久保留 node_modules目錄)
收益:
1. 加速 install 的程序, 減少包的安裝.
2. 利用代碼構建快取: webpack5 或 babel-loader 等一般會在 node_modules/.cache目錄下存放構建快取, 這也是很多應用本地構建較快的原因. 當然 .cache 目錄會持續增長, 需要定時清理, 有興趣大家可以看看本地的代碼里是否有這個目錄, 占多大空間.

參考命令:
大體上與上面 '解決快取跨盤造成的性能損失' 程序相同, 只是最后rm 的程序保留 node_modules 目錄, 以供下次使用

    ####### 與上面 解決快取跨盤造成的性能損失 一致 #########
    # 記下當前作業目錄
    CUR_WORKSPACE=`pwd`
    # 存放原始碼
    mkdir -p /cache/source
    # 拷貝當前目錄代碼到 /cache/ 下
    rsync -r ./ /cache/source --exclude=node_modules --exclude=.git
    # 切換 workspace
    cd  /cache/source
    # 執行 install
    npm i
    # 執行 build
    npm run build
    # 將構建結果拷貝到抽包地址
    cp -r ./dist/* ${CUR_WORKSPACE}/.build
    
    ####### 差異: 洗掉時排除 node_modules 目錄 #########
    # 洗掉不需要被快取的檔案
    ls -A | grep -vE "^\.$|^\.\.$|^node_modules"|xargs rm -rf

減少原始碼

避免在 coding 中提交 node_modules 以及各種大的二進制檔案

優化編譯程序

優化依賴包安裝的程序

有些專案依賴了 image-minimizer-webpack-plugin, 這是一個用于壓縮圖片的工具, 該資源依賴的 cwebp-bin 等資源需要從海外的網站下載, 這個程序可能會很慢甚至失敗. 如果可能, 建議直接提交壓縮后的圖片到代碼庫, 同時去掉對這個插件的參考.
可以在編譯命令前加上 time, 比如time pnpm install來觀察這一步驟的耗時, 如果這一步驟很長, 可以看是否有可以去掉的依賴包, 或者禁用對可選依賴包的安裝, 有時候升級構建工具也能使包依賴得到優化.

優化構建程序

對于webpack構建的應用, 對 rules、plugin(如果支持) 檢查是否正確設定了 exclude, 用以減少不必要的檔案構建
啟用構建快取(但快取的持續增長還是需要關注, 快取過大的問題后續可能從產品層面得以優化)
ts-loader 通常可以開啟 transpileOnly: true, 并通過fork-ts-checker-webpack-plugin進行型別檢查
eslint的優化, 可以對規則進行優化, 有些校驗規則是非常耗時的, 但同時受益并不是很大, 可以考慮關閉. 具體可以這么做:

4.1 設定 __TIMING__環境變數, 可以啟用對每個 eslint rule 的性能分析,export TIMING = 1;
4.2 在本地正常執行構建, 檢測 eslint rule performance 的輸出, 分析耗時較長的規則, 確認是否必要

補充:

關于eslint的多執行緒問題: 對eslint開啟多執行緒之后會導致 build 程序發現的規則例外不能拋出, 導致規則實際會失效. 該問題參考Issue, 這個問題挺久了, 一直沒有得到有效解決.
同時也可以考慮將 eslint 的校驗作為 git hook 執行, 避免提交不規范的代碼, 此時在 build 程序可以省略這一步驟.

5.代碼 minify 的程序, 推薦使用 esbuild, 在webpack里面就可以配置.

{
   optimization: {
       minimize: true,
       minimizer: [
           new TerserPlugin({
               minify: TerserPlugin.esbuildMinify,
           }),
       ],
   }
}

6.對于不經常變動的部分, 建議提前編譯, 或通過DllPlugin進行優化. 比如行云部署專案本身依賴 monaco editor, 但每次對它的原始碼進行構建很耗時, 所以直接將提前編譯好的代碼提交了, 后續直接用.

7.注意避免一個專案被 build 多次, 比如:
7.1 對于使用 vue-cli-service 的應用, v5.0.0-beta.0 開始, 可能會根據瀏覽器串列配置生成不同的包, 會導致多次構建
7.2 有一些專案需要微前端接入, 可能會為獨立運行時、子應用模式采用不同的入口, 從而構建兩次. 比如JModule的用戶, 由于極早期 webpack-jmodule-plugin 的版本不能自定義入口檔案, 通常會構建兩次, 建議升級為最新的 @jmodule/plugin-webpack, 并且采用同一個入口檔案構建一次.

8.如果是一個相對簡單的應用, 可以考慮換其它構建工具, 比如 esbuild、swc, 編程語言帶來的性能差異, 確實能形成降維打擊.

9.如果可能, 分析專案代碼間的依賴, 拆分為多個構建并行執行, 編譯機的最大優勢就是多核, 咱可以充分利用.

10.升級webpack以及其它構建插件, 通常也能帶來一定程度的速度提升, 我們 jci 專案的編譯就從升級中獲得了一些受益.

補充:

webpack 的更多細節優化, 可以參考https://webpack.docschina.org/configuration/cache/
同樣這里也可以考慮在 build 命令前加 time, 比如time npm run build, 便于觀察這一步的時間.
還可以用 ‘speed-measure-webpack-plugin’ 對 webpack 的構建時長進行輔助分析.

前端構建的提速是一項比較復雜且細節的工程, 目前產品上在持續跟蹤構建慢的應用, 努力優化編譯速度, 但前端本身擁有一個比較自由的技識訓境, 沒有統一的構建工具與流程, 另外語言本身的執行效率、單執行緒的構建也不好讓編譯機發揮其最大能力, 所以目前全域的通用優化手段還是會比較局限, 還是依賴專案自身的優化. 希望大家一起努力共建美好的明天.

作者：京東科技林光輝

內容來源：京東云開發者社區

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/553463.html

標籤：其他

上一篇：CSS中通配輸入文字的小技巧——如何在元素名中包含通配符

下一篇：返回列表