浅析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 相关文章推荐
JS画线(实例代码)
Nov 20 Javascript
前端轻量级MVC框架CanJS详解
Sep 26 Javascript
jQuery实现复选框批量选择与反选的方法
Jun 17 Javascript
javascript实现在线客服效果
Jul 15 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
原生js实现密码输入框值的显示隐藏
Jul 17 Javascript
Nuxt.js踩坑总结分享
Jan 18 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
element实现合并单元格通用方法
Nov 13 Javascript
使用Vue实现一个树组件的示例
Nov 06 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 object转数组示例
2014/01/15 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
在Javascript中定义对象类别
2006/12/22 Javascript
Jquery 学习笔记(一)
2009/10/13 Javascript
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
JavaScript中的作用域链和闭包
2012/06/30 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
js鼠标滑过图片震动特效的方法
2015/02/17 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
2016/02/01 Javascript
浅谈Javascript数组(推荐)
2016/05/17 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
详解js加减乘除精确计算
2019/03/19 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
python中xrange和range的区别
2014/05/13 Python
解决Python传递中文参数的问题
2015/08/04 Python
Python中表示字符串的三种方法
2017/09/06 Python
python  Django中的apps.py的目的是什么
2018/10/15 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
Python创建字典的八种方式
2019/02/27 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
python实例化对象的具体方法
2020/06/17 Python
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
Java面试题:请问一下代码输出是什么
2015/05/27 面试题
《在大海中永生》教学反思
2014/02/24 职场文书
2014年前台文员工作总结
2014/12/08 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书
如何用Navicat操作MySQL
2021/05/12 MySQL