Vite rollup-plugin-visualizer插件的使用

留言


https://www.google.com/search?q=Rollup+Plugin+Visualizer%60

rollup-plugin-visualizer

vue3+vite打包视图分析(rollup-plugin-visualizer)+gzip

【vite+vue3.2 项目性能优化实战】打包体积分析插件rollup-plugin-visualizer视图分析



Rollup Plugin Visualizer 是一个用于 Rollup 和 Vite 的插件，主要用于可视化构建后的包大小和依赖关系，帮助开发者分析项目中各个模块的体积和依赖情况，从而更好地进行优化。它通过生成可交互的图表，让你清晰地知道哪些文件占用了较大的体积，哪些依赖模块可能导致打包后的文件过大。

具体功能：

  1. 模块大小可视化：

    • 该插件会为你生成一个图表，展示每个依赖包或模块的大小，让你可以直观地看到打包后每个模块占用的空间。例如：你可以看到哪些模块是体积较大的第三方库，哪些是你自己写的代码。

  2. 依赖关系分析：

    • 通过可视化的方式明确哪些模块依赖了哪些其他模块，帮助你了解项目的依赖结构，便于进行依赖的优化和精简。

  3. 分包信息展示：

    • 如果你配置了代码分包（Code Splitting），该插件可以展示不同包的大小及其相互关系，帮助你判断是否需要进一步优化分包策略。

  4. 多种图表模式：

    • 矩形树图（treemap）：显示不同模块的文件层级关系和大小。
    • 圆形图（sunburst）：使用同心圆的方式展示模块的层级关系和大小。
    • 网络图（network graph）：展示模块之间的依赖关系。

  5. 识别大体积依赖：

    • 通过图表，你可以快速识别出哪些第三方库体积过大，进而考虑通过 CDN 或 懒加载 等方式进行优化。

  6. 支持 JSON 输出：

    • 除了生成可交互的 HTML 文件，插件还支持导出 JSON 格式的构建报告，方便进一步分析或集成到其他工具中。

使用场景：

  • 打包优化：

    • 在开发大型项目时，打包后的文件可能很庞大。通过使用 Rollup Plugin Visualizer，你可以很轻松地找到文件体积较大的依赖库或模块，帮助你决定是否需要对其进行优化或从打包中剔除。

  • 依赖分析：

    • 如果项目中有很多第三方库，通过该插件你可以清楚地看到每个依赖库的大小，从而判断是否需要通过 CDN 引入或进行按需加载。

如何使用：

  1. 安装插件：

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

  2. 在 Vite 或 Rollup 配置文件中引入并配置：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    import { visualizer } from 'rollup-plugin-visualizer';

    export default {
      plugins: [
        visualizer({
          filename: './stats.html',  // 输出的HTML文件名
          open: true,  // 在构建后自动打开分析报告
        }),
      ],
    };

  3. 运行构建命令（如 npm run build），生成的报告将会展示打包后的文件大小及其依赖关系。

总结：

Rollup Plugin Visualizer 是一个非常有用的工具，尤其是在项目规模较大、依赖较多时，能够帮助开发者直观地了解哪些模块占用了较大的文件体积，从而有针对性地进行打包优化。