Nodejs應(yīng)用編譯構(gòu)建提速建議

為什么在本地構(gòu)建就快，但編譯機(jī)上很慢

在編輯機(jī)上每次的構(gòu)建環(huán)境都是全新的，完成一次構(gòu)建比本地需要多一些步驟:

現(xiàn)成的全局包緩存 VS 重新構(gòu)建緩存: 咱可以先簡(jiǎn)單理解為咱使用 npm 的時(shí)候那個(gè)全局的緩存目錄，編輯機(jī)需要準(zhǔn)備持久化的緩存的環(huán)境，包括下載、掛載以重建緩存，如果緩存內(nèi)容過(guò)大，時(shí)間也會(huì)相對(duì)更長(zhǎng)，本地構(gòu)建直接使用了穩(wěn)定的本地文件系統(tǒng)；

增量安裝依賴(lài) VS 全量安裝依賴(lài): 本地不太經(jīng)常需要執(zhí)行 install 的過(guò)程，即使需要，也因?yàn)橛谐志玫?node_modules 目錄存在，不需要全量安裝，但編輯機(jī)環(huán)境每次需要重新安裝這個(gè)項(xiàng)目需要的所有依賴(lài)；

增量構(gòu)建 VS 全量構(gòu)建: 本地構(gòu)建默認(rèn)會(huì)將構(gòu)建緩存放到 node_modules 目錄下，第二次構(gòu)建的時(shí)候這些構(gòu)建就能被用起來(lái)，使得后面的構(gòu)建更快，但這個(gè)構(gòu)建的默認(rèn)緩存位置在編輯機(jī)上不會(huì)被持久化，也就是每次需要全量構(gòu)建.

網(wǎng)絡(luò)環(huán)境: 有些依賴(lài)包安裝依賴(lài)外部網(wǎng)絡(luò)甚至海外網(wǎng)絡(luò)，本地的網(wǎng)絡(luò)環(huán)境比較順暢，但編輯機(jī)的網(wǎng)絡(luò)對(duì)與海外網(wǎng)的訪問(wèn)沒(méi)有保證.

難以利用的優(yōu)勢(shì): 多核大內(nèi)存，nodejs 項(xiàng)目的構(gòu)建，大部分工作都在一個(gè)線程上執(zhí)行了，不好直接利用編譯機(jī)的多核優(yōu)勢(shì)

額外的步驟: 編譯機(jī)需要下載鏡像、制作并上傳運(yùn)行鏡像、緩存內(nèi)容持久化，而本地一般只是產(chǎn)出包.

所以從以上角度入手，我們可以基于這樣的一些思路進(jìn)行構(gòu)建速度的優(yōu)化:

優(yōu)化鏡像大小；

善用持久化緩存實(shí)現(xiàn)增量構(gòu)建 (編輯機(jī)會(huì)對(duì) /cache/ 目錄下的內(nèi)容進(jìn)行持久緩存)

充分利用多核優(yōu)勢(shì):

比如 ts-loader 的類(lèi)型校驗(yàn)就可以通過(guò)其它插件在單獨(dú)的線程執(zhí)行，eslint-loader 也支持多線程 (但目前有 bug, 不建議使用).

再比如我們可以對(duì)項(xiàng)目的各功能模塊解耦，拆成多個(gè)構(gòu)建同時(shí)進(jìn)行。

減少不必要的構(gòu)建:

比如合理配置 exclude 以精簡(jiǎn)構(gòu)建文件范圍；

對(duì)于不常變動(dòng)的文件，拆出來(lái)一次構(gòu)建，下次復(fù)用.

判斷是否可能有其它方式去掉對(duì)外網(wǎng)依賴(lài)的包

如何分析構(gòu)建速度

檢查 /cache/ 目錄大小:

在編譯命令中加入:du -sh /cache, 通過(guò)構(gòu)建日志查看目錄大小

在整體編譯命令前后都加上date, 可以看自己項(xiàng)目的構(gòu)建過(guò)程耗時(shí)，即編譯命令執(zhí)行時(shí)間

在主要的編譯命令的每一行前面加上time, eg:time npm install可以看 install 過(guò)程的實(shí)際耗時(shí)，build 過(guò)程同理.

對(duì)比整體構(gòu)建時(shí)間 (網(wǎng)頁(yè)上直接顯示的任務(wù)時(shí)間) 與編譯命令執(zhí)行時(shí)間 (末尾的 date 時(shí)間 - 開(kāi)頭的 date 時(shí)間), 如果整體時(shí)間超過(guò)編譯命令執(zhí)行時(shí)間很多 (> 1min30s), 可能是 /cache/ 目錄或鏡像過(guò)大導(dǎo)致的。

