rollup-plugin-visualizer是一個(gè)用于Rollup構(gòu)建工具的插件，它可以生成可視化的構(gòu)建報(bào)告，幫助開發(fā)者更好地了解構(gòu)建過程中的文件大小、依賴關(guān)系等信息。
使用rollup-plugin-visualizer插件，可以在構(gòu)建完成后生成一個(gè)交互式的HTML報(bào)告，其中包含了構(gòu)建過程中的各種統(tǒng)計(jì)信息，如文件大小、依賴關(guān)系、模塊數(shù)量等。它提供了多種模式的依賴分析，包括直觀的視圖分析，sunburst（循環(huán)層次圖，像光譜）、treemap（矩形層次圖，看起來比較直觀，也是默認(rèn)參數(shù)）、network（網(wǎng)格圖，查看包含關(guān)系）、raw-data（原數(shù)據(jù)模式，json格式）, list(列表模式),
本篇博客將在vite+vue3.2的項(xiàng)目環(huán)境，使用rollup-plugin-visualizer插件分析打包體積、依賴關(guān)系等信息視圖，了解構(gòu)建過程中的性能瓶頸和優(yōu)化方向，從而提高應(yīng)用程序的性能和可維護(hù)性。
官方地址：https://github.com/btd/rollup-plugin-visualizer
一、安裝rollup-plugin-visualizer
首先隨意找一個(gè)你想加速的項(xiàng)目，進(jìn)入終端：
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, //注意這里要設(shè)置為true，否則無效
filename: "stats.html", //分析圖生成的文件名
gzipSize: true, // 收集 gzip 大小并將其顯示
brotliSize: true, // 收集 brotli 大小并將其顯示
})
],
})
其他選項(xiàng)可以看官網(wǎng)說明。（注意：網(wǎng)上不少教程里的參數(shù)部分已經(jīng)過時(shí)了，本教程也不一定未來適用，以官網(wǎng)readme為準(zhǔn)）
二、運(yùn)行命令打包，生成分析圖
輸入npm run build 或者vite run build打包項(xiàng)目，等待片刻，生成分析視圖，視圖會(huì)自動(dòng)跳出來，并保存在項(xiàng)目根目錄下，文件名就是剛剛參數(shù)filename的名字（stats.html）
視圖分析中方塊越大，表示該文件占用的空間越大，對(duì)于網(wǎng)絡(luò)帶寬和訪問速度的要求就越高。如果一個(gè)網(wǎng)站中包含大量的大文件，那么用戶在訪問該網(wǎng)站時(shí)需要下載更多的數(shù)據(jù)，這會(huì)導(dǎo)致網(wǎng)站加載速度變慢，用戶體驗(yàn)變差。文章來源：http://www.zghlxwxcb.cn/news/detail-471997.html
對(duì)應(yīng)的在控制臺(tái)也會(huì)打印對(duì)應(yīng)打包結(jié)果：
文章來源地址http://www.zghlxwxcb.cn/news/detail-471997.html
到了這里，關(guān)于【vite+vue3.2 項(xiàng)目性能優(yōu)化實(shí)戰(zhàn)】打包體積分析插件rollup-plugin-visualizer視圖分析的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
