打包体积分析插件 vue3 (vite) ——rollup-plugin-visualizer，webpack——webpack-bundle-analyzer

使用打包工具在帮我门分析打包结果进而来做优化
在用vite打包是通过rollup来完成的

安装

这里的打包体积优化是需要在开发环境下的 所以不能在生产环境下安装的

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

在vite.config.js中配置如下

import { defineConfig, type PluginOption } from "vite";//引入ts类型
import { visualizer } from "rollup-plugin-visualizer"; // 引入打包分析


//在plugins里面引入
 plugins:[
    visualizer({
      open: true,//打完包后是否打开文件
      filename: "stats.html", // 打包分析文件名
      gzipSize: true, // 打包gzip大小统计
      brotliSize: true,  // 打包brotli大小统计
    }) as  PluginOption,// 打包分析
  ],

使用npm run build打包后即可看见
rollup-plugin-visualizer国内镜像https://gitcode.com/gh_mirrors/ro/rollup-plugin-visualizer#%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E
rollup-plugin-visualizer源码和API地址https://github.com/btd/rollup-plugin-visualizer

在使用webpack打包

npm i webpack-bundle-analyzer -D

在vue.config.js中去做配置

cosnt BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
let B_A_Plugin = new BundleAnalyzerPlugin();//引入


plugins:[B_A_Plugin];//配置到config.js中的plugins里去

重新进行打包即可——npm run build
下面是源码和API地址
webpack-bundle-analyzer源码和API https://www.npmjs.com/package/webpack-bundle-analyzer