浅析webpack-bundle-analyzer在vue-cli3中的使用


Posted in Javascript onOctober 23, 2019

正常的使用方法

安装

npm install webpack-bundle-analyzer -D

webpack.config.js:

浅析webpack-bundle-analyzer在vue-cli3中的使用

vue-cli3的配置方法

根目录的vue.config.js(没有则自己创建)

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

执行以下命令即可查看到结果。

npm run serve

也可以改为独立的script

vue.config.js
module.exports = {
 chainWebpack: config => {
 if (process.env.use_analyzer) {
 config
 .plugin('webpack-bundle-analyzer')
 .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
 }
 }
}

package.json
{
 "scripts": {
 ...
 "analyzer": "use_analyzer=true npm run serve"
 }
}

那么在使用以下命令时,才会弹出analyzer

npm run analyzer

总结

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

Javascript 相关文章推荐
JQUERY获取form表单值的代码
Jul 17 Javascript
JQuery 返回布尔值Is()条件判断方法代码
May 14 Javascript
js onload事件不起作用示例分析
Oct 09 Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 Javascript
js自定义回调函数
Dec 13 Javascript
jQuery+css实现的切换图片功能代码
Jan 27 Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
webpack4 SCSS提取和懒加载的示例
Sep 03 Javascript
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
Jul 22 Javascript
微信小程序 生成携带参数的二维码
Oct 23 #Javascript
使用p5.js临摹动态图形
Oct 23 #Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 #Javascript
p5.js临摹动态图形实现方法详解
Oct 23 #Javascript
jQuery实现轮播图源码
Oct 23 #jQuery
JavaScript实现图片轮播特效
Oct 23 #Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 #jQuery
You might like
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
JS获取dom 对象 ajax操作 读写cookie函数
2009/11/18 Javascript
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
javascript实现滑动解锁功能
2017/03/22 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
轻松掌握python设计模式之策略模式
2016/11/18 Python
python numpy函数中的linspace创建等差数列详解
2017/10/13 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
Python多线程应用于自动化测试操作示例
2018/12/06 Python
Python制作动态字符图的实例
2019/01/27 Python
关于Python3 类方法、静态方法新解
2019/08/30 Python
解决pyshp UnicodeDecodeError的问题
2019/12/06 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
英国人最爱的饰品网站:Accessorize
2016/08/22 全球购物
集团公司总经理岗位职责
2013/12/20 职场文书
公司活动策划方案
2014/01/13 职场文书
消防安全责任书范本
2014/04/15 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
招标保密承诺书
2015/01/20 职场文书
写给父母的感谢信
2015/01/22 职场文书
2015年机关后勤工作总结
2015/05/26 职场文书
运动会运动员赞词
2015/07/22 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书
Docker容器harbor私有仓库部署和管理
2022/08/05 Servers