NuxtJS -- Going Full Static (中翻)
2020年7月15日 · Waiting7777 · 4 分鐘閱讀
這是一篇 NuxtJS 部落格文章的中文翻譯,藉由將文件翻譯的過程,順便更加了解文章的內容以及 NuxtJS 的熟悉度。
Too long to read
-
Upgrade nuxt to 2.13.0
-
Set target: 'static' in your nuxt.config.js
-
Run nuxt build && nuxt export instead of nuxt generate
-
That's it ✨
Bonus: 你可以用 nuxt serve 來跑個本地 server 測試你生出來的靜態頁面。
Table of Contents
-
Too long to read
-
Table of Contents
-
History
-
Current issues
-
New config option: target
-
New command: nuxt export
Crazy fast static applications
-
Crawler integrated
-
Faster re-deploy
-
New command: nuxt serve
-
Preview mode
-
Commands
-
Notes
What to do next
History
Nuxt 從 v0.3.2(November 2016)就有了靜態網站產生指令 nuxt generate,從那之後也做了很多改進,但一直沒有達到完全的靜態產生,今天 (Nuxt 2.13) 終於誕生了完全靜態的 export 指令。
Current issues
nuxt generate 大部分都是 pre-rendering,當你瀏覽用戶端時,asyncData 和 fetch 會被呼叫, 對你的 API 產生一個 request. 而很多用戶都要求希望有 "full static" 模式。希望這兩個 hook 可以不要被呼叫,因為你的頁面的內容都已經 pre-rendered 了。
此外,開發經驗也沒最佳化:
-
你在 SSR 模式可以訪問 req 或 res,但是在 nuxt generate 時卻沒有。
-
只有在 nuxt generate 時 process.static 才是 true,使得開發 Nuxt 模組或是外掛的困擾。
-
在 gererate.routes 中你必須自己指定全部的 dynamic routes,這非常的困難因為你無法造訪 nuxt module。
-
在開發模式中你無法測試 SPA fallback。
-
nuxt generate 預設會跑 nuxt build,使得網站只有更新內容的時候也要花費過長的 gernerate 時間。
附記:你也可以用 nuxt-payload-extractor 模組來達成,但有一點麻煩以及一些限制。
New config option:target
為了改進如何告訴 Nuxt 想要將你的應用生成靜態網頁,我們介紹一個放在 nuxt.config.js 的屬性 target:
export default {
target: 'static'
}
在有 static target 的時候用 nuxt dev 也能使開發經驗獲得改善:
-
從 context 中移除 req & res
-
從 404 中退回 (see SPA fallback)
-
$route.query 在 SSR 時永遠等於 {}
-
process.static is true
我們也將 process.target 暴露出來給模組的的作者來做邏輯上的使用。
*譯者註: 第4點真的蠻好用的,原本用 process.static 當邏輯做點 UI 的調整,要等 nuxt generate 出來以後才能知道結果,整個開發的很卡。
New command:nuxt export
為了避免破壞過去的 nuxt generate,我們使用了新的指令 nuxt export: 將你的 Nuxt app export 成靜態 HTML 到 dist/ 資料夾裡。
⚠️ 你得先跑 nuxt build 才能用 nuxt export
Crazy fast static applications
nuxt export 會 pre-render 你全部的頁面成 HTML 並且把 asyncData 和 fetch hook 裡面的資料存起來,讓之後用戶使用,意思就是 在用戶端不再會有 API 呼叫。並且把頁面的 payload 轉換成 js 檔案,更可以有效的減少檔案大小。
我們同時也改進了 smart prefetching,在純靜態時可以讓瀏覽切換近乎瞬間👀
Crawler integrated
nuxt 同時有爬蟲在裡面,偵測每個相關 route 並產生並產生頁面。如果你想要把很多 route 排除可以用 generate.exclude。你可以繼續使用 generate.routes 來新增額外的 route 並且不會生出靜態頁面。
想要取消爬蟲,在 nuxt.config.js 設定 generate.crawler: false
Faster re-deploy
在將 nuxt build 以及 nuxt export 分開之後,我們就可以實作一個新的優化,只 pre-render 內容有改變的頁面,這代表 no Webpack build -> 快速重新部署
New command: nuxt serve
當你把靜態頁面產出在 dist/後,可以在該資料夾使用 nuxt serve開啟一個 production 並支援 SPA fallback 的 server
這指令可以讓你在將靜態內容上傳到雲端前檢查頁面。
Preview mode
我們也支援實時預覽,只要加裝額外的 plugin:
// plugins/preview.client.js
export default async function ({ query, enablePreview }) {
if (query.preview) {
enablePreview()
}
}
開發時這將會自動重整頁面,(nuxtServerInit,asyncData 和 fetch 將會被呼叫)
Commands
現在你可以根據 target 跑一些不同的指令
- server
nuxt dev 開啟開發 server
-
nuxt build 將 Nuxt app 打包
-
nuxt start 開始 production server
-
static
nuxt dev 開啟開發 server (包含前面提的靜態改動)
-
nuxt build 將 Nuxt app 打包 (包含前面提的靜態改動)
-
nuxt export 將靜態頁面產生到 dist/
-
nuxt serve 從dist/ 開始 production server
Notes
-
我們在 nuxt.config.js 新增了 export key,那是 generate 的 alias,將會在 Nuxt 3 的時候取代。
-
nuxt generate 將會不推薦使用了(但之前能用的可以繼續用),並且會在 Nuxt 3 時移除。
-
我們新增了 export hooks 跟原本的 generate hooks 有些微不同,用於增進模組開發者的便利性。
What to do next
-
學習如何從 @nuxtjs/dotenv 移動到 runtime config ,請看這篇文章
-
訂閱最新的新聞才不會漏掉任何最新文章與資源
Waiting7777
前端工程師的 AI 實戰紀錄
這篇文章對你有幫助嗎?
每週一篇 — 前端工程師的 AI 轉型筆記
從前端到 AI Agent,把複雜的東西拆清楚,寄到你的信箱。