如何使用 rollup-plugin-visualizer 插件？

推荐答案

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

在 rollup.config.js 中配置插件：

// www.javascriptcn.com code example
import { visualizer } from 'rollup-plugin-visualizer';

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  },
  plugins: [
    visualizer({
      filename: 'stats.html', // 生成的分析文件名称
      open: true, // 是否在生成后自动打开浏览器
      template: 'treemap', // 可视化模板，可选 'sunburst', 'network', 'treemap', 'raw-data'
      gzipSize: true, // 是否显示 gzip 压缩后的大小
      brotliSize: true // 是否显示 brotli 压缩后的大小
    })
  ]
};

运行 Rollup 构建命令后，stats.html 文件将生成在项目根目录下，打开该文件即可查看打包分析结果。

本题详细解读

1. 插件的作用

rollup-plugin-visualizer 是一个用于分析 Rollup 打包结果的插件。它能够生成一个可视化的报告，帮助开发者了解打包后文件的体积分布、模块依赖关系等信息。这对于优化打包体积和性能非常有帮助。

2. 插件的安装

通过 npm 或 yarn 安装插件：

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

或

yarn add rollup-plugin-visualizer --dev

3. 插件的配置

在 rollup.config.js 中引入并配置插件：

// www.javascriptcn.com code example
import { visualizer } from 'rollup-plugin-visualizer';

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  },
  plugins: [
    visualizer({
      filename: 'stats.html', // 生成的分析文件名称
      open: true, // 是否在生成后自动打开浏览器
      template: 'treemap', // 可视化模板，可选 'sunburst', 'network', 'treemap', 'raw-data'
      gzipSize: true, // 是否显示 gzip 压缩后的大小
      brotliSize: true // 是否显示 brotli 压缩后的大小
    })
  ]
};

4. 参数说明

• filename: 生成的分析文件名称，默认为 stats.html。
• open: 是否在生成后自动打开浏览器，默认为 false。
• template: 可视化模板，可选 'sunburst', 'network', 'treemap', 'raw-data'，默认为 'treemap'。
• gzipSize: 是否显示 gzip 压缩后的大小，默认为 false。
• brotliSize: 是否显示 brotli 压缩后的大小，默认为 false。

5. 使用场景

• 优化打包体积：通过分析打包结果，找出体积较大的模块，进行优化或拆分。
• 模块依赖分析：了解模块之间的依赖关系，优化模块结构。
• 性能优化：通过分析 gzip 和 brotli 压缩后的体积，进一步优化加载性能。

6. 注意事项

• 生成的 stats.html 文件通常较大，建议在开发环境中使用，避免在生产环境中生成。
• 如果项目使用了代码分割（Code Splitting），插件可以很好地展示各个 chunk 的体积和依赖关系。