2020-11-30 打包分析工具的使用（4.8）

什么是打包分析？

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

操作步骤

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

   image

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

   image

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

   image

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

   image

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

   image

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

   image

7. 分析结果

1.png

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

![image](https://img.haomeiwen.com/i13387321/2e4f091c107b9b7e.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200)

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

   image image

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

2.png

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

Install

# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer

Usage (as a plugin)

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

3.gif

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

链接：https://www.jianshu.com/p/6b5f00f293d6