此文是「Webpack 2 视频教程」的第十八集的补充文字文档主要对使用可视化图表对 Webpack 2 的编译与打包进行统计分析进行了详细地讲解供您更加直观地参考。在之前更新的共十七集「Webpack 2 视频教程」中我们陆续讲解了 Webpack 2 从配置到打包、压缩优化到调试状态等情况都进行了详细地讲解在这一小节我们通过可视化的图表对 Webpack 2 的打包编译过程进行一个更加深刻地认识同时可视化图表也是对项目概况以及优化指导是一个非常直观的方案。1. Webpack 2 的编译统计信息生成让 Webpack 2 生成统计信息的参数主要是配置以下两个。–profile 统计生成至执行时间相关信息可选参数–json 让 Webpack 生成统计信息输出格式为 json。以下为测试项目package.json中的配置截图。配置后在命令行执行命令npm run stats即可在项目目录中看到生成的统计文件stats.json。2. 利用生成的数据生成可视化图表2.1 官方可视化分析工具官方就给出了一个可视化工具地址在 http://webpack.github.io/analyse/选择上面生成的stats.json文件后即可生成针对项目生成的可视化图表。在此图表中你可以看到你项目的生成文件的大小、引用关系以及项目中 modules 的相关信息。2.2 Webpack Visualizer同样也是一个 Web 生成工具选择上传生成的stats.json文件即可生成图表。2.3 重复包的检测与图表化可以安装 duplicate-package-checker-webpack-plugin 插件对项目中的重复包进行检测以便于对项目进行引用优化。当然你可以直接利用之前生成的数据文件直接生成一个更加炫酷的图形化统计信息。https://alexkuz.github.io/webpack-chart/2.4 未使用资源检测使用 https://www.npmjs.com/package/webpack-unused 还可以检测项目中那些资源文件没有被使用供后期优化项目参考。2.5 3D 图表生成还有一个可以生成 3D 图标的工具不过看起来信息太过混乱当玩具玩玩就好。https://alexkuz.github.io/stellar-webpack/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7ibJRQ2d-1578979202547)(https://image.devopen.club/blog_018498cc0f033ab0b857b1e5e46c7265.png)]2.6 一些其他工具可以在本地装一个组件生成可以放大缩小的资源占用图标。https://www.npmjs.com/package/webpack-bundle-analyzer一个用于生成包依赖关系的可视化工具可以用于图表化地查看包之间的循环依赖之类的信息。3. 总结这些可视化的工具可以供后期优化项目时大大提高寻找优化目标的效率。不过所有的性能问题以及包依赖的准则应该一直贯穿于整个项目的开发过程中而不是指望最后再来优化项目依赖混乱等问题免得积重难返。课程中的源码地址https://github.com/ParryQiu/DevOpenClub-Tech-Webpack2