在 Web 开发中，静态资源指的是不需要服务端处理的文件，比如 HTML、CSS、JavaScript、图片等。在 Express.js 中，我们可以通过中间件来处理静态资源，让客户端可以直接访问这些资源，提高网站的响应速度和用户体验。
Express.js 中的静态资源中间件
Express.js 提供了一个 express.static() 方法来处理静态资源，这个方法的参数是一个目录的路径，它会将这个目录下的所有文件和子目录作为静态资源暴露给客户端。我们可以通过如下方式来使用它：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- -- - ------ ------------------------ ---------------------------------- ---------------- -- -- - ------------------- -- ------- -- ------------------------ ---
在上面的代码中，我们将 public 目录下的所有文件和子目录作为静态资源暴露给客户端。当客户端请求这些资源时，Express.js 会自动查找这些文件并返回给客户端。比如，当客户端请求 http://localhost:3000/css/style.css 时，Express.js 会返回 public/css/style.css 文件的内容。
静态资源缓存
为了提高网站的响应速度，我们可以使用缓存来减少服务器的负担和网络传输的次数。在 Express.js 中，我们可以通过设置缓存的响应头来实现静态资源的缓存。我们可以通过如下方式来设置缓存：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- -- ----------- - -- -------------------------------- - ------- ---- ---- ---------------- -- -- - ------------------- -- ------- -- ------------------------ ---
在上面的代码中，我们通过 maxAge 选项来设置静态资源的缓存时间，单位是毫秒。这里我们设置缓存时间为 1 小时，意味着客户端在 1 小时内再次请求相同的静态资源时，会从客户端的缓存中读取，而不是从服务器上再次请求。
静态资源版本控制
为了避免客户端缓存过期后仍然使用旧版本的静态资源，我们可以使用版本控制来确保客户端使用最新的静态资源。在 Express.js 中，我们可以通过给静态资源的文件名添加版本号来实现版本控制。比如，我们可以将 style.css 改为 style.v1.css，然后在客户端引用静态资源时，使用带有版本号的文件名。
-- -------------------- ---- -------
--------- -----
------
------
--------- ---------------
----- ---------------- -------------------------
-------
------
---------- -----------
------- ------------------------------
-------
-------在上面的代码中，我们使用带有版本号的文件名来引用静态资源，这样客户端在缓存过期后再次请求相同的资源时，会自动下载最新版本的资源。
结语
通过使用 Express.js 中的静态资源中间件，我们可以轻松地处理静态资源，提高网站的响应速度和用户体验。同时，我们也可以通过缓存和版本控制来优化静态资源的加载和更新。希望本文能够对你理解和使用 Express.js 中的静态资源中间件有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/678b4596881faa801fa91ad8
