打包分析工具的使用

什么是打包分析？

打包分析指的是，当我们用webpack对代码进行打包之后，我们可以借助一些打包分析工具，来对我们打包生成的文件进行一些分析，看下webpack打包是否合理。

操作步骤

1. 打开webpack分析工具的git仓库 www.github.com/webpack/analyse
   

   image.png

2. 如果我们想对打包生成的代码进行分析，我们首先要生成一个打包过程的描述文件stats.json.该怎么生成这个文件呢？ 通过下边命令
   

   image.png

3. 把命令配置到我们的package.json里，这么配置的意思是，在打包的过程中，把整个打包的一些描述放置到一个叫做state.json的文件里，文件的格式是json格式，
   

   image.png

4. 然后我们运行下打包命令npm run dev-build,看下根目录下是否生成了state.json
   

   image.png

5. 生成了这个文件后，然后我们就可以借助一些工具来分析这个文件里的内容。打开下边这个网址（可能需要科学上网）

   
   image.png

6. 然后点击选择文件，选择刚才生成的state.json
   

   image.png

7. 分析结果

   
   image.png
   

   8 .Modules里显示的是，打包模块之间的关系

   
   image.png

8. Chunks表示最终生成了几个chunk（也就是几个JS文件）

   
   image.png
   image.png

除了上边webpack官方提供的工具外，还有其他几个工具，也可以帮我们分析。下边4个都是通过可视化图表的方式帮我们分析打包的文件。

image.png

• 其中比较常用的可视化分析工具是webpack-bundle-analyzer，打包过程中它会生成图表来表示打包文件之间的依赖关系
  image.png

当我们做复杂项目打包的时候，有的时候，代码分割出的代码形式跟我们的预期不是太相符，那我们就可以通过这种工具来做一些分析，看下是不是有些代码重复打包了，是不是有的地方可以优化，哪一部分打包耗时比较长，都可以通过这些工具来帮我们做好分析。