@astrojs/web-vitals

v4.0.0 GitHub npm Changelog

Einführung

Diese Astro-Integration ermöglicht die Verfolgung der realen Website-Leistung und die Speicherung der Daten in der Astro-DB. Diese Daten werden im StudioCMS-Dashboard verwendet, um die Leistungsmetriken deiner Website aus der realen Welt im Laufe der Zeit anzuzeigen.

Installiere das Paket und füge es mit dem folgenden Befehl zu deiner Astro-Konfiguration hinzu:
- npm
- pnpm
- yarn
Terminal-Fenster
npx astro add @astrojs/web-vitals
Terminal-Fenster
pnpm astro add @astrojs/web-vitals
Terminal-Fenster
yarn astro add @astrojs/web-vitals
Übertrage die neue Konfiguration auf deine Ferndatenbank:
- npm
- pnpm
- yarn
Terminal-Fenster
npx astro db push
Terminal-Fenster
pnpm astro db push
Terminal-Fenster
yarn astro db push

Installiere das Paket mit dem folgenden Befehl:
- npm
- pnpm
- yarn
Terminal-Fenster
npm i @astrojs/web-vitals
Terminal-Fenster
pnpm add @astrojs/web-vitals
Terminal-Fenster
yarn add @astrojs/web-vitals

Füge @astrojs/web-vitals zu deiner Astro-Konfigurationsdatei hinzu:

import 
function node(userOptions: UserOptions): AstroIntegration
node from '@astrojs/node';
import 
const studioCMS: () => AstroIntegration
StudioCMS Integration
StudioCMS is an open-source headless CMS built for Astro, by members of the Astro community.
To configure StudioCMS, create a studiocms.config.* file in the root of your Astro project.
Then, import the defineStudioCMSConfig function from studiocms/config and export the configuration as the default export.

Note: Supported config file extensions are .ts, .js, .mts, and .mjs.
@see ― The GitHub Repo: withstudiocms/studiocms for more information on how to contribute to StudioCMS.
@see ― The StudioCMS Docs for more information on how to use StudioCMS.
studioCMS from 'studiocms';
import 
function db(options?: AstroDBConfig): AstroIntegration[]
db from '@astrojs/db';
import 
import webVitals
webVitals from '@astrojs/web-vitals';Error ts(2307)  ― Cannot find module '@astrojs/web-vitals' or its corresponding type declarations.
import { 
function defineConfig<const TLocales extends Locales = never, const TDriver extends SessionDriverName = never, const TFontFamilies extends FontFamily[] = never>(config: AstroUserConfig<TLocales, TDriver, TFontFamilies>): AstroUserConfig<TLocales, TDriver, TFontFamilies>
See the full Astro Configuration API Documentation
https://astro.build/config
defineConfig } from 'astro/config';

export default 
defineConfig<never, never, never>(config: AstroUserConfig<never, never, never>): AstroUserConfig<never, never, never>
See the full Astro Configuration API Documentation
https://astro.build/config
defineConfig({
   
AstroUserConfig<TLocales extends Locales = never, TSession extends SessionDriverName = never, TFontFamilies extends FontFamily[] = never>.site?: string@name ― site
@type ― {string}
@description 
Your final, deployed URL. Astro uses this full URL to generate your sitemap and canonical URLs in your final build. It is strongly recommended that you set this configuration to get the most out of Astro.
{
  site: 'https://www.my-site.dev'
}
site: 'https://demo.studiocms.dev/',
   
AstroUserConfig<TLocales extends Locales = never, TSession extends SessionDriverName = never, TFontFamilies extends FontFamily[] = never>.output?: "server" | "static"@name ― output
@type ― {('static' | 'server')}
@default ― 'static'
@see ― adapter *
@description 
Specifies the output target for builds.

'static' - Prerender all your pages by default, outputting a completely static site if none of your pages opt out of prerendering.
'server' - Use server-side rendering (SSR) for all pages by default, always outputting a server-rendered site.

import { defineConfig } from 'astro/config';

export default defineConfig({
  output: 'static'
})
output: 'server',
   
AstroUserConfig<TLocales extends Locales = never, TSession extends SessionDriverName = never, TFontFamilies extends FontFamily[] = never>.adapter?: AstroIntegration@name ― adapter
@see ― output *
@description 
Deploy to your favorite server, serverless, or edge host with build adapters. Import one of our first-party adapters (Cloudflare, Netlify, Node.js, Vercel) or explore community adapters to enable on-demand rendering in your Astro project.
See our on-demand rendering guide for more on Astro's server rendering options.
import netlify from '@astrojs/netlify';
{
  // Example: Build for Netlify serverless deployment
  adapter: netlify(),
}
adapter: 
function node(userOptions: UserOptions): AstroIntegration
node({ 
UserOptions.mode: "standalone" | "middleware"
Specifies the mode that the adapter builds to.

'middleware' - Build to middleware, to be used within another Node.js server, such as Express.
'standalone' - Build to a standalone server. The server starts up just by running the built script.
mode: "standalone" }),
   
AstroUserConfig<TLocales extends Locales = never, TSession extends SessionDriverName = never, TFontFamilies extends FontFamily[] = never>.integrations?: (false | AstroIntegration | (false | AstroIntegration | null | undefined)[] | null | undefined)[]@name ― integrations
@description 
Extend Astro with custom integrations. Integrations are your one-stop-shop for adding framework support (like Solid.js), new features (like sitemaps), and new libraries (like Partytown).
Read our Integrations Guide for help getting started with Astro Integrations.
import react from '@astrojs/react';
import mdx from '@astrojs/mdx';
{
  // Example: Add React + MDX support to Astro
  integrations: [react(), mdx()]
}
integrations: [
       
function db(options?: AstroDBConfig): AstroIntegration[]
db(), // ERFORDERLICH
       
import webVitals
webVitals(),
       
function studioCMS(): AstroIntegration
StudioCMS Integration
StudioCMS is an open-source headless CMS built for Astro, by members of the Astro community.
To configure StudioCMS, create a studiocms.config.* file in the root of your Astro project.
Then, import the defineStudioCMSConfig function from studiocms/config and export the configuration as the default export.

Note: Supported config file extensions are .ts, .js, .mts, and .mjs.
@see ― The GitHub Repo: withstudiocms/studiocms for more information on how to contribute to StudioCMS.
@see ― The StudioCMS Docs for more information on how to use StudioCMS.
studioCMS(),
   ],
});

npm i @astrojs/web-vitals

pnpm add @astrojs/web-vitals

yarn add @astrojs/web-vitals

Übertrage die neue Konfiguration auf deine remote Datenbank:
- npm
- pnpm
- yarn
Terminal-Fenster
npx astro db push
Terminal-Fenster
pnpm astro db push
Terminal-Fenster
yarn astro db push