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

这篇具有很好参考价值的文章主要介绍了【vite+vue3.2 项目性能优化实战】打包体积分析插件rollup-plugin-visualizer视图分析。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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 大小并将其显示
    })
  ],
})