1.最直接的分析方法就是去阅读 Webpack 输出的代码。
2.可视化的分析工具，以下教你如何使用。
- 第一步：webpack输出可分析的stats.json.
- 第二步：上传至官网的在线分析工具Webpack Analyse
1）输出stats.json
在启动 Webpack 时，支持两个参数，分别是：
- --profile：记录下构建过程中的耗时信息；
- --json：以 JSON 的格式输出构建结果，最后只输出一个 .json 文件，这个文件中包括所有构建相关的信息。
在启动 Webpack 时带上以上两个参数，启动命令如下 webpack --profile --json > stats.json，你会发现项目中多出了一个 stats.json 文件。 这个 stats.json 文件是给可视化分析工具使用的。
webpack --profile --json 会输出字符串形式的 JSON，> stats.json 是 UNIX/Linux 系统中的管道命令、含义是把 webpack --profile --json 输出的内容通过管道输出到 stats.json 文件中。
2）分析工具一 Webpack Analyse （官方分析网站）
以下详细解释各个参数含义：
它分为了六大板块，分别是：
Modules：展示所有的模块，每个模块对应一个文件。并且还包含所有模块之间的依赖关系图、模块路径、模块ID、模块所属 Chunk、模块大小；
Chunks：展示所有的代码块，一个代码块中包含多个模块。并且还包含代码块的ID、名称、大小、每个代码块包含的模块数量，以及代码块之间的依赖关系图；
Assets：展示所有输出的文件资源，包括 .js、.css、图片等。并且还包括文件名称、大小、该文件来自哪个代码块；
Warnings：展示构建过程中出现的所有警告信息；
Errors：展示构建过程中出现的所有错误信息；
Hints：展示处理每个模块的过程中的耗时。
3）分析工具二 webpack-bundle-analyzer（推荐）
个人比较推荐工具二方式，可以比较直观的看出各个模块的大小和可以优化的空间
webpack-bundle-analyzer 是另一个可视化分析工具， 它虽然没有官方那样有那么多功能，但比官方的要更加直观。
它能方便的让你知道：
- 打包出的文件中都包含了什么；
- 每个文件的尺寸在总体中的占比，一眼看出哪些文件尺寸大；
- 模块之间的包含关系；
- 每个文件的 Gzip 后的大小。
接入 webpack-bundle-analyzer 的方法很简单，步骤如下：
- 安装 webpack-bundle-analyzer 到全局，执行命令 npm i -g webpack-bundle-analyzer；
- 按照上面提到的方法生成 stats.json 文件；
- 在项目根目录中执行 webpack-bundle-analyzer ./stats.json 后，浏览器会打开对应网页看到以上效果。
上图一个效果图如下：
