24 优化静态文件服务

在上一章中，我们讨论了如何通过 Express.js 访问静态文件。我们了解到了如何为我们的应用设置静态文件服务，使得文件可以被客户端请求并响应。然而，在生产环境中，优化静态文件的服务是非常重要的，会影响到应用的性能和用户的体验。本章将探讨一些常用的优化方法。

1. 缓存控制

1.1 理解浏览器缓存

为了减少请求的次数和提高加载速度，浏览器提供了缓存控制机制。通过设置缓存头信息，浏览器能在一段时间内保存静态文件的副本，而不必每次都向服务器请求。

在 Express.js 中，我们可以使用 express.static() 方法来设置这些缓存头。具体的实现方法如下：

const express = require('express');
const path = require('path');

const app = express();

// 设置静态文件目录
app.use(express.static(path.join(__dirname, 'public'), {
  maxAge: '1d' // 设置缓存时间为 1 天
}));

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

在这个例子中，maxAge 属性设置了缓存的有效期为 1 天，客户端在请求静态文件时会根据此设置决定是否使用本地缓存的文件。

1.2 强缓存与协商缓存

在一般情况下，缓存控制可以分为强缓存和协商缓存。通过设置 Cache-Control 和 Expires 头，我们可以使用强缓存，而协商缓存则依赖于 Last-Modified 和 ETag 头。

你可以在 express.static() 中进一步配置这些参数，示例如下：

app.use(express.static(path.join(__dirname, 'public'), {
  setHeaders: (res, path) => {
    if (path.endsWith('.html')) {
      res.setHeader('Cache-Control', 'no-cache');
    } else {
      res.setHeader('Cache-Control', 'public, max-age=31557600'); // 1 年
    }
  }
}));

在这个例子中，对于 .html 文件，我们设置了 no-cache，强制浏览器每次都请求新的版本，而其他静态资源则使用 1 年的强缓存。

2. 启用 Gzip 压缩

2.1 什么是 Gzip 压缩

Gzip compression 是一种利用 DEFLATE 算法压缩文件大小的方式，通过减少数据传输的字节数来提升性能和加载速度。Express.js 提供了中间件 compression 来轻松启用 Gzip 压缩。

2.2 如何使用 Gzip 压缩

首先，我们需要安装 compression 包：

npm install compression

然后，在我们的应用中集成它：

const compression = require('compression');

app.use(compression());

将上述代码添加到你的 Express 应用中后，所有传递的 HTTP 响应都会自动进行 Gzip 压缩。这将大大减少响应体的大小，使得静态文件的传输更快速。

3. 使用 CDN

3.1 CDN 的优势

内容分发网络（CDN）是一种通过将静态资源分发给与用户更接近的多个服务器来加速内容交付的服务。使用 CDN 可以大幅提升网站的载入速度和响应能力，将静态文件从你的服务器上托管到 CDN 服务器上。

3.2 如何将静态文件托管到 CDN

将静态文件发布到 CDN 服务器上通常需要经过如下步骤：

1. 上传文件: 将你的静态文件上传至 CDN 提供商（如 Cloudflare、AWS CloudFront 等）。
2. 配置域名: 配置你的 CDN 域名指向这些文件。
3. 更新引用: 在应用中，将所有静态文件的引用更新为 CDN 的 URL。

例如，将以下静态文件引用：

<script src="/js/app.js"></script>

更新为：

<script src="https://cdn.example.com/js/app.js"></script>

通过使用 CDN，我们可以加速静态文件的获取速度，分散请求的负担，提高用户的体验。

4. 图片优化

对于静态文件服务而言，图片的加载和处理尤为重要。通过优化图片能够显著提升页面加载速度。

4.1 图片格式选择

选择合适的图片格式可以减少文件大小。以下是一些推荐的格式：

• 使用 JPEG 格式来处理照片，因为其压缩比高且保留较多细节。
• 使用 PNG 格式来处理需要透明背景的图片。
• 使用 SVG 格式来处理矢量图形，以保持清晰度和小巧的文件大小。

4.2 图片压缩

使用工具如 imagemin 来批量压缩图片。通过安装并使用它，可以减少静态文件夹中图片的大小。

4.3 响应适配的图片

可以考虑使用 srcset 属性使浏览器根据设备的屏幕大小和分辨率选择合适的图片加载。

<img src="image-640w.jpg" 
     srcset="image-480w.jpg 480w,
             image-800w.jpg 800w,
             image-1200w.jpg 1200w"
     sizes="(max-width: 600px) 480px,
            (max-width: 1200px) 800px,
            1200px"
     alt="描述">

结论

通过设置缓存控制、启用 Gzip 压缩、使用 CDN 和优化图片，我们可以显著提升 Express.js 应用中的静态文件服务的性能。这些优化不仅能够减少加载时间，还能提高用户的体验，使得我们的应用更加高效和流畅。继续优化代码和资源是提升用户体验的关键，下一章将介绍如何使用模板引擎 EJS 来更动态地生成 HTML 内容。