浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】


Posted in Javascript onOctober 23, 2019

为优化vue项目性能,需要使用webpack-bundle-analyzer分析报文件,找出最占用空间的插件有哪些,对应做出优化

网上看了一些网站,有的写的太麻烦了,现将最简单的一种写出来供大家参考

安装:

npm install webpack-bundle-analyzer --save-dev

vue.config.js配置

module.exports = {
 chainWebpack: config => {
  config
   .plugin('webpack-bundle-analyzer')
   .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
 }
}

运行命令

npm run serve

访问 http://localhost:8888

  注意8888端口是写死的,不可以更改,如果本地已经启动了8888端口,会报错

页面展示

浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】

总结

以上所述是小编给大家介绍的vue-cli3配置webpack-bundle-analyzer插件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
添加到收藏夹代码(兼容几乎所有的浏览器)
Jan 09 Javascript
jquery cookie的用法总结
Nov 18 Javascript
js和jquery中循环的退出和继续学习记录
Sep 06 Javascript
JS实现HTML表格排序功能
Aug 05 Javascript
Vuejs第十二篇之动态组件全面解析
Sep 09 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 Javascript
详解jQuery中的事件
Dec 14 Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
JS抛物线动画实例制作
Feb 24 Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 #Javascript
jQuery实现轮播图源码
Oct 23 #jQuery
JavaScript实现图片轮播特效
Oct 23 #Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 #jQuery
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 #Javascript
Vue实现数据请求拦截
Oct 23 #Javascript
Vue项目中如何使用Axios封装http请求详解
Oct 23 #Javascript
You might like
咖啡豆的最常见发酵处理方法,详细了解一下
2021/03/03 冲泡冲煮
PHP的FTP学习(二)[转自奥索]
2006/10/09 PHP
ASP知识讲座四
2006/10/09 PHP
php下实现伪 url 的超简单方法[转]
2007/09/24 PHP
php一些公用函数的集合
2008/03/27 PHP
PHP缓存机制Output Control详解
2014/07/14 PHP
PHP中的Session对象如何使用
2015/09/25 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
JS实现读取xml内容并输出到div中的方法示例
2018/04/19 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
Python中编写ORM框架的入门指引
2015/04/29 Python
python requests指定出口ip的例子
2019/07/25 Python
Python对接支付宝支付自实现功能
2019/10/10 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
Python argparse模块应用实例解析
2019/11/15 Python
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
高一家长会邀请函
2014/01/12 职场文书
诉前财产保全担保书
2014/05/20 职场文书
争先创优心得体会
2014/09/12 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
工作所在部门证明
2014/09/21 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
党风廉政建设调研报告
2015/01/01 职场文书
看看如何用Python绘制小米新版天价logo
2021/04/20 Python
JVM之方法返回地址详解
2022/02/28 Java/Android