Analyze bundle size

本頁內容尚未翻譯。

Understanding what is a part of an Astro bundle is important for improving site performance. Visualizing the bundle can give clues as to where changes can be made in your project to reduce the bundle size.

Recipe

The rollup-plugin-visualizer library allows you to visualize and analyze your Rollup bundle to see which modules are taking up space.

Install 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
```

Add the plugin to the astro.config.mjs file:

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

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

Run the build command:
- npm
- pnpm
- Yarn
```
  npm run build
```
```
  pnpm build
```
```
  yarn build
```
Find the stats.html file(s) for your project.

This will be at the root of your dist/ directory for entirely static sites and will allow you to see what is included in the bundle.

If your Astro project uses on-demand rendering, you will have two stats.html files. One will be for the client, and the other for the server, and each will be located at the root of the dist/client and dist/server/ directories.

See the Rollup Plugin Visualizer documentation for guidance on how to interpret these files, or configure specific options.

:::noteGiven Astro's unique approach to hydration, the build isn't necessarily representative of the bundlethat the client will receive.

The Rollup visualizer shows all dependencies that are used across the site, but it does not break down the bundle size on a per-page basis.:::

貢獻社群贊助