上一节4-3~8 code-splitting,懒加载,预拉取,预加载
讲到如何对代码进行 code splitting。那么如何判断我们的代码要进行code splitting 或者对 code splitting 后的效果进行分析呢?这就需要用到一些辅助的打包分析工具。
为了进行代码分析,我们先准备一些用来打包的模块。
// 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'
}
}
首先,我们来看一下官方推荐的打包分析工具。打开 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 已经没有了,而对于第二个提示,其实是要我们将模块外链预拉取,后面我们会讲到这里的优化。
关于更多的打包分析工具,可以参考这里,如果有 webpack 打包方面的优化需求,可以多尝试一下,平时的时候如果有空,感受一下即可,选一两款合适自己的,毕竟工具的学习也是有成本的:
https://webpack.js.org/guides/code-splitting/#bundle-analysis