资源优化
@ 姜波 | 星期三,九月 9 日,2020 年 | 2 分钟阅读 | 更新于 星期三,九月 9 日,2020 年

资源的压缩与合并

为什么要压缩与合并

  • 减少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应用监测与分析

公众号

Image text

QQ

Image text

微信

Image text

微信打赏

Image text

社交链接