Nuxt 2 靜態改進

簡介

在 Nuxt 2.13 版本中，引入了完全靜態模式。此外，新增了 nuxt export 命令，用於預先渲染您的頁面，而無需觸發 webpack 建置，目標是分離渲染和建置過程。唯一的問題是，大多數 Nuxt 使用者無法完全發揮這種分離的潛力... 直到現在。

• 簡介
• 更快的靜態部署
• 產生時間：快取 vs 完整 webpack 建置
• 在您的專案中使用
  • 從快取中排除檔案
  • 模組作者
• 運作方式
  • 回到舊的命令
• 下一步

更快的靜態部署

在 v2.14 中，當沒有程式碼變更時，nuxt generate 將自動略過 webpack 建置步驟，並使用之前的快取建置。這將有助於大幅縮短靜態部署時間，避免不必要的建置，而建置通常是產生過程中最耗時的部分。快取支援是平台無關的，適用於 Netlify、Vercel 或任何其他快取 node_modules 的 CI/CD 設定。

產生時間：快取 vs 完整 webpack 建置

查看兩個 nuxt generate 之間的秒數比較

• Build 是指需要 webpack 建置的情況
• Cache 僅指內容已變更的情況（略過 webpack 建置）

專案連結：基本範例、Strapi 模組文件、Content 模組文件 和 Nuxt 2 文件。

在您的專案中使用

1. 將 nuxt 更新到最新的次要版本，即 v2.14。

npm update

2. 確保您的 nuxt.config 內的 target 設定為 static

export default {
  target: 'static'
  // ...
}

如果您保持 target: ‘server’ 或未指定 target，nuxt generate 的行為將與之前相同，以避免破壞性變更並提供舊版相容性。

3. 就這樣 🙌

現在，nuxt generate 命令只會在必要時建置專案，也就是當專案內部的檔案已變更時。它將始終重新渲染您的路由為靜態 HTML 檔案，就像 nuxt export 已經做的那樣。

現在您只需要將您的建置命令從 nuxt build && nuxt export 改回您正在使用的平台上的 nuxt generate。如果您正在使用 CI，請確保您正確地快取了 node_modules。

從快取中排除檔案

預設情況下，nuxt 會忽略這些目錄，因此如果它們內部的任何內容發生變更，將不會觸發建置

• 建置目錄 (.nuxt/)
• 靜態目錄 (static/)
• 產生發佈目錄 (dist/)
• node_modules
• README.md
• 隱藏的點檔案（例如 .npmrc）

您可以使用 nuxt.config 中的 generate.cache.ignore 選項新增更多模式

export default {
  generate: {
    cache: {
      ignore: [
        // When something changed in the docs folder, do not re-build via webpack
        'docs'
      ]
    }
  }
}

也可以為 ignore 選項使用函式來覆寫預設的忽略項目。

模組作者

如果您正在開發一個 Nuxt 模組，該模組處理不應觸發重新建置的檔案，該怎麼辦？最好的例子是 @nuxt/content 模組，它從儲存庫讀取 markdown 檔案。在這種情況下，這些檔案在執行階段模組中使用，當使用 @nuxt/content 時就是這種情況，模組本身可以告訴 nuxt 為您忽略這些檔案，因此您不必做任何事情！模組作者可以使用新的 generate:cache:ignore hook 來做到這一點

nuxt.hook('generate:cache:ignore', ignore => ignore.push('content'))

運作方式

當使用新的 nuxt generate 和 static 目標時，將會寫入一個快照，其中包含未忽略的專案檔案的 checksum，以及 nuxt 版本和一些其他配置到 .nuxt/build.json。此外，我們還將建置目錄移動到 node_modules/.cache/nuxt。由於 node_modules 已被所有主要平台（Netlify、Vercel...）和常見的 CI/CD 腳本快取，因此此解決方案開箱即用，無需額外配置。

當後續呼叫 nuxt generate 時，它將再次根據您的專案檔案建立 checksum，然後將其與 node_modules/.cache/nuxt/build.json 內現有的 checksum 進行比較。

如果它們匹配，則表示沒有任何需要重新建置的變更，因此我們可以直接開始渲染頁面。

如果偵測到不匹配，則表示需要完整重新建置。您也可以透過檢查主控台日誌來查看哪個檔案導致了重新建置。在建置之後，nuxt generate 將把新的 checksum 儲存到 .nuxt/build.json 中。您可以在這裡查看完整實作。

回到舊的命令

在 Nuxt v2.13 中，我們特別為靜態目標引入了 nuxt export 和 nuxt serve。在 Nuxt v2.14 中，它們已被棄用，因為 nuxt generate 和 nuxt start 足夠聰明，可以偵測目標並在必要時進行建置。

伺服器目標

• nuxt dev = 開發伺服器
• nuxt build = 為生產環境建置您的應用程式
• nuxt start = 啟動生產伺服器（用於 Node.js 託管，例如 Heroku、DigitalOcean 等）

靜態目標

• nuxt dev = 開發伺服器
• nuxt generate = 如果需要，進行建置並靜態匯出到 dist/
• nuxt start = 像您的靜態託管服務（Netlify、Vercel、Surge 等）一樣提供 dist/ 目錄，非常適合在部署前進行測試

下一步

• 將您的專案升級到 nuxt@2.14.0
• 使用 nuxt generate 而不是 nuxt export
• 使用 nuxt start 而不是 nuxt serve
• 享受快速部署 🤙