输出分析

启动webpack时，支持如下两个参数：

• --profile：记录构建过程的耗时信息
• --json：以JSON的格式输出构建结果，最后只输出一个.json文件，这个文件中包括所有构建相关的信息。 启动webpack时，带上以上两个参数：webpack --profile --json > stats.json 多出来的stats.json文件为后面的可视化分析工具使用

官方的可视化分析工具

webpack官方提供了一个可视化分析工具(Webpack Analyse)，在线web应用 打开链接（如下图），上传上面提到的生成的json文件，进行解析（在浏览器本地解析，不用担心代码被泄漏）

关于解析结果几大模块介绍：

• Modules：展示所有模块，每个模块对应一个文件，并包含所有模块之间的依赖关系图、模块路径、模块ID、模块所属的Chunk、模块大小
• Chunks：展示所有代码块，在一个代码块中包含索格模块，并且包含代码块的ID名称，大小，每个代码块包含的模块数量，以及代码块之间的依赖关系图
• Assets：展示所有输出的文件资源，包括.js, .css, 图片等，并包括文件的名称，大小及该文件来自哪个代码块
• Warnings：展示构建过程中出现的所有警告信息。
• Errors：展示构建过程中出现的所有错误信息
• Hints：展示处理每个模块所耗费的时间

webpack-bundle-analyzer

webpack-bundle-analyzer，虽然没有Webpack Analyse功能多，但是更直观： webpack-bundle-analyzer方便的让我们知道：

• 打包出的文件都包含了什么
• 每个文件的尺寸在总体中的占比，一眼看出哪些文件的尺寸大
• 模块之间的包含关系
• 每个文件的Gzip后的大小

如何接入webpack-bundle-analyzer

• 安装webpack-bundle-analyzer到全局，执行命令npm i -g webpack-bundle-analyzer
• 按照上面的方法生成stats.json文件
• 在项目根目录中执行webpack-bundle-analyzer后，浏览器会打开对应的网页并展现效果