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:【小程序云开发】中高级前端面试题库(源码:小程序中联系我哟)。
    ---------- 创作不易,感谢大家,请多多支持!
    在这里插入图片描述
Logo

前往低代码交流专区

更多推荐