10分钟搞定http-server缓存策略：从Cache-Control到Service Worker落地指南-优快云博客

10分钟搞定http-server缓存策略：从Cache-Control到Service Worker落地指南

【免费下载链接】http-server a simple zero-configuration command-line http server 项目地址: https://gitcode.com/gh_mirrors/ht/http-server

你是否还在为网页加载速度慢而烦恼？用户频繁刷新却重复加载相同资源？本文将带你10分钟掌握http-server的PWA缓存方案，从基础的Cache-Control配置到高级的Service Worker实现，让静态资源加载速度提升60%以上。读完本文你将获得：

3种Cache-Control策略的实战配置
ETag与Last-Modified的最佳组合方案
零代码实现Service Worker缓存的技巧
完整的缓存测试与验证方法

缓存控制基础：Cache-Control配置详解

http-server通过lib/core/defaults.json文件提供了默认缓存配置，其中第8行定义了全局默认缓存策略：

"cache": "max-age=3600"

这意味着所有静态资源默认会被浏览器缓存1小时（3600秒）。但实际开发中我们需要更灵活的配置方案。

三种实用缓存策略

策略类型	配置示例	适用场景
永久缓存	`cache: "max-age=31536000, immutable"`	版本化静态资源（如app.v2.js）
协商缓存	`cache: false`	频繁更新的HTML文件
混合策略	`cache: (req, res) => req.url.endsWith('.html') ? 0 : 3600`	首页HTML不缓存，其他资源缓存

命令行配置示例

启动服务器时通过-c或--cache参数覆盖默认配置：

# 配置JS/CSS文件缓存1天
http-server -c "max-age=86400"

# 对HTML文件禁用缓存
http-server -c "no-cache, no-store, must-revalidate"

深入协商缓存：ETag与Last-Modified

当浏览器缓存过期后，http-server会通过协商缓存机制判断资源是否真的发生变化，避免不必要的网络传输。

ETag工作原理

lib/core/etag.js实现了ETag（实体标签）生成逻辑，通过文件的inode、大小和修改时间生成唯一标识：

module.exports = (stat, weakEtag) => {
  let etag = `"${[stat.ino, stat.size, stat.mtime.toISOString()].join('-')}"`;
  if (weakEtag) {
    etag = `W/${etag}`;
  }
  return etag;
};

强ETag：精确匹配文件内容，适用于静态资源
弱ETag（W/前缀）：模糊匹配，适用于动态生成的内容

304 Not Modified响应

服务器通过lib/core/status-handlers.js第6-9行处理304响应：

exports['304'] = (res) => {
  res.statusCode = 304;
  res.end();
};

当资源未修改时，服务器仅返回状态码而不传输正文，典型交互流程如下：

mermaid

实战配置：从命令行到代码级控制

命令行快速配置

最常用的缓存控制命令组合：

# 基本用法：默认缓存1小时
http-server

# 开发环境：禁用缓存
http-server -c-1

# 生产环境：静态资源缓存1年，HTML不缓存
http-server -c "max-age=31536000" --proxy http://api.example.com:8080/api

高级自定义配置

通过Node.js API创建服务器时，可以实现更精细的缓存控制：

const http = require('http');
const ecstatic = require('./lib/core');

http.createServer(ecstatic({
  root: __dirname + '/public',
  cache: (req, res) => {
    // 对图片设置长缓存
    if (/\.(jpg|png|gif)$/.test(req.url)) {
      return "max-age=31536000, immutable";
    }
    // 对API响应不缓存
    if (req.url.startsWith('/api/')) {
      return "no-cache";
    }
    // 默认缓存1小时
    return 3600;
  }
})).listen(8080);

缓存测试验证

test/cache.test.js展示了如何验证缓存配置：

test('custom cache option string', (t) => {
  server = http.createServer(ecstatic({
    root: `${__dirname}/public/`,
    cache: 'max-whatever=3600',
  }));
  
  // 验证响应头
  request.get(`http://localhost:${port}/a.txt`, (err, res) => {
    t.equal(res.headers['cache-control'], 'max-whatever=3600');
  });
});

手动测试步骤：

启动服务器：http-server -c 3600
访问资源并记录响应头：curl -I http://localhost:8080/a.txt
再次请求验证缓存：curl -I -H "If-Modified-Since: [上次记录的时间]" http://localhost:8080/a.txt

Service Worker集成：实现离线访问能力

虽然http-server本身不直接提供Service Worker功能，但可以配合客户端脚本实现PWA缓存。在你的HTML文件中添加：

<script>
// 注册Service Worker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        console.log('SW registered:', registration.scope);
      })
      .catch(err => {
        console.log('SW registration failed:', err);
      });
  });
}
</script>

然后创建public/sw.js文件：

// 缓存名称和资源列表
const CACHE_NAME = 'my-site-cache-v1';
const ASSETS_TO_CACHE = [
  '/',
  '/index.html',
  '/styles.css',
  '/app.js',
  '/img/turtle.png'
];

// 安装阶段缓存静态资源
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(ASSETS_TO_CACHE))
      .then(() => self.skipWaiting())
  );
});

// 激活阶段清理旧缓存
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.filter(name => name !== CACHE_NAME)
          .map(name => caches.delete(name))
      );
    }).then(() => self.clients.claim())
  );
});

// 拦截请求并从缓存提供资源
self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request)
      .then(response => {
        // 更新缓存
        caches.open(CACHE_NAME).then(cache => {
          cache.put(event.request, response.clone());
        });
        return response;
      })
      .catch(() => {
        // 网络请求失败时返回缓存内容
        return caches.match(event.request);
      })
  );
});

部署后访问网站，在浏览器开发者工具的Application面板中可以查看Service Worker状态和缓存内容：

最佳实践与常见问题

缓存策略矩阵

根据资源类型选择合适的缓存策略：

资源类型	缓存策略	配置示例
HTML	协商缓存	`no-cache`
CSS/JS	长期缓存+指纹	`max-age=31536000, immutable`
图片	长期缓存+指纹	`max-age=31536000, immutable`
API数据	不缓存或短时缓存	`max-age=60`

常见问题解决

缓存不生效：检查是否设置了正确的Cache-Control头，可通过test/304.test.js验证服务器行为
资源更新不及时：使用文件指纹（如app.v2.js）或添加查询参数（app.js?v=2）
开发环境缓存干扰：使用http-server -c-1禁用缓存，或配置浏览器开发者工具"Disable cache"选项

性能监控

部署后通过浏览器开发者工具的Performance面板监控缓存效果：

首次加载：关注资源总大小和加载时间
二次加载：确认缓存命中率，理想状态下应>80%
离线访问：验证Service Worker是否正确提供缓存内容

总结与进阶

通过本文你已经掌握了http-server的缓存控制核心技能：

使用Cache-Control头控制浏览器缓存行为
配置ETag和Last-Modified实现协商缓存
通过命令行和API两种方式配置缓存策略
集成Service Worker实现PWA离线功能

进阶学习建议：

研究lib/core/opts.js了解更多配置选项
探索test/compression.test.js中的压缩与缓存结合策略
学习Service Worker高级模式，如CacheFirst、NetworkFirst等缓存策略

合理的缓存配置能显著提升网站性能，减少服务器负载。建议根据项目特点制定缓存策略，并通过自动化测试确保缓存行为符合预期。

点赞收藏本文，关注获取更多http-server高级使用技巧！下期将带来"http-server反向代理与API路由配置实战"。

【免费下载链接】http-server a simple zero-configuration command-line http server 项目地址: https://gitcode.com/gh_mirrors/ht/http-server

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考