网站优化：从 CDN 到懒加载的五项实践

摘要： 网页加载速度的优化不是单一手段，而是 CDN 分散、Gzip 压缩、代码分割、图片懒加载和缓存机制的组合拳。

---

1. CDN 加速

HTTP 协议有一个缺点：队头阻塞。在一个长连接下，请求会排队等待。打开浏览器的 Network 面板可以看到：

加载分析图的几个关键阶段：

阶段	含义
Queued	等待排队的时间，从页面第一个 HTTP 请求开始计算
Started	发出请求之前的时间节点
Queueing	正式发出 HTTP 请求的时间
Connection Start	阻塞时间，包含 DNS 解析、反向代理、SSL 加载
Request/Response	请求发送 → 等待响应 → 下载资源

优化思路： 将资源分散到不同域名下，大文件压缩后发布到 CDN。可以使用 webpack 的 publicPath 指定静态资源地址：

module.exports = {
  publicPath: 'https://src.**.com/static/js/[hash:8].js'
}

我在服务器端开了一个 src 开头的二级域名作为静态文件服务器，图片等静态资源全部放在这个域名下访问。

---

2. Gzip 压缩

注意：需要前后端配合。

前端配置（webpack）：

const CompressionWebpackPlugin = require('compression-webpack-plugin')

module.exports = {
  plugins: [
    new CompressionWebpackPlugin({
      test: /\.(js|css|png|svg)$/,
      threshold: 10240,  // 10KB 以上才压缩
      minRatio: 0.9
    })
  ]
}

太小的文件不要压缩，小文件压缩后可能比源文件更大。

后端配置（Nginx）：

http {
  gzip on;
  gzip_http_version 1.1;
  gzip_min_length 1k;
  gzip_comp_level 5;  # 最高 9，最低 1，取中间
  gzip_types application/javascript image/bmp text/css;
}

配置后记得重启服务器：

nginx -t        # 检查语法
nginx -s reload # 重载配置
ps -el | grep nginx  # 确认启动状态

配置成功后，Network 面板中可以看到大文件加载使用了 Gzip：

---

3. React 代码分割

React 16.8 之后提供了 React.lazy()，动态引入静态文件。类似于 Vue 的路由懒加载，但 React 中任意模块都可以使用，需要配合 Suspense：

import React, { Suspense } from 'react'

const LazyComponent = React.lazy(() => import('./LazyComponent'))

export default () => (
  <Suspense fallback={<div>Loading...</div>}>
    <LazyComponent />
  </Suspense>
)

---

4. 图片懒加载

原理：准备一张压缩过的小图片作为默认 src，真实 URL 保存在 data-src 属性中。监听滚动事件，图片进入视窗时用 data-src 替换 src。

<img src='https://src.***.com/cover.png' data-src='target_url' />

我的实现 lazy.js 不超过 50 行代码：

---

5. 缓存机制

利用缓存将图片、媒体资源、JS 脚本和 CSS 样式表缓存起来，可以大幅减少请求和流量。

缓存类型有两种：

类型	状态码	说明
强缓存	200 (from memory cache)	直接从本地缓存读取，不发请求
协商缓存	304	发请求询问服务器是否变更，未变更则使用缓存

---

总结

优化手段	解决什么问题	实施成本
CDN	HTTP 队头阻塞、资源分散加载	低
Gzip	文件体积过大	低
代码分割	首屏加载 JS 体积过大	中
图片懒加载	首屏图片过多	低
缓存	重复请求相同资源	低