背景
之前项目中用了kibana7.6版本，这个版本加载的资源太多，加载速度过慢。社区也有些反馈（吐槽），官方也建了issue跟进，所以对比最近一些版本。
各版本对比
测试版本 7.6.0、7.10.2、7.15.2，同网络环境，同浏览器，同协议http1.1
首次加载时间对比
| 版本 | 首次加载速度 |
|---|---|
| 7.6 | 7.7s |
| 7.10 | 3.9s |
| 7.15 | 4.76s |
请求数对比
| 版本 | js数量 | css数 | font数 | xhr | 总数 |
|---|---|---|---|---|---|
| 7.6 | 55 | 49 | 5 | 3 | 116 |
| 7.10 | 107 | 4 | 3 | 13 | 132 |
| 7.15 | 131 | 4 | 3 | 18 | 160 |
7.6.0版本截图
7.10.2版本截图
7.15.2 版本截图
大文件数量
大文件指文件大小超1M的文件
| 版本 | 数量 | 大文件 |
|---|---|---|
| 7.6 | 5 | vendors_0.bundle.dll.js vendors_1.bundle.dll.js vendors_2.bundle.dll.js kbn-ui-shared-deps.js commons.bundle.js |
| 7.10 | 1 | kbn-ui-shared-deps.js |
| 7.15 | 1 | kbn-ui-shared-deps.js |
7.6.0版本截图
7.10.2版本截图
小结
7.6到7.15 版本大文件的数量，减少了Content Download 时间。
进一步优化方案
通过压缩资源来减少文件下载时间从而提升加载速度；
通过缓存及预加载等策略来减少非首次加载时间；
- 对一些较大资源进行预加载
<link rel="prefetch" href="xxx.js" />
<script defer src="xxx" ></script>
<script async src="xxx" ></script>
- 缓存服务器，对特定资源强缓存
if ($request_filename ~* .*\.(?:js|css)$) {
add_header Cache-Control "max-age=86400000";
}
- 部分静态资源挂载到cdn服务
