2020-11-30 打包分析工具的使用（4.8）
2020-12-02 本文已影响0人
夏天的风2020
什么是打包分析？
打包分析指的是，
当我们用webpack对代码进行打包之后，
我们可以借助一些打包分析工具，
来对我们打包生成的文件进行一定的分析，
看下webpack打包是否合理。
操作步骤
-
打开
webpack分析工具的git仓库www.github.com/webpack/analyse
image
-
如果我们想对打包生成的代码进行分析，
我们首先要生成一个打包过程的描述文件stats.json.该怎么生成这个文件呢？
通过下边命令
image
-
把命令配置到我们的
package.json里，这么配置的意思是，
在打包的过程中，把整个打包过程的一些描述放置到一个叫做state.json的文件里，
文件的格式是json格式，
image
-
然后我们运行下打包命令
npm run dev-build,
看下根目录下是否生成了state.json
image
-
生成了这个文件后,
然后我们就可以借助一些工具来分析这个文件里的内容。
打开下边这个网址（可能需要科学上网）
image
-
然后点击选择文件，选择刚才生成的
state.json
image
-
分析结果
1.png
8 .Modules里显示的是，打包模块之间的关系
-
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
当我们做复杂项目打包的时候，
有的时候，代码分割出的代码形式跟我们的预期不是太相符，
那我们就可以通过这种工具来做一些分析，
看下是不是有些代码重复打包了，
是不是有的地方可以优化，
哪一部分打包耗时比较长，
都可以通过这些工具来帮我们做好分析。
