Анализ размера сборки

Понимание того, что входит в итоговую сборку Astro, важно для оптимизации производительности сайта. Визуализация бандла поможет найти модули, которые занимают слишком много места, и принять меры по их оптимизации.

Инструкция

Библиотека rollup-plugin-visualizer позволяет анализировать сборку Rollup и видеть, какие модули вносят наибольший вклад в её размер.

Установите rollup-plugin-visualizer:
- npm
- pnpm
- Yarn
Окно терминала
npm install rollup-plugin-visualizer --save-dev
Окно терминала
pnpm add rollup-plugin-visualizer --save-dev
Окно терминала
yarn add rollup-plugin-visualizer --save-dev

Добавьте плагин в файл astro.config.mjs:

// @ts-check
import { defineConfig } from 'astro/config';
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
vite: {
    plugins: [visualizer({
        emitFile: true,
        filename: "stats.html",
    })]
}
});

Запустите команду сборки:
- npm
- pnpm
- Yarn
Окно терминала
npm run build
Окно терминала
pnpm build
Окно терминала
yarn build
Найдите файл(ы) stats.html в вашем проекте.

В полностью статических сайтах файл появится в корне директории dist/. Откройте его в браузере, чтобы увидеть интерактивную карту вашего бандла.

Если вы используете рендеринг по запросу (SSR), вы получите два файла: один для клиента (в dist/client/) и один для сервера (в dist/server/).