# 静态资源服务

URL: https://caijiao.org/express/chapter2/5-static
Source: docs/express/chapter2/5-static.md
Description: 本章节介绍如何使用 Express 提供静态资源服务，包括配置静态目录、缓存控制以及常见的静态资源管理技巧，提升网站性能和用户体验。

在 Web [JavaScript](/javascript/) 文件等是必不可少的内容。Express 内置了静态资源服务中间件，方便快速地托管这些文件。

## 使用 express.static 中间件

Express 提供了 `express.static` 中间件，用于指定静态资源目录，自动响应对应路径的资源请求。

### 例子

假设项目中有一个 `public` 文件夹存放静态文件：

```text

/public
├── css
│    └── style.css
├── js
│    └── app.js
└── images
└── logo.png

````

在应用中配置：

```js
const express = require('express');
const app = express();

app.use(express.static('public'));

app.listen(3000, () => {
  console.log('服务器启动，监听端口 3000');
});
````

此时，浏览器访问 `http://localhost:3000/css/style.css` 即可获取对应文件。

## 自定义静态资源路径

可以通过指定虚拟路径前缀，区分静态资源访问路径：

```js
app.use('/static', express.static('public'));
```

访问路径变为：

```
http://localhost:3000/static/css/style.css
```

## 缓存控制

`express.static` 支持配置缓存控制，提升性能：

```js
app.use(express.static('public', {
  maxAge: '1d'  // 缓存时间为一天
}));
```

## 其他注意事项

* 静态资源文件放在项目外部时，可以使用绝对路径：

```js
app.use(express.static(path.join(__dirname, 'public')));
```

* 确保静态目录不包含敏感文件。
* 静态资源请求默认是 GET 请求。

## 总结

Express 静态资源服务简单高效，结合缓存策略可以显著提升网站访问速度和用户体验。