浅析webpack-bundle-analyzer在vue-cli3中的使用
更新时间：2019年10月23日 10:57:00 作者：ypeusksk
这篇文章主要介绍了webpack-bundle-analyzer在vue-cli3中的使用,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
正常的使用方法
安装
npm install webpack-bundle-analyzer -D
webpack.config.js：
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中的使用,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
这篇文章主要介绍了Vue之彻底理解自定义组件的v-model的相关知识 ,需要的朋友可以参考下的相关资料2017-11-11
今天小编就为大家分享一篇vue里面使用mui的弹出日期选择插件实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue的nextTick的使用,本文从源码出发给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
本篇文章主要介绍了详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件，具有一定的参考价值，有兴趣的可以了解一下2017-06-06
这篇文章主要介绍了vue中如何解除数据之间的双向绑定，具有很好的参考价值，希望对2022-09-09
这篇文章主要介绍了Vue SPA 首屏优化方案的的相关资料，帮助大家更好的理解和学习使用vue，感兴趣的朋友可以了解下2021-02-02
这篇文章主要介绍了vue获取光标位置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要介绍了uni-app 实现小程序登录注册功能,文中给大家介绍了实现思路，以及vuex和本地缓存的区别，需要的朋友可以参考下2019-10-10
OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问。本文将通过Vue和OpenLayer实现测距功能 ，需要的可以参考一下2022-04-04
在后台使用过程中经常会因为按钮重复点击,而造成发送多次重复请求 以下方法可以避免这种情况,下面这篇文章主要给大家介绍了关于vue中如何防止用户频繁点击按钮的相关资料,需要的朋友可以参考下2022-09-09
最新评论