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. 服务端优化
优化服务端配置,确保快速响应客户端的需求。减少数据库查询时间。尤其是大型网站,一定要确保数据检索的速度。