web优化 之 包分析

本文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

• 两者作用基本相同 只是展现形式不同

参考

• Three simple ways to inspect a Webpack bundle

• 如何写一手漂亮的 Vue

更多文章, 请支持我的个人博客