4-8 打包分析
4-8 打包分析
1. 简介
上一节4-3~8 code-splitting，懒加载，预拉取，预加载
讲到如何对代码进行 code splitting。那么如何判断我们的代码要进行code splitting 或者对 code splitting 后的效果进行分析呢？这就需要用到一些辅助的打包分析工具。
2. 准备工作
为了进行代码分析，我们先准备一些用来打包的模块。
// index.js
import { log } from './log-util';
import $ from 'jquery';
const prettyMilliseconds = require('pretty-ms');
log(
prettyMilliseconds(123)
);
const div = document.createElement('div');
div.innerText = 'first screen content';
document.getElementById('root').appendChild(div);
$('body').css('background', 'green');// package.json
...
entry: {
index: "./src/index.js"
},
...
optimization: {
splitChunks: {
chunks: 'all'
}
}3. webpack/analyse
首先，我们来看一下官方推荐的打包分析工具。打开 webpack/analyse，我们可以看到，运行方式非常简单。
在之前的打本脚本加一行如下命令：
"dev-analyse": "webpack --config ./build/webpack.dev.js --profile --json > stas.json",运行该脚本，打包后如下：
image.png
同时会在项目下生成一个分析文件：
image.png
打开如下地址：
http://webpack.github.com/analyse
点击选择文件，上传刚才的 stas.json 文件（如果打不开或者切换效果不好，看下是不是上网方式不够科学）：
image.png
会有如下分析结果：
image.png
open 和 home ，一个是弹出打开弹窗，重新选择 stats，一个就是当前所示的主页信息。
对于正常的打包结果，我们最需要关注的红框部分，可以看到当前 webpack 打包涉及的 module 有 5 个，chunk 有 3 个，asset 有 3 个。
我们先打开 modules 看看。
image.png
可以看到 5 个模块分别对应 5 个节点，其中 index 居中，引用了 log-util（实线），以及node_modules 下的 pretty-ms 和 jquery（虚线），而 pretty-ms 内部又引用了 parse-ms（实线）。
ps：这里实线和虚线我还没弄清具体的含义，没看到相关文档，也没时间去捣鼓这块逻辑，如果有知道的同学还请告知哈~（猜测是在不同的 chunk 中，所以用的虚线？）
还可以看到各个模块的大小，在打包过程中对应的 chunk，以及是否被构建。我们点击其中的 index 这个点，可以查看该模块更加详细的内容：
image.png
我们点击上方的 chunks 按钮，如下：
image.png
可以看到两个点，体积应该分别是对应大小。表格描述了 chunkid，chunname，包含的模块数量，大小，父父级，和标签（渲染，初始，入口等信息）。
再点击 assets ，可以看到打包后的资源信息：
image.png
warnings 和 error是提示打包过程中的告警和错误，这里我们打包流程正常，所以提示 no warnings 和 no errors。
最后我们看一下 hints，这里是分析软件给出的优化提示。
image.png
image.png
image.png
可以看到，总共给出了两条优化建议。
第一条，说我们的代码对同一模块有多次引用，但是我们检查源码是没有的。看图中的指示是 index 模块中出现了对其他模块的重复引用，我们去 index 模块详情看一下：
image.png
确实存在多次引用。这里是由于对模块副作用标记导致的（猜的），如果我们使用 product 模式，这个应该就不会有了。我们来看一下：
加一行脚本：
"build-analyse": "webpack --config ./build/webpack.prod.js --profile --json > stas.json",
image.png
image.png
可以看到，打包后少了一个 log-util 模块的展示,
image.png
index 模块的依赖也确实变少了。打开 hints：
image.png
提示 1 已经没有了，而对于第二个提示，其实是要我们将模块外链预拉取，后面我们会讲到这里的优化。
4. 小结
关于更多的打包分析工具，可以参考这里，如果有 webpack 打包方面的优化需求，可以多尝试一下，平时的时候如果有空，感受一下即可，选一两款合适自己的，毕竟工具的学习也是有成本的：
- webpack-chart: Interactive pie chart for webpack stats.
- webpack-visualizer: Visualize and analyze your bundles to see which modules are taking up space and which might be duplicates.
- webpack-bundle-analyzer: A plugin and CLI utility that represents bundle content as a convenient interactive zoomable treemap.
- webpack bundle optimize helper: This tool will analyze your bundle and give you actionable suggestions on what to improve to reduce your bundle size.
- bundle-stats: Generate a bundle report(bundle size, assets, modules) and compare the results between different builds.
参考
https://webpack.js.org/guides/code-splitting/#bundle-analysis