Webpack官方提供了一些分析打包的工具。在我们开发打包之后，我们可以使用webpack提供的一些工具来分析包的大小，从而优化打包输出文件。通常我们会使用webpack-bundle-analyzer这个插件来分析，除了这个，我们再看看其他几个官方工具。正文开始……在开始本文之前，我们先从以下几点分析打包dist，参考官方文档bundle-analysiswebpack-chart：webpackstats交互式饼图，主要使用命令行webpack--profile--json=stats.json在本地生成json，然后根据生成的json显示包信息，减少bundle大小bundle-stats生成bundle报告，比较不同builds之间的结果webpack-chart我们打开webpack-chart，进入npxwebpack--profile--json=stats.json在我们的项目命令行或package.json"scripts":{"test":"echo\"Error:notestspecified\"&&exit1","server":"webpackserver","async":"webpack--profile--json=stats.json"}，把生成的stats.json上传到指定的网站打开，不过这张图好像没那么明显。webpack-visualizer打开webpack-visualizer上传生成的stats.json分析哪个文件包含一些依赖包的关系webpack-bundle-analyzer直接安装webpack-bundle-analyzer插件npmiwebpack-bundle-analyzer--save-dev//webpack.config.jsconst{BundleAnalyzerPlugin}=require('webpack-bundle-analyzer')...module.exports={插件：[...newBundleAnalyzerPlugin()]}当我们运行npxwebpack时，它会自动打开本地的8888端口。一般来说，这种方式效果最好，可以清楚地看到文件包之间的依赖关系。另一种方式是使用命令前提是生成stats.jsonnpxwebpack-bundle-analyzerstats.jsonwebpackbundleoptimizehelper打开addresshelper，上传生成的stats.json。在此之前，我们将webpack.config.js的mode:development更改为mode:production比以前小很多，并告诉我们一些改进建议。Analyze可以直接打开，上传生成的stats.json。不过这个资料好像只分析了一些包大小的文件，包之间的依赖关系不是那么明显。总结主要介绍几种针对webpack不同分析包的工具，各有特点。webpack--profile--json=stats.json生成stats.json文件，然后使用工具上传stats.json，最实用的分析包数据的方式是webpack-bundle-analyzer，用的比较多。欢迎关注公众号：网络技术学院，努力学习，天天向上！
