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

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

使用方法

安装

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

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

npm run analyzer

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