跳转到内容

分析打包大小

了解 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 文档。