#10.24
HTTP缓存分为强缓存和协商缓存
强缓存(disk cache)：浏览器不向服务器发送请求，直接从本地（一般来自硬盘）缓存中读取内容。
Expires: 设置过期时间，绝对时间
Cache-Control: 设置过期时间，相对时间，优先级高于Expires
- Cache-Control: max-age=1000
- Cache-Control: no-store 不缓存数据到本地
- :public-可以被所有用户缓存，包括终端和CDN等中间代理服务器
- :private-只能被终端浏览器缓存（私有缓存），不允许中继换号器进行缓存
- :no-cache: 可以存储在本地缓存区中，只是与原始服务器进行新鲜度再验证之前，缓存不能将其提供给客户端使用
协商缓存：会经过请求服务器来判断是否需要更新
Last-Modified：服务器第一次响应返回
If-Modified-Since: 后续请求带上的值
- 由于上面受到时间的限制，在本地打开缓存文件时，Last-Modified会被更改，因此需要用另一种表示资源变化，即ETag，优先级高于Last-Modified
- If-Modified-Since检查的粒度是秒级，因此很短时间内变更无法判断
- 某些服务器不能精确获取文件最后修改时间
ETag: 第一次响应的值，跟时间没有关系
If-None-Match: 后续请求带上的值
#页面解析
JavaScript会阻塞DOM构建，CSSOM的构建会阻塞JavaScript的执行，因此通过推荐把CSS样式表放到<head>中，而JavaScript放到<body>中
defer: 在HTML解析完成后，安装脚本出现的顺序再顺序执行
async: 下载完成就立即开始执行，同时阻塞页面解析，不保证脚本间的执行顺序
使用gzip进行文本压缩
gzip on;
gzip_min_length 1000;
gzip_comp_level 6;
gzip_types application/javascript application/x-javascript text/javascript;
1
2
3
4
2
3
4
#js相关
- 动态加载(dynamic import)，例如在Vue中使用异步组件
- 代码压缩
- Tree Shaking: ESM依赖
例如：lodash一般安装版本是非ESM的，即使你在导入的时候使用import cloneDeep from 'lodash/cloneDeep的方式去导入，但是由于内部使用require的方式去导入一些其他的模块，造成不可避免的引入无关文件，因此，为了使用Tree Shaking，则需要安装它的ESM版本lodash-es - 将基础库代码打包合并
// webpack.config.js
module.exports = {
//...
optimization: {
splitChunks: {
chunks: 'all',
minChunks: 1,
cacheGroups: {
commons: {
minChunks: 1,
automaticNamePrefix: 'commons',
test: /[\\/]node_modules[\\/]vue|vuex|vue-router/,
chunks: 'all'
}
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#CSS相关
- MinCssExtractPlugin: 抽离CSS文件
- 压缩
- 避免深层嵌套
- css中不要使用
@import
#10.25
#图片相关
- 雪碧图（貌似项目中我很少用到）
- 懒加载
- base64，但体积会增大33%
background-image替代img- 减小图片的大小
<picture>
<source type="image/webp" srcset="/static/img/xxx.webp">
<source type="image/jpeg" srcset="/static/img/xxx.jpg">
<img src="/static/img/xxx.jpg">
</picture>
1
2
3
4
5
2
3
4
5
- 使用合适的大小和分辨率
<img srcset="small.jpg 480w, large.jpg 1080w" sizes="50w" src="large.jpg" >
1