Rollup Plugin Visualizer 使用教程

最新推荐文章于 2024-08-27 14:54:15 发布

平樱玫Duncan

最新推荐文章于 2024-08-27 14:54:15 发布

阅读量1.2k

点赞数 19

本文链接：https://blog.csdn.net/gitblog_00626/article/details/141044401

版权

Rollup Plugin Visualizer 使用教程

rollup-plugin-visualizer📈⚖️ Visuallize your bundle项目地址:https://gitcode.com/gh_mirrors/ro/rollup-plugin-visualizer

项目介绍

Rollup Plugin Visualizer 是一个用于 Rollup 构建工具的插件，它可以生成可视化的构建报告，帮助开发者更好地了解构建过程中的文件大小、依赖关系等信息。通过这个插件，开发者可以在构建完成后生成一个交互式的 HTML 报告，其中包含了构建过程中的各种统计信息，如文件大小、依赖关系、模块数量等。

项目快速启动

安装

首先，你需要在你的项目中安装 rollup-plugin-visualizer。你可以使用 npm 或 yarn 进行安装：

npm install --save-dev rollup-plugin-visualizer
# 或者使用 yarn
yarn add --dev rollup-plugin-visualizer

配置

安装完成后，在你的 Rollup 配置文件中添加 rollup-plugin-visualizer 插件。以下是一个示例配置：

// rollup.config.js
import { visualizer } from "rollup-plugin-visualizer";

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    visualizer({
      open: true, // 构建完成后自动打开分析报告
      filename: "stats.html", // 生成的分析报告文件名
      gzipSize: true, // 收集 gzip 大小并显示
      brotliSize: true // 收集 brotli 大小并显示
    })
  ]
};

运行

配置完成后，运行你的 Rollup 构建命令：

npm run build
# 或者使用 yarn
yarn build

构建完成后，你会在项目根目录下看到生成的 stats.html 文件，打开这个文件即可查看构建分析报告。

应用案例和最佳实践

应用案例

假设你有一个 Vue 3 + Vite 项目，你可以使用 rollup-plugin-visualizer 来分析打包体积和依赖关系。以下是一个具体的应用案例：

安装插件：

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

配置 Vite：

// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  plugins: [
    vue(),
    visualizer({
      open: true,
      filename: "stats.html",
      gzipSize: true,
      brotliSize: true
    })
  ]
});