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 构建）
项目链接：Basic、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- 隐藏的 dotfiles（如 `
.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` 钩子来做到这一点
nuxt.hook('generate:cache:ignore', ignore => ignore.push('content'))
它是如何工作的
当使用新的带有 `static` 目标的 `nuxt generate` 时，将写入一个包含非忽略项目文件校验和以及 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` 可以智能地检测目标并在必要时进行构建。
Server 目标
- `
nuxt dev` = 开发服务器 - `
nuxt build` = 为生产环境构建你的应用程序 - `
nuxt start` = 启动生产服务器（将其用于 Heroku、Digital Ocean 等 Node.js 托管）
Static 目标
- `
nuxt dev` = 开发服务器 - `
nuxt generate` = 在需要时构建并静态导出到 `dist/` - `
nuxt start` = 像你的静态托管一样服务于 `dist/` 目录（Netlify、Vercel、Surge 等），非常适合在部署之前进行测试
下一步做什么
- 将你的项目升级到 [email protected]
- 使用 `
nuxt generate` 代替 `nuxt export` - 使用 `
nuxt start` 代替 `nuxt serve` - 享受快速部署 🤙