在现代网站开发中，静态文件如 HTML、CSS、JavaScript 等是不可避免的。在 Express.js 中，通过使用中间件来实现静态文件服务，可以方便地将这些文件提供给客户端。本文将探讨使用静态文件服务的最佳实践，以帮助前端开发者更好地使用 Express.js。
1. Express.js 中的静态文件服务
在 Express.js 中使用静态文件服务需要使用内置的 express.static 中间件。该中间件以一个或多个目录路径作为参数，并在 Express.js 应用程序中提供静态文件服务。例如：
const express = require('express')
const app = express()
// 通过 `public` 目录提供静态文件服务
app.use(express.static('public'))
app.listen(3000, () => console.log('App listening on port 3000!'))在上述示例中，我们使用 express.static 中间件将 public 目录提供为静态文件服务。现在，我们可以在浏览器中访问 http://localhost:3000，并访问 public 目录中的文件。
2. 静态文件服务的最佳实践
2.1. 将静态文件分离为一个单独的目录
将静态文件分离为一个单独的目录，有助于维护应用程序的结构，并减少部署时的工作量。我们建议将所有静态文件放置在一个名为 public 或 static 的目录中，这是一种常见的做法。
2.2. 使用 CDN 加载公共资源
使用 CDN（Content Delivery Network，内容分发网络）加载公共资源，可以加快加载速度，节约带宽，并且能够处理全球不同位置的请求。我们建议将以下文件使用 CDN 资源：
- jQuery
- Bootstrap
- Font Awesome
- 等等
例如：
<head> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"> </head>
2.3. 对静态文件使用 gzip 压缩
使用 gzip 压缩静态文件，可以减少文件大小和网络带宽，并且加快文件下载时间，提高用户体验。在 Express.js 中，我们可以使用 compression 中间件来实现 gzip 压缩。
-- -------------------- ---- ------- ----- ------- - ------------------ ----- ----------- - ---------------------- ----- --- - --------- ---------------------- --------------------------------- ---------------- -- -- ---------------- --------- -- ---- --------
2.4. 对缓存进行优化
对缓存进行优化，可以减少服务器负载、加快页面加载速度，并且提高用户体验。在 Express.js 中，我们可以使用 cache-control 来控制缓存行为。
app.use(express.static('public', {
maxAge: '1d',
etag: false,
lastModified: false
}))在上述示例中，我们设置 maxAge 为 1 天，因此浏览器将缓存静态文件 1 天。同时，我们将 etag 和 lastModified 设置为 false，以便禁用浏览器的缓存验证。
3. 示例代码
-- -------------------- ---- ------- ----- ------- - ------------------ ----- ----------- - ---------------------- ----- --- - --------- -- -- ---- ------ ---------------------- -- ------------------- --- ------ ------------------ ------------------------ - ------- ----- ----- ------ ------------- ----- --- ------------ ----- ---- -- - --------------- -------- -- ---------------- -- -- ---------------- --------- -- ---- --------
4. 总结
在本文中，我们讨论了使用 Express.js 中的静态文件服务最佳实践，包括将静态文件分离为一个单独的目录、使用 CDN 加载公共资源、使用 gzip 压缩静态文件、以及缓存优化。通过遵循这些最佳实践，我们可以创建更快、更安全和更可靠的网站，并提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ad4f2548841e9894978925