一. 首屏优化
1.1 代码层面
-
路由懒加载
-
按需加载
-
JS文件预加载
-
抽取公共组件、提高代码复用率
-
简少首屏代码嵌套层级
-
网络请求层封装
-
React项目进行SCU优化
1.2 打包构建
- 分析构建产物 webpack-bundle-analyzer
- 开启分包技术 splitChunks
- 对构建产物进行压缩
1.3 图片
- 图片懒加载
- 使用webP格式的图片
- 使用网址对部分图片进行二次压缩
1.4 动画
- 动画采用transform position 创建一个新的渲染层
- 开启硬件加速器 <translateZ(0)>
1.5 网络
- DNS域名预解析
<link rel="dns-prefetch" href="//img13.360buyimg.com">
- TCP优化
- 采用http2.0协议
- 采用CDN
1.6 服务器优化
- 启用缓存
- 启用压缩
- 给Nginx开启多进程
