分析打包大小

了解 Astro 的打包产物有哪些组成部分，对于提高网站性能很重要。对打包产物进行可视化，可以为减少你项目中的打包大小提供线索。

方案

段落标题 方案

rollup-plugin-visualizer 库允许你可视化和分析你的 Rollup 打包产物，看看哪些模块正在占用空间。

1. 安装 rollup-plugin-visualizer：

   npm

   npm install rollup-plugin-visualizer --save-dev

   pnpm

   pnpm add rollup-plugin-visualizer --save-dev

   Yarn

   yarn add 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

   npm run build

   pnpm

   pnpm build

   Yarn

   yarn build

4. 找到你项目中的 stats.html 文件。

   对于完全静态的站点，它将会位于你的 dist/ 目录的根目录下，并允许你查看打包产物中包含的内容。

   如果你的 Astro 项目使用了按需渲染，你将有两个 stats.html 文件。一个用于客户端，另一个用于服务器，每个都位于 dist/client 和 dist/server/ 目录的根目录下。

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

注意

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

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