---
sidebar_position: 7
---

# 处理静态资源

Modern.js Module 会对代码中使用的静态资源进行处理。如果需要配置，则可以使用 [`buildConfig.asset`](/api/config/build-config#asset) API。

## 默认行为

默认情况下，Modern.js Module 会处理以下静态资源：

- `'.svg'`、`'.png'`、`'.jpg'`、`'.jpeg'`、`'.gif'`、`'.webp'`
- `'.ttf'`、`'.otf'`、`'.woff'`、`'.woff2'`、`'.eot'`
- `'.mp3'`、`'.mp4'`、`'.webm'`、`'.ogg'`、`'.wav'`、`'.flac'`、`'.aac'`、`'.mov'`

对于静态文件的处理，Modern.js Module 目前默认支持的功能有：

- 输出静态资源至 `./assets`。
- 对于不超过 **10kb** 的文件会内联到代码中。

## 示例

让我们看下面的例子：

- 项目源代码：

```ts title="./src/asset.ts"
import img from './bg.png';
```

- 如果 `bg.png` 的大小小于 10 kb，则此时产物目录结构和产物内容为：

```bash
./dist
└── asset.js
```

```js title="./dist/asset.js"
var img_default = 'data:image/png;base64,';
```

- 如果 `bg.png` 的大小大于 10 kb，则此时产物目录结构和产物内容为：

```bash
./dist
├── asset.js
└── assets
    └── bg.13e2aba2.png
```

```js title="./dist/asset.js"
import img from './assets/bg.13e2aba2.png';
```

当你想要修改默认行为的时候，可以使用以下 API：

- `asset.path`：修改静态资源文件输出路径。
- `asset.limit`：修改内联静态资源文件的阈值。