web缓存优化

web缓存优化

1 http缓存优化

1.1 gzip压缩

• nginx开启gzip (on)、gzip_static (on)
• 前端打包js/css/图片等静态资源文件生成.gz文件

1.2 web服务器设置协议头（nginx、apache、tomcat等）

• 对于js、css、img、字体文件等静态资源文件使用强缓存，可配置cache-control：max-age=(1星期/1个月/1年等)
• 对index.html使用协商缓存，即每次请求验证是否改动过，具体可设置cache-control：no-cache、Etag或last-modify

1.3 增量更新代替全量更新，防止正在访问的页面js、css等文件404报错

2 前端请求优化

2.1 变动少的资源文件的css、js、img等合并压缩，减少请求

• node_modules依赖包合并为一个js文件
• 改动较少的公共组件和通用代码合并为一个js文件
• 图片处理合并为spirit等

2.2 入口文件使用协商缓存（index.html/login.html等）

• 前端页面head中去掉：

  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="Cache-Control" content="no-cache, no-store,must-revalidate">
  <meta http-equiv="expires" content="0">
  

  • 主要资源文件设置

  <link rel = "preload" />
  

  • Web服务端必须配置入口index.html/login.html等入口文件协商缓存，配置cache-control:no-cache、Etag、if-modify等

2.3 构建工具如webpack打包生成的文件使用contenthash

对异步chunk产生的js、css、img、字体等资源文件使用contenthash生成

html5离线缓存

1. 常用于移动端（移动网络）
2. 使用manifest文件
3. manifest文件设置协商缓存，需校验更新
4. manifest配置缓存文件需谨慎

其他

1. 服务端CDN技术
2. Service Worker