webpack官网提供了剖析打包的一些工具，咱们在开发打包后，咱们能够利用webpack给咱们提供的一些工具去剖析包的大小，从而对打包输入文件进行优化，通常咱们都会用webpack-bundle-analyzer这个插件去剖析，除了这种，咱们看下官网提供的另外几种工具。
注释开始...
在开始本文之前，首先会从以下几点去利用工具剖析打包dist，参考官网文档bundle-analysis
webpack-chart: webpack stats 交互饼图，次要是利用命令行webpack --profile --json=stats.json本地生成json,而后依据生成的json显示包的信息webpack-bundle-analyzer是一个插件，只有打包胜利后，会主动关上一个界面剖析dist包webpack bundle optimize helper剖析打包后的bundle.js，缩小bundle大小bundle-stats生成一个bundle报告，比拟不同构建之间的后果
webpack-chart
咱们关上webpack-chart
而后在咱们的我的项目命令行里输出
npx webpack --profile --json=stats.json
或者在package.json
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "server": "webpack server", "async": "webpack --profile --json=stats.json" },将生成的stats.json在指定关上的那个网站上上传上去
然而这个图貌似并没有那么显著
webpack-visualizer
关上webpack-visualizer
将生成的stats.json上传后
能剖析哪个文件蕴含的一些依赖包的关系
webpack-bundle-analyzer
间接装置webpack-bundle-analyzer插件
npm i webpack-bundle-analyzer --save-dev// webpack.config.jsconst { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')...module.exports = { plugins: [ ... new BundleAnalyzerPlugin() ]}当咱们运行npx webpack时，就会主动关上本地8888端口了
通常来说，这种形式成果最好，能够十分分明的看到文件包之间的依赖关系
另外还有一种形式，就是能够用命令行形式,前提是学生成stats.json
npx webpack-bundle-analyzer stats.json webpack bundle optimize helper
关上地址helper,上传生成的stats.json
在这之前咱们webpack.config.js的mode:development此时咱们改成mode:production
相比拟之前要小得多,并且通知咱们一些能够改良的意见
analyse
间接关上analyse,把生成的stats.json上传上去即可
不过这个信息貌似只能剖析包文件的一些大小，包之间的依赖关系并没有那么显著
总结
- 次要是介绍
webpack几种不同剖析包的工具，每一种都有不同的特点 webpack --profile --json=stats.json生成stats.json文件，而后利用工具上传stats.json，剖析包数据- 最实用的还是
webpack-bundle-analyzer用得比拟多点
欢送关注公众号：Web技术学苑
好好学习，天天向上！