コンテンツにスキップ

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

Astroが生成するバンドルの内容を理解することは、サイトのパフォーマンスを向上させるために重要です。バンドルを可視化することで、プロジェクトのどこを変更すればバンドルサイズを削減できるかのヒントを得られます。

レシピ

Section titled “レシピ”

rollup-plugin-visualizerライブラリを使用すると、Rollupバンドルを可視化して分析し、どのモジュールが容量を占めているかを確認できます。

  1. rollup-plugin-visualizerをインストールします。

    ターミナルウィンドウ
    npm install rollup-plugin-visualizer --save-dev

  2. 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",
        })]
      }
    });

  3. ビルドコマンドを実行します。

    ターミナルウィンドウ
    npm run build

  4. プロジェクトのstats.htmlファイルを見つけます 静的なサイトの場合、このファイルはdist/ディレクトリのルートにあり、バンドルに含まれる内容を確認できます。

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

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

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