分析打包产物的大小

了解 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 项目使用了按需渲染，你将有两个 stats.html 文件。一个用于客户端，另一个用于服务器，每个都位于 dist/client 和 dist/server/ 目录的根目录下。

有关对于这些文件的详解或配置特定选项的指导，请参阅 Rollup Plugin Visualizer 文档。

:::note鉴于 Astro 独特的水合方式，该构建的打包产物不一定能代表客户端将收到的包。

该插件显示整个站点所使用的全部依赖项，但它并不会按各个页面来细分包大小。:::

贡献社区赞助