以下為詳情介紹:

使用更小的運(yùn)行鏡像

如果有較大的鏡像，建議聯(lián)系運(yùn)維進(jìn)行優(yōu)化.

善用持久緩存

緩存可以對(duì)應(yīng)用構(gòu)建帶來(lái)提速的效果，但如果緩存目錄持續(xù)增長(zhǎng)，大到一定程度反倒可能讓速度變慢.

了解緩存機(jī)制:

1. 緩存目錄: /cache/

2. 默認(rèn)行為: 對(duì)于 nodejs 的應(yīng)用, 目前持久緩存會(huì)為 npm, pnpm 提供安裝包的緩存, 以加快 npm install / pnpm install 的過(guò)程

3. 工作原理: 

    3.1 /cache/ 目錄下的內(nèi)容會(huì)構(gòu)建成功后自動(dòng)上傳到服務(wù)器進(jìn)行存儲(chǔ), 并在下次構(gòu)建任務(wù)執(zhí)行前進(jìn)行掛載

    3.2 /cache/ 與 當(dāng)前工作目錄(即 './', 拉取的源碼存放位置) 不在同一個(gè)文件系統(tǒng)(相當(dāng)于是緩存在C盤(pán)而源碼在D盤(pán)), pnpm install的行為將從 hark link回退為文件復(fù)制(硬鏈接的方式相對(duì)于大量小文件的拷貝, 速度要快很多)

    3.3 /cache/ 的工作涉及上傳、下載過(guò)程, 如果過(guò)大也將會(huì)影響整個(gè)構(gòu)建過(guò)程的速度

排除全局緩存對(duì)構(gòu)建速度的影響

檢查 /cache/ 的大小，可以在編譯命令中加入:du -sh /cache, 查看日志，如果文件夾超過(guò) 1G (僅供參考), 建議咚咚聯(lián)系行云部署 (j-one) 對(duì)應(yīng)用緩存進(jìn)行清理

解決緩存跨盤(pán)造成的性能損失

