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

其他选项可以看官网说明。(注意:网上不少教程里的参数部分已经过时了,本教程也不一定未来适用,以官网readme为准)

二、运行命令打包,生成分析图

输入npm run build 或者vite run build打包项目,等待片刻,生成分析视图,视图会自动跳出来,并保存在项目根目录下,文件名就是刚刚参数filename的名字(stats.html)

在这里插入图片描述

视图分析中方块越大,表示该文件占用的空间越大,对于网络带宽和访问速度的要求就越高。如果一个网站中包含大量的大文件,那么用户在访问该网站时需要下载更多的数据,这会导致网站加载速度变慢,用户体验变差。

对应的在控制台也会打印对应打包结果:
【vite+vue3.2 项目性能优化实战】打包体积分析插件rollup-plugin-visualizer视图分析_第1张图片

你可能感兴趣的:(项目性能优化实战,Vue,vue.js,javascript,前端)