Fastify 中的静态文件服务开发及优化技巧-JavaScript中文网-JavaScript教程资源分享门户

前言

Fastify 是一个快速、低开销且可扩展的 Node.js Web 框架，其设计目标是稳定性和易用性。它的路由性能极高，并且对插件的扩展性也很强。在开发过程中，经常会碰到需要加载静态资源的情况，本文将介绍如何使用 Fastify 中的插件服务来快速地部署静态文件，并提供一些优化技巧提高网站的性能和用户体验。

开发静态文件服务

Fastify 中提供了一种简单、快速的方式来服务静态资源，即使用 fastify-static 插件。安装插件很容易，只需在项目中运行以下命令:

npm install fastify-static

一旦安装，即可使用如下代码引入插件：

-- -------------------- ---- -------
----- ------- - ---------------------

------------------------------------------- -
  ----- -------------------- ---------
---

-------------------- ----- -- -
  -- ----- -
    -------------------
    ----------------
  -
  ------------------- --------- -- -----------------------------------
---

以上代码使用 fastify-static 插件提供了一个在本地 3000 端口上运行的简单服务器，可以使用 public 文件夹中的静态文件。如果希望服务多个目录，可以使用以下方式：

// 可以使用数组传递多个路径
fastify.register(require('fastify-static'), {
  root: [path.join(__dirname, 'public'), path.join(__dirname, 'static')]
});

静态服务的监听路径

通常，静态服务默认监听根路径 /，但是我们可以自定义它所监听的路径。当 fastify-static 插件被激活时，其默认的策略是路由所有的请求；这意味着，任何请求都会被发送到 fastify-static 插件上处理。

如果想要自定义所服务的路径，可以在注册插件时传递额外的选项，例如，我们可以将静态服务的路径设置为 /static, 代码可以如下：

fastify.register(require('fastify-static'), {
    root: path.join(__dirname, 'public'),
    prefix: '/static/'
});

此时，访问 /static/ 所指向的地址即可获取我们所服务的静态资源。例如：http://localhost:3000/static/styles/main.css。

优化静态文件服务性能和用户体验

要优化静态文件服务的性能和用户体验，可以使用以下技巧：

缓存资源

缓存可以避免不必要的 HTTP 请求，从而提高页面的加载速度，减少带宽使用和延迟。在 fastify-static 插件中，我们可以使用 maxAge 选项来控制缓存行为。

例如，以下代码将为任何后缀是 .png、.jpg 或 .gif 的静态文件添加缓存:

fastify.register(require('fastify-static'), {
    root: path.join(__dirname, 'public'),
    prefix: '/static/',
    cacheControl: true,
    maxAge: 3600000
});

maxAge 选项以毫秒为单位设置了缓存时间，这里为 1 小时。cacheControl 选项设置与 Cache-Control 标头相关的缓存控制选项。

使用 CDN

CDN（Content Delivery Network）是一种在全球多个服务器上分布内容的云服务，以实现快速、可靠的内容交付。CDN 可以加速内容交付，减轻源服务器负载并提高韧性。

在使用 CDN 过程中，很多网站都将静态资源放在 CDN 上，以加速访问速度。

压缩文件

资源压缩是使用较少的带宽来提高吞吐量和网站性能的一种方法。压缩静态文件是一个显著的优化技巧，尤其是针对长期静态存储文件，如图像、CSS 和 JavaScript。

Fastify 插件可以使用 compress 进行简单而有效的资源压缩，例如：

fastify.register(require('fastify-static'), {
    root: path.join(__dirname, 'public'),
    prefix: '/static/',
    cacheControl: true,
    maxAge: 3600000,
    compress: true
});

预加载和预获取

预加载和预获取是指在用户请求资源之前，让浏览器预先请求资源。这有助于减少页面加载时间，增加用户感知。

预加载指的是提前加载需要的资源，以便它们在需要时立即可用。

预获取与预加载类似，但它预测的资源可能不会在当前页面使用，并在无需浪费带宽的情况下预取它们。例如，链接展示出现在屏幕上之前，预获取图片或 JS 文件以加快页面渲染速度。

可以使用 HTML5 标签 link 中的 rel 属性来完成预加载和预获取的需求。例如，以下代码预加载了一个 CSS 文件以增加加载速度：

<link rel="preload" href="/static/styles/main.css" as="style">

打包静态资源

通常情况下，本地的静态文件分开存储，访问时需要多次请求多个文件，这会造成服务器负担过大，且节目效果不佳。

为了减少服务器压力和加快加载时间，可以将文件打包成一个文件，以减少文件大小和 HTTP 请求次数。JavaScript 代码可以使用 Webpack、Parcel 、Rollup 等工具进行打包，而 CSS 可以使用 LESS 或 SASS 等预处理器进行处理。

总结

Fastify 是一个快速、易用的 Web 框架，它提供了插件机制使其具有良好的可扩展性。使用 fastify-static 插件可以快速地部署静态文件，并且我们可以通过优化技巧来提高网站的性能和用户体验。

我们可以使用缓存、CDN、压缩文件、预加载和预获取、打包静态资源等技巧，为自己的服务提供优化解决方案。在实际应用中，快速开发出高质量的 Web 应用程序和网站，拥有不可忽略的作用。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6502c59795b1f8cacdffdd8b