Nuxt 2 靜態改善
介紹
在 Nuxt 版本 2.13 中，引入了完全靜態模式。此外，還新增了 `nuxt export` 命令，用於預先渲染您的頁面，而無需觸發 webpack 建置，目的是將渲染和建置過程分開。唯一的問題是，大多數 Nuxt 使用者無法充分發揮分離的潛力… **直到現在。**
更快的靜態部署
在 v2.14 中，當**沒有程式碼變更時**，`nuxt generate` 將會**自動跳過 webpack 建置步驟**，並使用先前的快取建置。這將有助於大幅縮短靜態部署時間，避免不必要的建置，而這通常是產生過程中耗時最多的部分。快取支援是**與平台無關**的，並且可以在 Netlify、Vercel 或任何其他快取 `node_modules` 的 CI/CD 設定上運作。
產生時間：快取 vs 完整 webpack 建置
請看兩個 `nuxt generate` 之間的秒數比較
- `Build` 是指需要 webpack 建置的情況
- `Cache` 僅在內容變更時 (跳過 webpack 建置)
專案連結：基本範例、Strapi 模組文件、Content 模組文件 和 Nuxt 2 文件。
在您的專案中使用
- 將 `nuxt` 更新至最新的次要版本，即 v2.14。
npm update
- 確保您的 `nuxt.config` 內的 `target` 為 `static`
export default {
target: 'static'
// ...
}
如果您保留 `target: 'server'` 或未指定 target，`nuxt generate` 的行為會與之前相同，以避免重大變更並提供舊版相容性。
- 就這樣 🙌
現在，只有在專案內的檔案發生變更時，`nuxt generate` 命令才會建置專案，就像 `nuxt export` 已經在做的那樣，它將始終將您的路由重新渲染為靜態 HTML 檔案。
現在您只需要將您的建置命令從 `nuxt build && nuxt export` 改回您正在使用的平台上的 `nuxt generate`。如果您正在使用 CI，請確保您正確快取了 `node_modules`。
從快取中排除檔案
預設情況下，nuxt 會忽略這些目錄，因此如果它們內部發生任何變更，將不會觸發建置
- 建置目錄 (`.nuxt/`)
- 靜態目錄 (`static/`)
- 產生 dist 目錄 (`dist/`)
node_modulesREADME.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` 目標時，包含未忽略專案檔案的檢查碼以及 nuxt 版本和一些其他設定的快照將寫入 `.nuxt/build.json`。此外，我們還會將建置目錄移至 `node_modules/.cache/nuxt`。由於 `node_modules` 已被所有主要平台 (Netlify、Vercel...) 和常見的 CI/CD 腳本快取，因此此解決方案開箱即用，無需額外設定。
當後續呼叫 `nuxt generate` 時，它將再次根據您的專案檔案建立檢查碼，然後將其與 `node_modules/.cache/nuxt/build.json` 內現有的檢查碼進行比較。
如果它們匹配，則表示沒有任何需要重建的變更，因此我們可以直接開始渲染頁面。
如果偵測到不匹配，則表示需要完整重建。您也可以透過檢查主控台記錄來查看哪個檔案導致重建。建置後，nuxt generate 將把新的檢查碼儲存到 `.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、Digital Ocean 等)
靜態目標
- `nuxt dev` = 開發伺服器
- `nuxt generate` = 在需要時建置並靜態匯出到 `dist/`
- `nuxt start` = 像您的靜態託管 (Netlify、Vercel、Surge 等) 一樣提供 `dist/` 目錄，非常適合在部署前進行測試
下一步該做什麼
- 將您的專案升級到 nuxt@2.14.0
- 使用 `nuxt generate` 取代 `nuxt export`
- 使用 `nuxt start` 取代 `nuxt serve`
- 享受快速部署 🤙