定位webpack文件大小

Posted 2020-10-08 Zina

之前发现一个神器，记录一下，可以可视化webpack打包的每个js文件大小，这样对我们优化代码是有帮助的，有目标的

https://www.npmjs.com/package/webpack-bundle-analyzer

这是wbpack-bundle-analyzer这个工具的地址

1、在package.json加入这行命令  “analyz”: “NODE_ENV=production npm_config_report=true npm run build”

2、安装webpack-bundle-analyzer cnpm install --save-dev webpack-bundle-analyzer

3、在webpack.config.js里增加如下代码

 

var BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer‘).BundleAnalyzerPlugin;

// ...

plugins: [new BundleAnalyzerPlugin()]

// ...

 

4、运行analyz npm run analyz 默认会打开 http://127.0.0.1:8888 作为展示