浅析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 相关文章推荐
JavaScript移除数组元素减少长度的方法
Sep 05 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
原生js实现秒表计时器功能
Feb 16 Javascript
Form表单上传文件(type="file")的使用
Aug 03 Javascript
node.js中axios使用心得总结
Nov 29 Javascript
详解Angular5 服务端渲染实战
Jan 04 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
深入理解JavaScript 箭头函数
May 30 Javascript
手写Vue弹窗Modal的实现代码
Sep 11 Javascript
layui使用label标签的方法
Sep 14 Javascript
微信小程序获取当前位置和城市名
Nov 13 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
PHP 开源框架22个简单简介
2009/08/24 PHP
PHP set_time_limit(0)长连接的实现分析
2010/03/02 PHP
PHP采集利器 Snoopy 试用心得
2011/07/03 PHP
php防止SQL注入详解及防范
2013/11/12 PHP
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
浅谈angularjs module返回对象的坑(推荐)
2016/10/21 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
2017/12/08 Javascript
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
Flask框架配置与调试操作示例
2018/07/23 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
pygame实现五子棋游戏
2019/10/29 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
python db类用法说明
2020/07/07 Python
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
武汉瑞得软件笔试题
2015/10/27 面试题
研究生毕业自我鉴定范文
2014/03/27 职场文书
先进人物事迹材料
2014/12/29 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
初中政治教学工作总结
2015/08/13 职场文书
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL