vue3.x:用webpack-bundle-analyzer分析chunk文件过大的原因(vue.js 3.0.5/@vue/cli 4.5.13)
2023-09-14 09:01:18 时间
一,安装webpack-bundle-analyzer插件:
liuhongdi@lhdpc:/data/vue/vue3index$ npm install webpack-bundle-analyzer --save-dev
说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取: https://github.com/liuhongdi/
说明:作者:刘宏缔 邮箱: 371125307@qq.com
二,对webpack-bundle-analyzer进行配置:
在vue.config.js中增加:
chainWebpack: config => { config .plugin('webpack-bundle-analyzer') .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) },
和configureWebpack并列即可
三,测试效果:
运行:
liuhongdi@lhdpc:/data/vue/vue3index$ npm run serve
输出中会有提示:
Webpack Bundle Analyzer is started at http://127.0.0.1:8888
访问:
http://127.0.0.1:8888
效果如图:
点击这个色块可以放大查看,可以看到echarts占用了大量的体积
四,查看@vue/cli版本:
liuhongdi@lhdpc:/data/vue/vue3index$ vue --version @vue/cli 4.5.13
相关文章
- Vue3 getters打印结果是Proxy对象,怎么获取其中的值?
- vue3:vue+nginx+php进行服务端部署的配置(nginx/1.18.0 / vue@3.2.37)
- vue3: 动态修改favicon(网站的ico 图标)(vue@3.2.26)
- vue3面试题:2022 最新前端 Vue 3.0 面试题及答案(持续更新中……)
- vue3中的getCurrentInstance
- vue3 - 报错 ESLint: Component name "index" should always be multi-word.(vue/multi-word-component-names)
- vue3中 toRefs和 toRef 的区别
- vue3报错 Vue received a Component which was made a reactive object.
- Vue3学习笔记(七)—— 状态管理、Vuex、Pinia
- Vue3学习笔记(四)——组件、插槽、生命周期、Hooks
- Vue3学习笔记(一)——MVC与vue3概要、模板、数据绑定与综合示例
- 从0搭建Vue3组件库(五): 如何使用Vite打包组件库
- vue3 + element plus + vite 迁移实践
- 整理的一些Vue3知识点
- 7个你需要知道的Vue3技巧
- vue3 ref 和reactive的区别
- 学习vue3系列生命周期
- Vue3实现滚动加载动画效果
- 【Vue3+TS】Axios拦截器封装及跨域 [cors] 解决方案