如何减少页面加载时间

1. 精简代码

去除冗余，压缩资源。就是脚手架中 npm run build 干的事。

2. 减少 HTTP 请求

可以将 CSS、JS 合并成单一文件。比如之前你有两个 css 文件，网页请求静态文件时，会请求两次，你可以合并成一个 css 文件，就只请求一次了。

3. 懒加载和按需加载

图片的懒加载可以使用一些库 lazyload 当图片进入可视区域时，再加载图片。

异步加载资源，对于非关键的 css，js 文件可以使用 async 或 differ 属性。避免阻塞页面渲染。

4. 优化资源加载速度

CSS 置于顶部，可以让样式很早去进行一个应用。JS 置于底部，避免阻塞页面的渲染流程。确保内容优先显示。

5. 利用缓存

去设置 HTTP 缓存头

6. 代码优化

消除注释和空白。使用 CDN 等。

7. 优化图片

根据图片类型选择最优格式，比如 jpeg 用于图片、png 用于透明背景、SVG 用于矢量图形。

也可以压缩图片，使用一些工具来压缩图片，减少文件大小。

8. 服务端优化

优化服务端配置，确保快速响应客户端的需求。减少数据库查询时间。尤其是大型网站，一定要确保数据检索的速度。