@astrojs/web-vitals

简介

该 Astro 集成支持跟踪真实世界的网站性能数据并将数据存储在 Astro DB 中。这些数据会在 StudioCMS 仪表盘中展示您的网站随时间变化的真实性能指标。

安装步骤

Astro 安装方式

1. 安装软件包并将其添加到 Astro 配置中：

   npm

   npx astro add @astrojs/web-vitals

   pnpm

   pnpm astro add @astrojs/web-vitals

   yarn

   yarn astro add @astrojs/web-vitals

2. 将新配置推送到您的远程数据库：

   npm

   npx astro db push

   pnpm

   pnpm astro db push

   yarn

   yarn astro db push

手动安装方式

1. 使用以下命令安装软件包：

   npm

   npm i @astrojs/web-vitals

   pnpm

   pnpm add @astrojs/web-vitals

   yarn

   yarn add @astrojs/web-vitals

2. 将 @astrojs/web-vitals 添加到您的 Astro 配置文件：

   astro.config.mjs

   import node from '@astrojs/node';
   import studioCMS from 'studiocms';
   import db from '@astrojs/db';
   import webVitals from '@astrojs/web-vitals'; // 导入网页指标集成
   import { defineConfig } from 'astro/config';
   
   export default defineConfig({
      site: 'https://demo.studiocms.dev/',
      output: 'server',
      adapter: node({ mode: "standalone" }),
      integrations: [
          db(), // 必须项
          webVitals(), // 启用网页指标跟踪
          studioCMS(), // StudioCMS 核心集成
      ],
   });

3. 将新配置推送到您的远程数据库：

   npm

   npx astro db push

   pnpm

   pnpm astro db push

   yarn

   yarn astro db push