性能优化是前端的一个大课题，优化得当的话可以为公司节省宽带费用，也能给用户带来良好的用户体验。下面是个人优化方案的一些总结，主要涵盖下面几个方面：
- 图片优化
- 缓存优化
- 打包优化
- 网络优化
- 体验优化
图片优化
使用 webp 格式的图片
webp 是谷歌提出的一种新的图片文件格式。在与 JPEG 同等图片质量下，却占用了更小的体积。
可以使用对象存储的图片样式，将图片转为 webp 格式引入。（需要考虑兼容性）
采用恰当尺寸的图片
若一个商品详略图的尺寸为 100 × 100，那就没必要使用超过这个尺寸的图片，可以通过对象存储的图片的url 进行图片处理(参考各家对象存储图片处理文档），阿里云的处理则如下
1 | https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_100/quality,q_90 |
将图片等比例缩放到宽为100px，图片质量调整到 90%
使用cdn
将图片转为base64/使用精灵图
可以将尺寸比较小的图片转为base64格式引入（可通过webpack配置）
若有数量上比较多并且出现频率比较多的小图标，可以考虑将小图片合在一起制作成精灵图，通过精灵图显示图片
以上两个步骤都能够减少 http 请求
图片懒加载
若一次性都加载所有图片的话，占用网络资源，也没必要
可以在浏览视窗内，才开始加载图片，可以减少首屏图片请求
可以使用比较成熟的库，进行图片懒加载
静态资源
- prefetch/preload
- service worker
- mianfest
- pwa
- http2 push
缓存优化
使用 service worker
webpack 优化
打包公共的代码
将一些公用的，频繁引入，但不会经常变化的文件合成到一个文件里面，例如一些常用的库，它被多个页面频繁引用，并且不会经常改变，因此可以使用 webpack 的 splitChunks 将多次引入的包都打包到一个文件里面，这样的文件在第二次加载的时候就可以直接从缓存中获取，而不是通过网络获取
按需加载
在单页面中，可以对引入的路由进行分包，那么在加载这个路由对应的页面的时候，才会加载对应的资源包
1 | import(/*webpackChunkName: 'xx'* 'yourpath'/) |
构建优化
缓存
- 生成包使用内容hash进行缓存，若内容不变，使用缓存，内容变化则直接请求新的文件
- 提取css从js中提取出来，方便缓存
- 图片、字体等文件使用 url-loader，小于某个阈值的静态资源文件转为 base64 格式引入，减少网络请求，压缩图片尺寸等
- 使用压缩插件，对js文件以及css文件进行压缩
tree shaking
减少无用代码
preload/prefetch加载
基于路由进行代码分割
nginx 缓存，gzip压缩
接入层缓存
- 接入层接口根据方法以及参数从redis里面判断是否有缓存，有缓存则直接返回
- 获取到结果之后，设置缓存，过期时间需要有一个随机数，避免缓存击穿
客户端缓存（根据接口和参数缓存）
缓存策略：
- 优先从本地缓存获取，当本地缓存过期或不存在的时候才从服务器获取，获取后更新本地缓存
- 优先从服务器获取，当网络请求不同的时候才从本地获取，服务器获取后也会更新本地缓存
- 同时从本地和服务器获取，先显示 本地的缓存，获取到服务器的数据后，显示服务器的数据并且更新本地缓存