本文Demo的完整工程代码, 参考dva-bundle-analyze / vue-bundle-analyze
dva
dva是什么? React and edux based, lightweight and elm-style framework, 参考dvajs/dva
dva new dva-bundle-analyze
vim package.json
"scripts": {
"analyze": "roadhog build --analyze"
},
npm run analyze
Analyze result is generated at dist/stats.html
此时, 使用浏览器打开dist/stats.html，包分析结果如下
bundler-analyze-01.png
vue
vue更多介绍 参考Vue官方文档
vue init webpack vue-bundle-analyze
vim package.json
"scripts": {
"analyze": "NODE_ENV=production npm_config_report=true npm run build"
},
npm run analyze
Webpack Bundle Analyzer is started at http://127.0.0.1:8888
此时, 自动打开浏览器，包分析结果如下
bundler-analyze-02.png
小结
dva的包分析基于webpack插件webpack-visualizer-plugin
vue的包分析基于webpack插件webpack-bundle-analyzer
两者作用基本相同 只是展现形式不同
参考
更多文章, 请支持我的个人博客
