使用 CI/CD 優(yōu)化前端構(gòu)建的五種策略

如今使用 CI/CD 工具是網(wǎng)頁應(yīng)用程序開發(fā)的一個(gè)必要條件。作為關(guān)鍵開發(fā)路徑的一部分，加快構(gòu)建系統(tǒng)的速度對(duì)于提高開發(fā)人員的生產(chǎn)效率是至關(guān)重要的。

• 原文地址：5 Strategies to Reduce Frontend Build Time with CI/CD
• 原文作者：Bhagya Vithana
• 譯文出自：掘金翻譯計(jì)劃
• 本文永久鏈接：github.com/xitu/gold-m…
• 譯者：Zz 招錦
• 校對(duì)者：Kimhooo、KimYangOfCat

如今使用 CI/CD 工具是網(wǎng)頁應(yīng)用程序開發(fā)的一個(gè)必要條件。作為關(guān)鍵開發(fā)路徑的一部分，加快構(gòu)建系統(tǒng)的速度對(duì)于提高開發(fā)人員的生產(chǎn)效率是至關(guān)重要的。

因此，在這篇文章中，我們將帶你了解五種使用 CI/CD 優(yōu)化前端構(gòu)建時(shí)間的不同策略。

1. 使用并行網(wǎng)絡(luò)包 Parallel-Webpack

Parallel-Webpack 讓你能夠一邊運(yùn)行一邊進(jìn)行構(gòu)建應(yīng)用程序，以減少應(yīng)用程序構(gòu)建時(shí)間。

你可以通過使用以下 NPM 命令輕松開始使用 Parallel-Webpack：

npm install parallel-webpack —-save-dev
復(fù)制代碼

為了更好地了解 Parallel-Webpack 的配置，我們來看個(gè)簡單的示例。

var path = require('path');
module.exports = [{
  entry: './firstjob.js',
  output: {
    path: path.resolve(__dirname, './dist'),
   filename: 'task1.bundle.js'
  }
}, 
{
  entry: './secondjob.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'task2.bundle.js'
  }
}];
復(fù)制代碼

上面的配置包括兩個(gè)獨(dú)立的構(gòu)建任務(wù)，分別是 firstjob 和 secondjob。Parallel-Webpack 會(huì)同時(shí)運(yùn)行這兩個(gè)構(gòu)建任務(wù)，你會(huì)發(fā)現(xiàn) task1.bundle.js 和 task2.bundle.js 同時(shí)被構(gòu)建。

Parallel-Webpack 允許你控制并行性，包括 Webpack 的普通功能，例如觀察者（watcher）和重傳限制（retry limit）。

控制并行性

有時(shí)，你可能想限制 Parallel-Webpack 可用的 CPU 核心數(shù)量。在這種情況下，你可以使用 parallel-webpack -p=2 命令指定可用的 CPU 核心數(shù)量。

運(yùn)行觀察者

讓 Webpack 如此有影響力的功能之一是它的觀察者，它可以持續(xù)地重建你的應(yīng)用程序。你可以在 Parallel-Webpack 中毫不費(fèi)力地使用同樣的功能，只要在命令中加入 watch 標(biāo)志即可。

parallel-webpack --watch
復(fù)制代碼

同樣地，Parallel-Webpack 中有許多令人興奮的功能，可以集成到你的 CI/CD 管道中，以便加快它的速度。你也可以在文檔中找到更多有關(guān)信息。

2. 將應(yīng)用程序拆分成微前端

假設(shè)考慮傳統(tǒng)的單體前端系統(tǒng)，它們中的大部分是只有一個(gè)構(gòu)建管道和一個(gè)發(fā)布管道。因此，如果有一個(gè)錯(cuò)誤修復(fù)或新功能更新，就有可能破壞 CI/CD 管道中的整個(gè)構(gòu)建階段。

然而，如果我們使用微前端，我們可以將應(yīng)用程序的功能拆分，并獨(dú)立維護(hù)應(yīng)用程序的構(gòu)建和發(fā)布管道，以便不斷提交更新和修復(fù)錯(cuò)誤。

通常，可以獨(dú)立地整合和部署每個(gè)應(yīng)用程序，讓你更快地修復(fù)重要功能。因此，這確實(shí)對(duì) CI/CD 流程的提速有很大幫助。

3. 組件驅(qū)動(dòng)型 CI：Ripple CI

組件驅(qū)動(dòng)型 CI 是指只在修改過的組件和它們的所有依賴關(guān)系（即受影響的組件）上運(yùn)行的 CI，它不把整個(gè)項(xiàng)目作為一個(gè)單獨(dú)實(shí)體。Ripple CI 的典型示例是 Bit。

4. 優(yōu)化 Webpack 的性能

