浅析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 题型问答有答案参考
Feb 17 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
Nov 30 Javascript
javascript中的循环语句for语句深入理解
Apr 04 Javascript
js处理php输出时间戳对不上号的解决方法
Jun 20 Javascript
浅谈javascript的分号的使用
May 12 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 Javascript
浏览器调试动态js脚本的方法(图解)
Jan 19 Javascript
vue 组件 全局注册和局部注册的实现
Feb 28 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
Sep 05 Javascript
uni-app如何实现增量更新功能
Jan 03 Javascript
JS数组方法join()用法实例分析
Jan 18 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 翻页 实例代码
2009/08/07 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
2014/05/05 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
JavaScript实现级联菜单的方法
2015/06/29 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
js Canvas绘制圆形时钟教程
2017/02/06 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
2018/12/02 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
TensorFlow入门使用 tf.train.Saver()保存模型
2018/04/24 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
Python GUI自动化实现绕过验证码登录
2020/01/10 Python
美国眼镜网站:EyeBuyDirect
2017/04/13 全球购物
小区门卫工作职责
2013/12/14 职场文书
教师业务学习制度
2014/01/25 职场文书
业绩倒数第一的检讨书
2014/09/24 职场文书
护理实习生带教计划
2015/01/16 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
督导岗位职责范本
2015/04/10 职场文书
检讨书格式
2015/05/07 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书
曾国藩励志经典名言37句,蕴含哲理
2019/10/14 职场文书
python基础之while循环语句的使用
2021/04/20 Python
Python通用验证码识别OCR库ddddocr的安装使用教程
2022/07/07 Python