首屏加载速度优化

首屏加载速度优化

首屏加载速度优化，总结下来有两个方向：

1. 跑得快
2. 传得少

下面，就这两个方向展开谈谈个人的经验，一些在工程化时代已经成为基操的，就不谈了，比如代码压缩、图片压缩之类的。

跑得快

跑得快，即从网络传输方面下手，HTTP2.0、CDN，都是常见的手段。

1、http2.0

在加速这个层面，http2.0 比1.1的最大优势就是—利用二进制分帧消除 http1.X 时代的队头阻塞，在 http1.X 中，前一个请求未得到相应，会阻塞后面的请求。而2.0用二进制帧实现了流，多个不同id的流（代表不同的http请求）同时传输，不互相阻塞。

2、CDN

CDN的原理就很粗暴了，负载均衡提高服务器响应速度，物理上离用户近，直接缩短了访问延迟。

传得少

传得少即减少数据传输量，代码分割，公共代码抽取，图片懒加载，多项目共享公共js（缓存）

1、代码分割

利用webpack提供的代码分割功能，能最大限度地减少首屏加载时的代码利用率，不被调用的代码尽量少加载。

https://webpack.docschina.org/guides/code-splitting/，dynamic import 较为常用，vue-router、react-router 也提供了相应的路由级别代码分割方法。

2、公共代码抽取

利用webpack提供的splitChunks，https://webpack.docschina.org/configuration/optimization/#optimizationsplitchunks

2、图片懒加载

不显示的不加载，避免和首屏相关内容抢流量。react、vue均有相关插件，甚至能提供组件懒加载，值得尝试。

3、多项目共享公共js（缓存）

同一个公司，一般用同一套技术栈，这就为跨项目共享js打下了基础，webpack配置externals，把公共依赖剔除出打包过程，单独部署到服务器上。这样，该文件只需加载一次，此后全部命中本地缓存，无需下载。比如常见的vue三件套：vue、vue-router、vuex，基本所有vue项目都需要使用，这就能提取出来，作为公共js。

webpack5带来了 module federation，在公共js这个方向上提供了一些新手段，参考http://www.alloyteam.com/2020/04/14338/。

比较少用的方法

雪碧图

被iconfont，svg（svg symbol sprite），小图自动转base64（webpack 的 url-loader）替代，已经很少人用了，维护成本太高。

若果要使用，可考虑webpack自动生成，插件webpack-spritesmith，https://segmentfault.com/a/1190000021484338

iconfont相关资源:https://icomoon.io/app/#/select、https://www.iconfont.cn/

svg symbol sprite相关资源：https://www.zhangxinxu.com/wordpress/2014/07/introduce-svg-sprite-technology/