webpack-bundle-analyzer使用

使用webpack-bundle-analyzer可以直观分析打包结果。

1、安装

npm install --save-dev webpack-bundle-analyzer

2、在vue.config.js中配置

if (process.env.NODE_ENV === 'production') {
    config.plugin('webpack-bundle-analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
        .end()
}

代码中添加process.env.NODE_ENV === 'production'是为了让代码只在打包时起作用。

3、运行 npm run build --report，即可生成分析报告