通过 100 多个技巧学习 Nuxt!

nuxt-capo

Nuxt 的 Capo.js 实现

Nuxt 的 capo.js

npm versionnpm downloadsGithub ActionsCodecov

capo.jsNuxt 3 实现

什么是 Capo.js

Capo.js 是一个小代码片段,它通过更改页面 <head> 部分中元素的顺序,来识别提高页面(感知)性能的方法。

特性

  • ✨ 在开发模式和预渲染页面时验证你的 <head>
  • 🔎 可视化最佳 head 配置

安装

安装并将 nuxt-capo 添加到你的 nuxt.config

npx nuxi@latest module add capo
export default defineNuxtConfig({
  modules: ['nuxt-capo'],
})

用法

就这样!现在,当服务器渲染你的路由时,你应该会看到调试信息和建议

Optimal head configurationSuggestions for head

鸣谢

感谢 @rviscomi 创建了 capo.js

💻 开发

  • 克隆此存储库
  • 使用 corepack enable 启用 Corepack (对于 Node.js < 16.10,使用 npm i -g corepack)
  • 使用 pnpm install 安装依赖项
  • 使用 pnpm dev:prepare 桩模块
  • 运行 pnpm dev 以在开发模式下启动 playground

许可证

用 ❤️ 制作

MIT 许可证下发布。