资源加载快(下载)

• 体积小
• 图片压缩
• css压缩合并
• HTML压缩
• 服务器开启gzip
  • 动态gzip压缩 nginx + gzip配置
  • 静态gzip压缩 nginx + gzip_static
  • webpack 一般使用 compress-webpack-plugin

  // webpack.config.js
  const CompressionPlugin = require('compression-webpack-plugin');
  
  module.exports = {
    plugins: [
      new CompressionPlugin({
        filename: '[path].gz[query]', 
        algorithm: 'gzip', 
        test: /\.(js|css|svg)$/,
        threshold: 10240,
        minRatio: 0.8, 
        deleteOriginalAssets: false 
      }),
    ],
  };

  • vite 一般使用 vite-plugin-compression

  import { viteCompression } from 'vite-plugin-compression'
  import { defineConfig } from "vite";
  export default defineConfig({
    plugins: [
      viteCompression({
        verbose: true, // 是否在控制台输出压缩结果
        disable: false, // 默认 false, 设置为 true 来禁用压缩
        threshold: 10240, // 只处理大于此大小的资源（单位：字节）。默认值为 0。
        algorithm: "gzip", // 配置 "gzip" 使用 gzip 压缩；配置 "brotliCompress", 使用 brotli 压缩
        ext: ".gz", // 输出文件的扩展名
        deleteOriginFile: false, // 删除源文件
      })
    ]
  })

• csssprite(雪碧图)弃用
• SVG icon sprite
• 图片懒加载
• 模块懒加载
• TreeShaking
• 抽离公共模块
• 数量小
• CSS、JS压缩合并
• HTTP缓存(Cache Control、Etag)
• 距离近
• 静态资源(CSS、JS、图片)放CDN
• 运输工具先进
• HTTP
• 二进制分帧
• 多路复用
• 数据流优先级
• 头部压缩
• 服务端推送

页面展现快(渲染)

• CSS放在head里、JS放在页面底部
• 不重要的资源使用async或者defer属性异步加载

体验流畅(使用)

• 动画流畅
• 能用CSS3 animation尽量用
• 开启硬件加速 transform，少用left/top
• JS动画使用requestAnimationFrame少用setInterval
• 滚动/移动流畅
• DOM增删操作要少(虚拟长列表、DOM diff)
• 高频操作使用防抖和节流
• 辅助计算
• WebWorker

打包构建快(开发)

• 并发构建
• 过滤不相关目录
• 使用缓存