主要思路: 使源碼與 /cache/ 處于同一個(gè)文件系統(tǒng)。目前對(duì)于 pnpm 的應(yīng)用推薦該方式. 原理: 使源碼與 /cache/ 處于同一個(gè)文件系統(tǒng)，這可以讓 pnpm 的 hard link 方式生效，相對(duì)于 node_modules 那些數(shù)以萬(wàn)計(jì)的小文件復(fù)制，執(zhí)行效率會(huì)得到可觀的提升。參考:Pnpm 是否可以跨多個(gè)驅(qū)動(dòng)器或文件系統(tǒng)工作？ 方式: 將當(dāng)前工作目錄的代碼復(fù)制到 /cache/ 下再執(zhí)行 install、build 命令. 參考命令:

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

    # 將構(gòu)建結(jié)果拷貝到抽包地址
    ########## 如果不是 dist, 請(qǐng)根據(jù)需要換成其它目錄, 就是你項(xiàng)目構(gòu)建完生成的目標(biāo)代碼目錄
    cp -r ./dist/* ${CUR_WORKSPACE}/.build
    # 刪除不需要被緩存的文件
    cd ../ && rm -rf /cache/source

以上編譯命令基于行云部署前端項(xiàng)目本身精簡(jiǎn)

請(qǐng)大家在理解原理、思路的基礎(chǔ)上根據(jù)自身需要修改.

緩存構(gòu)建結(jié)果

webpack 及其插件，會(huì)對(duì)構(gòu)建結(jié)果進(jìn)行緩存。我們可以利用 /cache/ 的持久化緩存來(lái)實(shí)現(xiàn)代碼構(gòu)建緩存。其它構(gòu)建工具也可以參考相關(guān)文檔進(jìn)行配置. 如果使用 webpack4 或依賴(lài) webpack4 的構(gòu)建工具，比如 @vue/cli-service 等，通常會(huì)使用 cache-loader 對(duì)構(gòu)建結(jié)果進(jìn)行緩存，babel-loader 也會(huì)有自己的構(gòu)建緩存，但默認(rèn)都放在 node_modules/.cache 目錄下，建議參考相關(guān)文檔將 cache 目錄設(shè)置為 /cache/build (或者其它 /cache/ 的子目錄) 對(duì)于 webpack5, 自己就已經(jīng)集成了 cache 功能，可以刪掉 cache-loader 等插件，減少不必要的工作。參考:webpack cache 如果是 monorepo 的應(yīng)用，還可以實(shí)現(xiàn)子項(xiàng)目級(jí)別的緩存，比如使用nx進(jìn)行 monorepo 的管理，則可以配置 NX_CACHE_DIRECTORY 來(lái)設(shè)置緩存地址，eg:

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

eslint 也是一個(gè)很費(fèi)時(shí)的操作，它也支持緩存，但默認(rèn)不開(kāi)啟，如果有需要也可以開(kāi)啟緩存，但緩存策略需要使用 'content', 因?yàn)槊看螛?gòu)建文件的 createTime 都會(huì)改變，metadata 的策略會(huì)失靈。參考:eslint cache 通常我們需要同時(shí)兼容本地開(kāi)發(fā)和行云部署的構(gòu)建，可以通過(guò)環(huán)境變量的方式實(shí)現(xiàn)，以 webpack5 為例: webpack5 的緩存配置:

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

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

export BUILD_CACHE_DIRECTORY=/cache/.webpack

另一種利用緩存的思路：緩存 node_modules

(編譯團(tuán)隊(duì)提出了這種思路，我目前沒(méi)有進(jìn)行相關(guān)嘗試，產(chǎn)品上針對(duì)該思路的通用解決方案在探索中)

主要思路: 模擬本地構(gòu)建 (本地構(gòu)建會(huì)持久保留 node_modules 目錄)

收益:

1. 加速 install 的過(guò)程，減少包的安裝.

2. 利用代碼構(gòu)建緩存: webpack5 或 babel-loader 等一般會(huì)在 node_modules/.cache 目錄下存放構(gòu)建緩存，這也是很多應(yīng)用本地構(gòu)建較快的原因。當(dāng)然 .cache 目錄會(huì)持續(xù)增長(zhǎng)，需要定時(shí)清理，有興趣大家可以看看本地的代碼里是否有這個(gè)目錄，占多大空間. 參考命令:

大體上與上面 ' 解決緩存跨盤(pán)造成的性能損失 ' 過(guò)程相同，只是最后 rm 的過(guò)程保留 node_modules 目錄，以供下次使用

    ####### 與上面 解決緩存跨盤(pán)造成的性能損失 一致 #########
    # 記下當(dāng)前工作目錄
    CUR_WORKSPACE=`pwd`
    # 存放源碼
    mkdir -p /cache/source
    # 拷貝當(dāng)前目錄代碼到 /cache/ 下
    rsync -r ./ /cache/source --exclude=node_modules --exclude=.git
    # 切換 workspace
    cd  /cache/source
    # 執(zhí)行 install
    npm i
    # 執(zhí)行 build
    npm run build
    # 將構(gòu)建結(jié)果拷貝到抽包地址
    cp -r ./dist/* ${CUR_WORKSPACE}/.build
    
    ####### 差異: 刪除時(shí)排除 node_modules 目錄 #########
    # 刪除不需要被緩存的文件
    ls -A | grep -vE "^.$|^..$|^node_modules"|xargs rm -rf

減少源碼

避免在 coding 中提交 node_modules 以及各種大的二進(jìn)制文件

優(yōu)化編譯過(guò)程

優(yōu)化依賴(lài)包安裝的過(guò)程

有些項(xiàng)目依賴(lài)了 image-minimizer-webpack-plugin, 這是一個(gè)用于壓縮圖片的工具，該資源依賴(lài)的 cwebp-bin 等資源需要從海外的網(wǎng)站下載，這個(gè)過(guò)程可能會(huì)很慢甚至失敗。如果可能，建議直接提交壓縮后的圖片到代碼庫(kù)，同時(shí)去掉對(duì)這個(gè)插件的引用.

可以在編譯命令前加上 time, 比如time pnpm install來(lái)觀察這一步驟的耗時(shí)，如果這一步驟很長(zhǎng)，可以看是否有可以去掉的依賴(lài)包，或者禁用對(duì)可選依賴(lài)包的安裝，有時(shí)候升級(jí)構(gòu)建工具也能使包依賴(lài)得到優(yōu)化.

優(yōu)化構(gòu)建過(guò)程

對(duì)于 webpack 構(gòu)建的應(yīng)用，對(duì) rules、plugin (如果支持) 檢查是否正確設(shè)置了 exclude, 用以減少不必要的文件構(gòu)建

啟用構(gòu)建緩存 (但緩存的持續(xù)增長(zhǎng)還是需要關(guān)注，緩存過(guò)大的問(wèn)題后續(xù)可能從產(chǎn)品層面得以?xún)?yōu)化)

ts-loader 通?？梢蚤_(kāi)啟 transpileOnly: true, 并通過(guò)fork-ts-checker-webpack-plugin進(jìn)行類(lèi)型檢查

eslint 的優(yōu)化，可以對(duì)規(guī)則進(jìn)行優(yōu)化，有些校驗(yàn)規(guī)則是非常耗時(shí)的，但同時(shí)受益并不是很大，可以考慮關(guān)閉。具體可以這么做:

4.1 設(shè)置 __TIMING__環(huán)境變量，可以啟用對(duì)每個(gè) eslint rule 的性能分析，export TIMING = 1;

4.2 在本地正常執(zhí)行構(gòu)建，檢測(cè) eslint rule performance 的輸出，分析耗時(shí)較長(zhǎng)的規(guī)則，確認(rèn)是否必要

補(bǔ)充:

關(guān)于 eslint 的多線程問(wèn)題：對(duì) eslint 開(kāi)啟多線程之后會(huì)導(dǎo)致 build 過(guò)程發(fā)現(xiàn)的規(guī)則異常不能拋出，導(dǎo)致規(guī)則實(shí)際會(huì)失效。該問(wèn)題參考 Issue, 這個(gè)問(wèn)題挺久了，一直沒(méi)有得到有效解決.

同時(shí)也可以考慮將 eslint 的校驗(yàn)作為 git hook 執(zhí)行，避免提交不規(guī)范的代碼，此時(shí)在 build 過(guò)程可以省略這一步驟.

5. 代碼 minify 的過(guò)程，推薦使用 esbuild, 在 webpack 里面就可以配置.

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

6. 對(duì)于不經(jīng)常變動(dòng)的部分，建議提前編譯，或通過(guò) DllPlugin 進(jìn)行優(yōu)化。比如行云部署項(xiàng)目本身依賴(lài) monaco editor, 但每次對(duì)它的源碼進(jìn)行構(gòu)建很耗時(shí)，所以直接將提前編譯好的代碼提交了，后續(xù)直接用.

7. 注意避免一個(gè)項(xiàng)目被 build 多次，比如:

7.1 對(duì)于使用 vue-cli-service 的應(yīng)用，v5.0.0-beta.0 開(kāi)始，可能會(huì)根據(jù)瀏覽器列表配置生成不同的包，會(huì)導(dǎo)致多次構(gòu)建

7.2 有一些項(xiàng)目需要微前端接入，可能會(huì)為獨(dú)立運(yùn)行時(shí)、子應(yīng)用模式采用不同的入口，從而構(gòu)建兩次。比如 JModule 的用戶，由于極早期 webpack-jmodule-plugin 的版本不能自定義入口文件，通常會(huì)構(gòu)建兩次，建議升級(jí)為最新的 @jmodule/plugin-webpack, 并且采用同一個(gè)入口文件構(gòu)建一次.

8. 如果是一個(gè)相對(duì)簡(jiǎn)單的應(yīng)用，可以考慮換其它構(gòu)建工具，比如 esbuild、swc, 編程語(yǔ)言帶來(lái)的性能差異，確實(shí)能形成降維打擊.

9. 如果可能，分析項(xiàng)目代碼間的依賴(lài)，拆分為多個(gè)構(gòu)建并行執(zhí)行，編譯機(jī)的最大優(yōu)勢(shì)就是多核，咱可以充分利用.

10. 升級(jí) webpack 以及其它構(gòu)建插件，通常也能帶來(lái)一定程度的速度提升，我們 jci 項(xiàng)目的編譯就從升級(jí)中獲得了一些受益.

前端構(gòu)建的提速是一項(xiàng)比較復(fù)雜且細(xì)節(jié)的工程，目前產(chǎn)品上在持續(xù)跟蹤構(gòu)建慢的應(yīng)用，努力優(yōu)化編譯速度，但前端本身?yè)碛幸粋€(gè)比較自由的技術(shù)環(huán)境，沒(méi)有統(tǒng)一的構(gòu)建工具與流程，另外語(yǔ)言本身的執(zhí)行效率、單線程的構(gòu)建也不好讓編譯機(jī)發(fā)揮其最大能力，所以目前全局的通用優(yōu)化手段還是會(huì)比較局限，還是依賴(lài)項(xiàng)目自身的優(yōu)化。希望大家一起努力共建美好的明天.

審核編輯：劉清