在开发前端应用时，我们经常需要处理静态资源，如图片、样式表、JavaScript 等。而随着前后端分离开发的流行，前端工程师需要自己处理这些资源，这就会涉及到服务器把这些静态资源发送给客户端的问题。在 Node.js 中，我们可以使用 Koa2 框架来方便地处理这些工作。
本文将介绍 Koa2 中的静态资源中间件 koa-static，并给出详细的使用示例和一些进阶技巧，帮助读者更好地使用这个工具。
koa-static 是什么？
koa-static 是一个 Koa2 中的中间件，用来处理静态资源的请求。它可以把文件系统上的文件映射到网络上的 URL 中，方便客户端通过 URL 来访问这些静态资源。
使用 koa-static，开发人员无需手动设置每个静态文件的 URL 和 MIME 类型，koa-static 可以自动获取文件的 MIME 类型，并根据 URL 中的路径来识别静态文件。这让开发者能够把精力集中在应用的业务逻辑上，而不必过多关注与静态资源相关的细节。
koa-static 的基本使用
首先，我们需要在我们的项目中安装 koa-static 模块。
npm install koa-static --save
在 Koa2 中使用一个中间件，需要通过 app.use(midware) 来注册。像这样：
const Koa = require('koa');
const app = new Koa();
const koaStatic = require('koa-static');
app.use(koaStatic('/public'));这段代码会为你的应用程序添加一个中间件，此中间件将所有的静态文件请求映射到 /public 目录中。相应文件的 MIME 类型将由 koa-static 自动推断并设置。
当用户访问 /public/hello.png 或者 /public/css/styles.css 时，koa-static 会在文件系统中搜索相应文件，并自动设置 HTTP 响应头，以正确的方式将文件发送回客户端。
koa-static 的高级用法
暴露多个静态资源目录
在实际应用中，我们可能需要暴露多个静态资源目录。例如，你的应用程序可能需要同时处理上下文路径为 /public 和 /static 的静态资源请求。
针对这种情况，我们可以使用 koa-compose 方法，将多个 koa-static 中间件连接起来。像这样：
-- -------------------- ---- ------- --- ---------- - ----------------------- --- --------- - ---------------------- --- ---------- - ------------ --------------------- -------------------- --- --------------------
上面的代码将定义两个 koa-static 中间件，分别映射到 /public 和 /static 目录，然后使用 koa-compose 方法将它们连接起来。
缓存静态资源
另一个高级功能是缓存静态资源。我们可以使用 koa-static 的可选参数 cacheControl 来指定缓存策略。缓存策略可以是一个字符串或一个对象。
缓存策略的字符串格式遵循 HTTP 协议，可以指定缓存时间或使用 no-cache 和 private 等指令。例如：
app.use(koaStatic('/public', {
cacheControl: 'max-age=31536000'
}));上面的代码定义了一个缓存时间为一年的 cache-control 指令。
如果你需要更灵活和细致的控制，可以使用一个对象来指定缓存策略。例如：
app.use(koaStatic('/public', {
cacheControl: {
maxAge: 31536000,
public: true,
mustRevalidate: true
}
}));上面的代码定义了一个缓存时间为一年的 public 缓存策略，并指定了 must-revalidate 选项。
支持 gzip 压缩
koa-static 还支持 gzip 压缩。在客户端支持 gzip 情况下，koa-static 将使用 gzip 压缩静态资源。这可以极大地提高性能和带宽利用率。
要使用 gzip 压缩静态资源，只需要在中间件定义时传递一个 compress 选项即可。例如：
app.use(koaStatic('/public', {
gzip: true
}));根据请求的 query 参数，返回不同的文件
koa-static 还支持根据请求的 query 参数，返回不同的文件。我们可以在中间件定义时传递一个 index 选项，该选项允许我们指定默认情况下返回的文件名，并根据请求的 query 参数来重写文件名。
例如，假设我们有一个文件夹存放不同大小的图片，而我们想通过指定 query 参数来获取不同大小的图片。首先，我们需要定义一个默认情况下返回的文件名，然后使用 query 参数来重写文件名。代码如下：
app.use(koaStatic('/public', {
index: 'index.html',
setHeaders: (res, path, stats) => {
const size = res.req.query.size || 'medium';
res.setHeader('content-type', `image/${size}`);
}
}));上面的代码将定义一个 index 选项，该选项用于返回默认情况下的文件名。同时，我们还在 setHeaders 回调函数中使用了 res.req.query.size 参数来重写响应的 content-type。这将根据请求的 query 参数返回不同大小的图片。
注意，setHeader 回调函数只会对当前请求设置一次头部。这就意味着，如果你的应用程序需要在响应多个静态资源请求时动态更改头部，你需要实现自己的中间件。
自定义 MIME 类型
最后，如果我们需要自定义 MIME 类型，这可以通过设置一个扩展名和 MIME 类型的映射来实现。例如，要将 .vue 扩展名映射到 application/x-vue MIME 类型，我们可以像下面这样修改代码：
-- -------------------- ---- -------
---------------------------- -
----------- ----- ----- ------ -- -
----- --- - ----------------------
----- ---- - ---------------------
-- ------ -
----------------------------- ------
-
-
----
----- --------------- - -
------ -------------------
--在上面的代码中，我们创建了一个自定义扩展名和 MIME 类型的映射表，并在 setHeaders 回调函数中使用该映射表来为请求设置正确的 MIME 类型。
结语
本文介绍了 Koa2 中的静态资源中间件 koa-static，并提供了一些基本和高级用法示例。通过使用 koa-static，我们可以轻松地处理静态资源请求，实现更加灵活的缓存策略、gzip 压缩和自定义 MIME 类型等功能。
希望本文能够帮助前端工程师更好地运用 koa-static 中间件，提高应用性能和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6782ff35935627c900253899
