manbetxapp

Nuxt静态改进

7月27日,2020年7月27日读了5分钟
拍摄者Naresh Bojja.

介绍

使用nuxt.js 2.13,全静态模式已经介绍过。另外,一个新命令NUXT出口已添加以预先呈现页面,而无需触发WebPack构建,以分离渲染和构建过程。唯一的问题是,大多数Nuxt.js用户无法释放分离的全部潜力......到现在。

更快的静态部署

v2.14,nuxt生成将要自动跳过WebPack构建步骤,没有代码已更改并使用先前的构建使用缓存。这将有助于通过避免不必要的构建,从而提高静态部署时间,这通常是生成过程中最耗时的部分。缓存支持是平台 - 无人团并适用于NetLify,Vercel或正在缓存的任何其他CI / CD设置node_modules.

生成时间:缓存与完整的webpack构建

看到两个之间的比较nuxt生成

  • 建造是需要WebPack构建时
  • 缓存只有在内容已更改时(WebPack Build Skipped)

现在,我们对内容变更的项目的静态站点生成〜3.6倍快点

项目链接:基本的Strapi模块文档内容模块文档Nuxt Docs.

在您的项目中使用

  1. 更新nuxt.到最新的次要版本,即v2.14。
升级Nuxt.
NPM.更新
  1. 确保目标静止的在你的里面nuxt.config.
nuxt.config.js.
出口默认{目标'静止的'// ......}

nuxt生成将表现得以避免破坏变化,并提供遗留兼容性目标:'服务器'或者不指定目标。

  1. 就是这样

现在nuxt生成命令将仅在必要时构建项目,这是项目内部更改的文件时的情况。它将始终重新渲染到静态HTML文件的路由,如NUXT出口已经做了。

现在,您只需要从版本的构建命令Nuxt Build && Nuxt Exportnuxt生成在您使用的平台上。如果您使用的是CI,请确保您正在妥善缓存node_modules.

从缓存中排除文件

默认情况下,NUXT忽略了这些目录,因此如果在它们内部发生任何更改,则不会触发构建:

  • 构建目录(.nu​​xt /
  • 静态目录(静止的/
  • 生成dist(DIST /
  • node_modules.
  • readme.md.
  • 隐藏的dotfiles(喜欢.npmrc.

您可以使用更多模式generate.cache.ignore.选项nuxt.config.

nuxt.config.js.
出口默认{产生{缓存{忽略[//当文档文件夹中更改时,不要通过网克重新构建'docs']}}}

也可以使用功能忽略覆盖默认忽略条目的选项。

模块作者

如果您正在开发一个与不应该触发重建的文件的核心模块,该模块如何?最好的例子是@ nuxt / content从存储库中读取标记文件的模块。在这种情况下,这些文件在运行时模块中使用,这是在使用时的情况@ nuxt / content,模块本身可以告诉nuxt来忽略这些文件,所以您不必做任何事情!模块作者可以使用新的生成:缓存:忽略挂钩这样做:

nuxt.'生成:缓存:忽略'忽略=>忽略'内容'

这个怎么运作

使用新的时nuxt生成静止的目标,包括非忽略项目文件的校验和以及Nuxt版本以及一些其他配置的快照.nu​​xt / build.json.。另外,我们还将构建目录移动到node_modules / .cache / nuxt。因为node_modules.由所有主要平台(NetLify,Vercel,......)和常见的CI / CD脚本缓存,此解决方案在没有额外配置的情况下从框中工作。

什么时候nuxt生成随后调用,它将再次创建一个基于项目文件的校验和,然后将其与现有的文件进行比较node_modules / .cache / nuxt / build.json

如果它们匹配,则意味着没有更改需要重建所以我们可以直接开始呈现页面。

如果检测到不匹配,则意味着将需要完全重建。您还可以通过检查控制台日志来查看哪些文件导致重建。构建后,Nuxt生成将保存内部的新校验和.nu​​xt / build.json.。您可以查看完整的实施这里

回到旧学校命令

通过Nuxt v2.13,我们介绍了NUXT出口Nuxt服务专为静态目标而设计。使用v2.14,它们被推荐为nuxt生成NUXT开始很聪明,以检测目标并在必要时构建。

服务器目标:

  • NUXT DEV.=开发服务器
  • Nuxt建设=构建您的生产申请
  • NUXT开始=启动生产服务器(将其用于托管像heroku,数字海洋等的节点。

静态目标:

  • NUXT DEV.=开发服务器
  • nuxt生成=如果需要和静态导出,构建DIST /
  • NUXT开始=服务DIST /像静态托管一样的目录会(NetWerify,Vercel,Surge等),在部署之前非常适用于测试

接下来做什么

  • 升级您的项目nuxt@2.14.0.
  • nuxt生成代替NUXT出口
  • NUXT开始代替Nuxt服务
  • 享受快速部署
释放 全静态 框架