分析包大小

了解 Astro 包的一部分对于提高站点性能非常重要。可视化包可以提供有关可以在项目中进行哪些更改以减小包大小的线索。

¥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

rollup-plugin-visualizer 库允许你可视化和分析你的 Rollup 包，以查看哪些模块占用了空间。

¥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.