资源的压缩与合并
为什么要压缩与合并
- 减少http请求数量
- 减少请求资源大小
HTML压缩
- 使用在线工具进行压缩
- 使用html-minifier等npm工具
CSS压缩
- 使用在线工具进行压缩
- 使用clean-css等npm工具
JS压缩与混淆
- 使用在线工具进行压缩
- 使用Wabpack对JS在构建时压缩
CSS JS文件合并
- 若干小文件
- 无冲突，服务相同的模块
图片优化
图片格式比较
-
JPEG/JPG图片
- 优点：高压缩比、画质保存
- 场景：首屏轮播
- 缺点：纹理边缘锯齿感模糊
- 工具：imagemin
-
PNG图片
- 优点：透明、线条纹理边缘细腻程度
- 场景：图标、logo
- 缺点：体积较大
- 工具：imagemin-pngquant
-
WebP图片
-
兼容性差
图片加载
-
原生的图片懒加载方案
-
第三方图片懒加载方案
- lazyload
- yall.js
- Blazy
-
使用渐进式图片
- progressive-image
- ImageMagick
- libjpeg
- jpegtran
- jpeg-recompress
- imagemin
-
使用响应式图片
- srcset属性的使用
- sizes属性的使用
- picture的使用
字体优化
FIOT和FOUT
- 字体未下载完成时，浏览器隐藏或自动降级，导致字体闪烁
- Flash Of Invisible Text
- Flash Of Unstyled Text
使用font-display
- auto
- block
- swap
- fallback
- optional
Webpack应用监测与分析
- stats分析与可视化图 - https://alexkuz.github.io/webpack-chart/
- webpack-bundle-analyzer进行体积优化（source-map-explorer含百分比）
- speed-measure-webpack-plugin速度分析
