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

原创已于 2023-11-09 22:05:13 修改 · 4.4k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-05-06 19:01:57 首次发布

Vue 同时被 2 个专栏收录

15 篇文章

订阅专栏

项目性能优化实战

2 篇文章

订阅专栏

本文介绍了如何在Vite+Vue3.2的环境中使用rollup-plugin-visualizer插件生成构建报告，通过分析文件大小、依赖关系等信息来提升应用性能和可维护性。通过配置插件并运行打包命令，可以生成交互式HTML报告，帮助识别性能瓶颈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

rollup-plugin-visualizer是一个用于Rollup构建工具的插件，它可以生成可视化的构建报告，帮助开发者更好地了解构建过程中的文件大小、依赖关系等信息。

使用rollup-plugin-visualizer插件，可以在构建完成后生成一个交互式的HTML报告，其中包含了构建过程中的各种统计信息，如文件大小、依赖关系、模块数量等。它提供了多种模式的依赖分析，包括直观的视图分析，sunburst（循环层次图，像光谱）、treemap（矩形层次图，看起来比较直观，也是默认参数）、network（网格图，查看包含关系）、raw-data（原数据模式，json格式）, list(列表模式),

本篇博客将在vite+vue3.2的项目环境，使用rollup-plugin-visualizer插件分析打包体积、依赖关系等信息视图，了解构建过程中的性能瓶颈和优化方向，从而提高应用程序的性能和可维护性。

官方地址：https://github.com/btd/rollup-plugin-visualizer

一、安装rollup-plugin-visualizer

首先随意找一个你想加速的项目，进入终端：

npm安装：npm install --save-dev rollup-plugin-visualizer
yarn安装：yarn add --dev rollup-plugin-visualizer

然后配置vite.config.ts中的插件如下，具体来说首先引入模块，然后找到plugins模块，在其中加入visualizer插件。

// 引入rollup-plugin-visualizer模块
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  plugins: [
    vue(),
    visualizer({
        open:true,  //注意这里要设置为true，否则无效
        filename: "stats.html", //分析图生成的文件名
        gzipSize: true, // 收集 gzip 大小并将其显示
        brotliSize: true, // 收集 brotli 大小并将其显示
    })
  ],
})