バンドルサイズを分析する

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/ディレクトリのルートにあり、バンドルに含まれる内容を確認できます。

Astroプロジェクトがオンデマンドレンダリングを使用している場合、2つのstats.htmlファイルが生成されます。1つはクライアント用、もう1つはサーバー用で、それぞれdist/clientとdist/server/ディレクトリのルートに配置されます。

これらのファイルの解釈方法や特定のオプションの設定方法については、Rollup Plugin Visualizerのドキュメントを参照してください。

:::noteAstro独自のハイドレーションアプローチを考慮すると、ビルドは必ずしもクライアントが受け取るバンドルを表しているわけではありません。

Rollup visualizerはサイト全体で使用されるすべての依存関係を表示しますが、ページごとのバンドルサイズの内訳は表示しません。:::

貢献するコミュニティスポンサー