Vue3 + vite 和 Vue2+webpack 打包后查看资源占比

1. Vue3 + Vite 中Vite使用的rollup 打包，所以用 rollup-plugin-visualizer --save-dev插件来进行打包体积大小的分析

• 安装插件

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

• 在vite.config.js 或者 vite.confg.ts中使用

import { visualizer } from "rollup-plugin-visualizer";
  plugins: [vue(), visualizer()], // plugins中加入visualizer()

• 执行打包后会生成一个stas.html
  

2. Vue2 + webpack用的webpack打包，所以用webpack-bundle-analyzer插件来进行打包体积大小的分析

• 安装插件

yarn add webpack-bundle-analyzer

• 使用 在package.json 中加入 --report
  
• 打包后会生成可视化文件占比
  
  Tips：【小程序云开发】中高级前端面试题库（源码：小程序中联系我哟）。
  ---------- 创作不易，感谢大家，请多多支持！