vue3打包分析图

vue 2 直接使用下面命令
npm run build --report

vue 3
以vue3+webpack为例子:

配置:
首先需要安装webpack-bundle-analyzer
命令行输入:
npm install webpack-bundle-analyzer

随后在vue.config.js配置文件进行配置
例子:


image.png

从此便已经把打包分析报告安装完成

使用:
npm run serve(启动命令)或者npm run build(打包命令)便会自动生成打包报告


image.png

效果图:


image.png

注意: 以上并没有生成一个本地的报告 如果关闭项目就无法再次打开报告

如果需要在本地生成报告文件:
在package.json文件中修改以下配置:



打包之后便会生成报告网页


image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容