如何在vue-cli3中使用webpack-bundle-analyzer

这篇文章给大家介绍如何在vue-cli3中使用webpack-bundle-analyzer,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

使用方法

安装

npminstallwebpack-bundle-analyzer-D

webpack.config.js:

如何在vue-cli3中使用webpack-bundle-analyzer

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=truenpmrunserve"
}
}

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

npm run analyzer

关于如何在vue-cli3中使用webpack-bundle-analyzer就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

发布于 2021-03-24 01:22:36
收藏
分享
海报
0 条评论
194
上一篇:swagger怎么在asp.net core 3.0项目中使用 下一篇:如何在.Net Core中使用ObjectPool
目录

    0 条评论

    本站已关闭游客评论,请登录或者注册后再评论吧~

    忘记密码?

    图形验证码