@astrojs/web-vitals

v3.0.1 GitHub npm 변경 로그

소개

이 Astro 통합을 사용하면 실제 웹사이트의 성능을 추적하고 데이터를 Astro DB에 저장할 수 있습니다. 이 데이터는 StudioCMS 대시보드에서 실제 웹사이트의 시간에 따른 성능 지표를 보여주는 데 사용됩니다.

설치

Astro를 통한 설치
직접 설치하기

다음 명령을 사용하여 패키지를 설치하고 Astro 구성에 추가합니다.
- npm
- pnpm
- yarn
Terminal window
npx astro add @astrojs/web-vitals
Terminal window
pnpm astro add @astrojs/web-vitals
Terminal window
yarn astro add @astrojs/web-vitals
새 구성을 원격 데이터베이스에 푸시합니다.
- npm
- pnpm
- yarn
Terminal window
npx astro db push
Terminal window
pnpm astro db push
Terminal window
yarn astro db push

다음 명령을 사용하여 패키지를 설치합니다.
- npm
- pnpm
- yarn
Terminal window
npm i @astrojs/web-vitals
Terminal window
pnpm add @astrojs/web-vitals
Terminal window
yarn add @astrojs/web-vitals

Astro 구성 파일에 @astrojs/web-vitals를 추가합니다.

import 
function node(userOptions: UserOptions): AstroIntegration
node from '@astrojs/node';
import 
const studioCMS: (options?: {
    sdk?: boolean | {
        cacheConfig?: boolean | {
            lifetime?: string | undefined;
        } | undefined;
    } | undefined;
    dbStartPage?: boolean | undefined;
    imageService?: {
        cdnPlugin?: "cloudinary-js" | undefined;
    } | undefined;
    defaultFrontEndConfig?: boolean | {
        htmlDefaultLanguage?: string | undefined;
        htmlDefaultHead?: {
            tag: "link" | "title" | "base" | "style" | "meta" | "script" | "noscript" | "template";
            attrs?: Record<string, string | boolean | undefined> | undefined;
            content?: string | undefined;
        }[] | undefined;
        favicon?: string | undefined;
        injectQuickActionsMenu?: boolean | undefined;
    } | undefined;
    dashboardConfig?: {
        dashboardEnabled?: boolean | undefined;
        inject404Route?: boolean | undefined;
        faviconURL?: string | undefined;
        dashboardRouteOverride?: string | undefined;
        AuthConfig?: {
            providers?: {
                github?: boolean | undefined;
                discord?: boolean | undefined;
                google?: boolean | undefined;
                auth0?: boolean | undefined;
                usernameAndPassword?: boolean | undefined;
                usernameAndPasswordConfig?: {
                    allowUserRegistration?: boolean | undefined;
                } | undefined;
            } | undefined;
            enabled?: boolean | undefined;
        } | undefined;
        developerConfig?: {
            demoMode?: false | {
                password: string;
                username ...
StudioCMS Integration
A CMS built for Astro by the Astro Community for the Astro Community.
@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(): AstroIntegration[]
db from '@astrojs/db';
import 
function webVitals({ deprecated }?: {
    deprecated?: boolean;
}): AstroIntegration
webVitals from '@astrojs/web-vitals';
import { 
function defineConfig<const TLocales extends Locales = never, const TDriver extends SessionDriverName = never>(config: AstroUserConfig<TLocales, TDriver>): AstroUserConfig<TLocales, TDriver>
See the full Astro Configuration API Documentation
https://astro.build/config
defineConfig } from 'astro/config';

export default 
defineConfig<never, never>(config: AstroUserConfig<never, never>): AstroUserConfig<never, never>
See the full Astro Configuration API Documentation
https://astro.build/config
defineConfig({
   
AstroUserConfig<TLocales extends Locales = never, TSession extends SessionDriverName = 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>.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>.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 for Netlify, Vercel, and more to engage Astro SSR.
See our On-demand Rendering guide for more on SSR, and our deployment guides for a complete list of hosts.
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>.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(): AstroIntegration[]
db(), // 필수
       
function webVitals({ deprecated }?: {
    deprecated?: boolean;
}): AstroIntegration
webVitals(),
       
function studioCMS(options?: {
    sdk?: boolean | {
        cacheConfig?: boolean | {
            lifetime?: string | undefined;
        } | undefined;
    } | undefined;
    dbStartPage?: boolean | undefined;
    imageService?: {
        cdnPlugin?: "cloudinary-js" | undefined;
    } | undefined;
    defaultFrontEndConfig?: boolean | {
        htmlDefaultLanguage?: string | undefined;
        htmlDefaultHead?: {
            tag: "link" | "title" | "base" | "style" | "meta" | "script" | "noscript" | "template";
            attrs?: Record<string, string | boolean | undefined> | undefined;
            content?: string | undefined;
        }[] | undefined;
        favicon?: string | undefined;
        injectQuickActionsMenu?: boolean | undefined;
    } | undefined;
    dashboardConfig?: {
        dashboardEnabled?: boolean | undefined;
        inject404Route?: boolean | undefined;
        faviconURL?: string | undefined;
        dashboardRouteOverride?: string | undefined;
        AuthConfig?: {
            providers?: {
                github?: boolean | undefined;
                discord?: boolean | undefined;
                google?: boolean | undefined;
                auth0?: boolean | undefined;
                usernameAndPassword?: boolean | undefined;
                usernameAndPasswordConfig?: {
                    allowUserRegistration?: boolean | undefined;
                } | undefined;
            } | undefined;
            enabled?: boolean | undefined;
        } | undefined;
        developerConfig?: {
            demoMode?: false | {
                password: string;
                username ...
StudioCMS Integration
A CMS built for Astro by the Astro Community for the Astro Community.
@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

새 구성을 원격 데이터베이스에 푸시합니다.
- npm
- pnpm
- yarn
Terminal window
npx astro db push
Terminal window
pnpm astro db push
Terminal window
yarn astro db push