跳转到内容

分析打包体积

了解 Astro 打包产物（bundle）的组成部分对于提升网站性能至关重要。将打包产物可视化可以为你提供线索，帮助你在项目中进行修改以减小其体积。

方案

章节标题：“指南”

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

  1. 安装 rollup-plugin-visualizer

    终端窗口
    npm install 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 run build

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

    对于完全静态的站点，该文件将位于 dist/ 目录的根部，它将让你看到打包产物中包含了什么。

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

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

贡献 社区 赞助