Nodejs 應用編譯構建提速建議

来源:https://www.cnblogs.com/jingdongkeji/archive/2023/05/26/17433947.html
-Advertisement-
Play Games

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


編譯構建的整體過程

  1. 拉取編譯鏡像

  2. 拉取緩存鏡像

  3. 拉取項目源碼

  4. 掛載緩存目錄

  5. 執行編譯命令(用戶自定義)

  6. 持久化緩存

  7. 上傳編譯鏡像

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

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

  1. 現成的全局包緩存 VS 重新構建緩存: 咱可以先簡單理解為咱使用 npm 的時候那個全局的緩存目錄, 編輯機需要準備持久化的緩存的環境, 包括下載、掛載以重建緩存, 如果緩存內容過大, 時間也會相對更長, 本地構建直接使用了穩定的本地文件系統;

  2. 增量安裝依賴 VS 全量安裝依賴: 本地不太經常需要執行 install 的過程, 即使需要, 也因為有持久的 node_modules 目錄存在, 不需要全量安裝, 但編輯機環境每次需要重新安裝這個項目需要的所有依賴;

  3. 增量構建 VS 全量構建: 本地構建預設會將構建緩存放到 node_modules 目錄下, 第二次構建的時候這些構建就能被用起來, 使得後面的構建更快, 但這個構建的預設緩存位置在編輯機上不會被持久化, 也就是每次需要全量構建.

  4. 網路環境: 有些依賴包安裝依賴外部網路甚至海外網路, 本地的網路環境比較順暢, 但編輯機的網路對與海外網的訪問沒有保證.

  5. 難以利用的優勢: 多核大記憶體, nodejs項目的構建, 大部分工作都在一個線程上執行了, 不好直接利用編譯機的多核優勢

  6. 額外的步驟: 編譯機需要下載鏡像、製作並上傳運行鏡像、緩存內容持久化, 而本地一般只是產出包.

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

  1. 優化鏡像大小;

  2. 善用持久化緩存實現增量構建(編輯機會對 /cache/ 目錄下的內容進行持久緩存)

  3. 充分利用多核優勢:

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

    再比如我們可以對項目的各功能模塊解耦, 拆成多個構建同時進行。

  4. 減少不必要的構建:

    比如合理配置 exclude 以精簡構建文件範圍;

    對於不常變動的文件, 拆出來一次構建, 下次復用.

  5. 判斷是否可能有其它方式去掉對外網依賴的包

如何分析構建速度

  1. 檢查 /cache/ 目錄大小:
  2. 在編譯命令中加入:du -sh /cache, 通過構建日誌查看目錄大小
  3. 在整體編譯命令前後都加上date, 可以看自己項目的構建過程耗時, 即編譯命令執行時間
  4. 在主要的編譯命令的每一行前面加上time, eg:time npm install可以看 install 過程的實際耗時, build 過程同理.
  5. 對比整體構建時間(網頁上直接顯示的任務時間)與編譯命令執行時間(末尾的 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 以及各種大的二進位文件

優化編譯過程

優化依賴包安裝的過程

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

優化構建過程

  1. 對於webpack構建的應用, 對 rules、plugin(如果支持) 檢查是否正確設置了 exclude, 用以減少不必要的文件構建
  2. 啟用構建緩存(但緩存的持續增長還是需要關註, 緩存過大的問題後續可能從產品層面得以優化)
  3. ts-loader 通常可以開啟 transpileOnly: true, 並通過fork-ts-checker-webpack-plugin進行類型檢查
  4. 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 項目的編譯就從升級中獲得了一些受益.

補充:

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

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

作者：京東科技 林光輝

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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Flutter熱更新技術探索
    APP發佈到市場後，難免會遇到嚴重的BUG阻礙用戶使用，因此有在不發佈新版本APP的情況下使用熱更新技術立即修複BUG需求。原生APP（例如：Android & IOS）的熱更新需求已經比較成熟，但Flutter技術棧目前還缺少類似的技術方案，因此Flutter研發團隊，也需要類似的熱更新技術。 ...
  • CSS3 clip-path：打造獨特創意設計效果的秘密武器
    一說到創建桌面應用，就不得不提及Electron和Tauri框架。這次給大家主要分享的是基於electron最新版本整合vite4.x構建vue3桌面端應用程式。 之前也有使用vite2+vue3+electronc創建桌面端項目，不過 vue-cli-plugin-electron-builder ...
  • 記錄--前端小票列印、網頁列印
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 一、小票列印 目前市面上的小票印表機大多採用的列印指令集為ESC/POS指令，它可以使用ASCII碼、十進位、十六進位來控制列印，我們可以使用它來控制字體大小、列印排版、字體加粗、下劃線、走紙、切紙、控制錢箱等，下麵以初始化印表機為例： ...
  • 深入理解 apply()方法
    apply(thisArg) apply(thisArg, argsArray) thisArg 在 func 函數運行時使用的 this 值。請註意，this 可能不是該方法看到的實際值：如果這個函數處於非嚴格模式下，則指定為 null 或 undefined 時會自動替換為指向全局對象，原始值會 ...
  • C#與Node JS互相實現DES加密解密
    具體的加密演算法可以可自行查詢其區別，這裡只是拋磚引玉，大部分加密方法基本都能通過改變傳入參數來實現。 C#相關類文檔： System.Security.Cryptography 命名空間 | Microsoft Learn Node JS相關文檔：Crypto | Node.js v16.20.0 ...
  • 搭建自動化 Web 頁面性能檢測系統 —— 設計篇
    >我們是[袋鼠雲數棧 UED 團隊](http://ued.dtstack.cn/)，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。。 >本文作者：琉易 [liuxianyu.cn](https://link.juejin.cn/?target=h ...
  • JavaScript 格式化金額
    # JavaScript 格式化金額 ## 一、[使用 `Intl.NumberFormat` 構造函數](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberForm ...
  • 【一步步開發AI運動小程式】八、利用body-calc進行姿態識別
    > 隨著人工智慧技術的不斷發展，阿裡體育等IT大廠，推出的“樂動力”、“天天跳繩”AI運動APP，讓**雲上運動會、線上運動會、健身打卡、AI體育指導**等概念空前火熱。那麼，能否將這些在APP成功應用的場景搬上小程式，分享這些概念的紅利呢？本系列文章就帶您一步一步從零開始開發一個AI運動小程式，本 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類