我們通常使用 Webpack 的默認(rèn)設(shè)置。然而，你是否知道如何通過使用插件和自定義配置進(jìn)一步優(yōu)化它嗎？

使用 uglifyjs-webpack-plugin v1 插件

壓縮是指在你的網(wǎng)頁中壓縮代碼、標(biāo)記和腳本文件的過程。它是減少構(gòu)建時(shí)間的主要方法之一。

但是，隨著項(xiàng)目規(guī)模的擴(kuò)大，這個(gè)修改過程本身也會(huì)花費(fèi)相當(dāng)多的時(shí)間。

如果項(xiàng)目正在構(gòu)建，可以使用插件 uglifyjs-webpack-plugin v1 來優(yōu)化構(gòu)建時(shí)間。這個(gè)插件提供了多進(jìn)程并行運(yùn)行的能力和緩存支持，大大提升了構(gòu)建效率。

在壓縮模塊的過程中使用加載器

Webpack 使用加載器將其他類型的文件轉(zhuǎn)化為有效模塊。然后，這些模塊被應(yīng)用程序接收，并添加到依賴關(guān)系圖中。

因此，必須指定相關(guān)的文件目錄，以減少不必要的模塊加載。

在 Webpack 配置中，你可以通過 include 選項(xiàng)輕松指定文件目錄。

const path = require('path');

module.exports = {
  
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        loader: 'css-loader',
      },
    ],
  },
};
復(fù)制代碼

5. NPM 模塊安裝的管道緩存

我們都知道，安裝節(jié)點(diǎn)模塊需要耗費(fèi)時(shí)間。我們發(fā)現(xiàn)了這個(gè)問題，特別是在管道中耗費(fèi)更多時(shí)間，因?yàn)樗鼈兠看芜\(yùn)行都會(huì)安裝節(jié)點(diǎn)模塊。

NPM 緩存是一種簡單的緩存機(jī)制，我們可以在構(gòu)建管道中使用，以避免每次都運(yùn)行 npm 安裝。

這種緩存機(jī)制將使你的構(gòu)建管道與你的本地開發(fā)環(huán)境相似。你只需要安裝一次節(jié)點(diǎn)模塊，同樣的模塊將被用于后續(xù)的構(gòu)建。

例如，讓我們來看一個(gè) NodeJS 項(xiàng)目的 Azure DevOps 管道。

為 NodeJs 項(xiàng)目緩存 NPM 模塊的最推薦方式是使用 NPM 的共享緩存目錄。這個(gè)目錄包括所有下載模塊的緩存版本。每當(dāng)我們運(yùn)行 npm install 命令時(shí)，NPM 會(huì)首先檢查這個(gè)目錄，并在其中獲取存儲(chǔ)的包。

示例代碼

variables: 
npm_config_cache: $(Pipeline.Workspace)/.npm 

steps: 
— task: Cache@2 
  inputs: 
    key: ‘npm | “$(Agent.OS)” | package-lock.json’ 
    restoreKeys: | 
      npm | “$(Agent.OS)” 
    path: $(npm_config_cache) 
  displayName: Cache npm

— script: npm ci
復(fù)制代碼

本文總結(jié)

正如你已經(jīng)了解到的，有五種技術(shù)可以加快前端應(yīng)用程序的構(gòu)建時(shí)間。此外，還有許多其他技術(shù)可能適合技術(shù)開發(fā)和工作流程。你應(yīng)該選擇適合用例的方法。

同時(shí)，我希望這里的討論能幫助你理解以上策略，以加快 CI/CD 流程的前端構(gòu)建時(shí)間。

感謝你的閱讀！

如果發(fā)現(xiàn)譯文存在錯(cuò)誤或其他需要改進(jìn)的地方，歡迎到 掘金翻譯計(jì)劃 對(duì)譯文進(jìn)行修改并 PR，也可獲得相應(yīng)獎(jiǎng)勵(lì)積分。文章開頭的 本文永久鏈接 即為本文在 GitHub 上的 MarkDown 鏈接。

掘金翻譯計(jì)劃 是一個(gè)翻譯優(yōu)質(zhì)互聯(lián)網(wǎng)技術(shù)文章的社區(qū)，文章來源為 掘金 上的英文分享文章。內(nèi)容覆蓋 Android、iOS、前端、后端、區(qū)塊鏈、產(chǎn)品、設(shè)計(jì)、人工智能等領(lǐng)域，想要查看更多優(yōu)質(zhì)譯文請(qǐng)持續(xù)關(guān)注 掘金翻譯計(jì)劃、官方微博、知乎專欄。

如果你覺得這篇內(nèi)容對(duì)你挺有啟發(fā)，我想邀請(qǐng)你幫我三個(gè)小忙：