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 "
·
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:【小程序云开发】中高级前端面试题库(源码:小程序中联系我哟)。
---------- 创作不易,感谢大家,请多多支持!
更多推荐



所有评论(0)