vue cli打包文件优化工具 webpack-bundle-analyzer

安装前请注意步骤一、二框架可能已自带，请先检查

步骤一、安装webpack-bundle-analyzer插件

npm install webpack-bundle-analyzer –save-dev

步骤二、在build/webpack.prod.config.js末尾中添加配置

if (config.build.bundleAnalyzerReport) {
    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
    webpackConfig.plugins.push(new BundleAnalyzerPlugin());
}

步骤三、在package.json的scripts中添加配置

“analyz”: “NODE_ENV=production npm_config_report=true npm run build”

步骤四、运行命令

npm run analyz

运行结果:

image.png