serve-placeholder

缺失资源的智能占位符

为什么？

💵 渲染错误代价高昂

为资产提供每个 404 页面会增加服务器负载并增加崩溃的可能性。这对于使用服务器端渲染的设置至关重要，并且当诸如 robots.txt 或 favicon.ico 等资产不存在时，可消除额外的 SSR 负载。

👌 有意义的响应

通过了解文件扩展名，我们始终可以发送比 HTML 页面更好的 404 响应。例如，对于图片扩展名，我们发送一个备用的 1x1 透明图片。

🔍 SEO 友好

我们不再用 HTML 页面索引无效 URL，而是正确发送 404 和正确的内容类型。

用法

安装包

# npm
npm install serve-placeholder

# yarn
yarn install serve-placeholder

# pnpm
pnpm install serve-placeholder

导入

// ESM
import { servePlaceholder } from 'serve-placeholder'

// CommonJS
const { servePlaceholder } = require('serve-placeholder')

在 serve-static 和 router middleware 之间创建并添加服务器中间件

app.use('/assets', serveStatic(..))
++ app.use('/assets', servePlaceholder())
app.use('/', router)

此外，我们可以为任意路由设置默认占位符，它处理已知扩展名，前提是其他路由没有扩展名

app.use('/assets', serveStatic(..))
app.use('/assets', servePlaceholder())
++ app.use('/', placeholder({ skipUnknown: true }))
app.use('/', router)

选项

handlers

文件扩展名到处理程序的映射。扩展名应以点开头，例如 .js。

您可以通过将值设置为 null 来禁用任何处理程序。

如果处理程序的值设置为 false，则该扩展名的中间件将被忽略。

statusCode

• 默认值: 404

为所有已处理的响应设置 statusCode。设置为 false 以禁用覆盖 statusCode。

skipUnknown

• 默认值: false

当当前请求没有定义处理程序时，跳过中间件。

请注意，如果此选项设置为 true，则 default 处理程序将被禁用！

placeholders

• 类型: Object

从处理程序到占位符的映射。值可以是 String 或 Buffer。您可以通过将值设置为 false 来禁用任何占位符。

mimes

• 类型: Object

从处理程序到 MIME 类型的映射。MIME 类型将设置为 Content-Type 头。您可以通过将值设置为 false 来禁用发送任何 MIME 类型。

cacheHeaders

• 默认值：true

设置头信息以防止意外缓存 404 资源。

启用后，这些头信息将被发送

{
  'cache-control': 'no-cache, no-store, must-revalidate',
  'expires': '0',
  'pragma': 'no-cache'
}

placeholderHeader

• 默认值：true

设置 X-Placeholder 头，其值为处理程序名称。

默认值

这些是默认处理程序。您可以使用提供的选项覆盖它们。

💻 开发

• 克隆此仓库
• 使用 corepack enable 启用 Corepack（对于 Node.js < 16.10，请使用 npm i -g corepack）
• 使用 pnpm install 安装依赖项
• 使用 pnpm dev 运行交互式测试

许可

用心制作 💛

根据MIT 许可证发布。