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:【小程序云开发】中高级前端面试题库(源码:小程序中联系我哟)。
---------- 创作不易,感谢大家,请多多支持!
更多推荐
已为社区贡献16条内容
所有评论(0)