> For AI agents: the complete documentation index is available at /zh/llms.txt, the full documentation bundle is available at /zh/llms-full.txt.

# output.inlineScripts

- **类型：**

```ts
type InlineChunkTestFunction = (params: {
  size: number;
  name: string;
}) => boolean;

type InlineChunkTest = RegExp | InlineChunkTestFunction;

type InlineChunkConfig =
  | boolean
  | InlineChunkTest
  | { enable?: boolean | 'auto'; test: InlineChunkTest };
```

- **默认值：** `false`

用来控制是否用 `<script>` 标签将产物中的 script 文件（.js 文件）inline 到 HTML 中。

注意，如果开启了这个选项，那么 script 文件将不会被写入产物目录中，而只会以 inline 脚本的形式存在于 HTML 文件中。

## 示例

默认情况下，我们有这样的产物文件：

```bash
dist/html/main/index.html
dist/static/css/style.css
dist/static/js/main.js
```

开启 `output.inlineScripts` 选项后：

```ts title="rsbuild.config.ts"
export default {
  output: {
    inlineScripts: true,
  },
};
```

生产构建的产物文件将变成：

```bash
dist/html/main/index.html
dist/static/css/style.css
```

同时，`dist/static/js/main.js` 文件将被 inline 到 `index.html` 中：

```html
<html>
  <head>
    <script>
      // content of dist/static/js/main.js
    </script>
  </head>
</html>
```

:::tip
设置 `inlineScripts: true`，等价于将 [inlineScripts.enable](#enable) 设置为 `'auto'`，这表示仅在生产模式时开启内联。
:::

### script 标签位置

在开启 `output.inlineScripts` 时，建议将 [html.inject](/zh/config/html/inject.md) 设置为 `'body'`。

因为 script 标签的默认插入位置是 `<head>` 标签，将插入位置修改为 `<body>` 标签后，可以保证 inlined script 能获取到 `<body>` 中的 DOM 元素。

```ts title="rsbuild.config.ts"
export default {
  html: {
    inject: 'body', // [!code highlight]
  },
  output: {
    inlineScripts: true,
  },
};
```

### 通过正则匹配

当你需要内联产物中的一部分 JS 文件时，你可以将 `inlineScripts` 设置为一个正则表达式，匹配需要内联的 JS 文件的 URL。

比如，将产物中的 `main.js` 内联到 HTML 中，你可以添加如下配置：

```ts title="rsbuild.config.ts"
export default {
  output: {
    inlineScripts: /[\\/]main\.\w+\.js$/,
  },
};
```

:::tip
生产模式的文件名中默认包含了一个 hash 值，比如 `static/js/main.18a568e5ab.js`。因此，在正则表达式中需要通过 `\w+` 来匹配 hash。
:::

### 通过函数匹配

你也可以将 `output.inlineScripts` 设置为一个函数，函数接收以下参数：

- `name`：文件名，比如 `static/js/main.18a568e5ab.js`。
- `size`：文件大小，单位为 byte。

比如，我们希望内联小于 10kB 的资源，可以添加如下配置：

```ts title="rsbuild.config.ts"
export default {
  output: {
    inlineScripts({ size }) {
      return size < 10 * 1000;
    },
  },
};
```

### 异步 Chunks

当你在 JavaScript 中使用 [dynamic import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) 时，Rspack 会生成一个异步 Chunk。默认情况下，`output.inlineScripts` 不会将异步 Chunk 内联到 HTML 中。

如果你希望将异步 Chunks 内联到 HTML 中，你可以通过 [tools.rspack](/zh/config/tools/rspack.md) 配置项来实现修改 Rspack 的默认行为，将 [module.parser.javascript.dynamicImportMode](https://rspack.rs/zh/config/module-parser#javascriptdynamicimportmode) 设置为 `'eager'`，此时 Rspack 不会为 dynamic import 生成单独的 JS 文件。

```ts title="rsbuild.config.ts"
export default {
  output: {
    inlineScripts: true,
  },
  tools: {
    rspack: {
      module: {
        parser: {
          javascript: {
            dynamicImportMode: 'eager',
          },
        },
      },
    },
  },
};
```

## 选项

### enable

- **类型：** `'auto' | boolean`
- **默认值：** `false`

是否启用内联。`'auto'` 表示在生产模式时开启，开发模式时关闭。

```ts title="rsbuild.config.ts"
export default {
  output: {
    inlineScripts: {
      enable: 'auto',
      test: /[\\/]main\.\w+\.js$/,
    },
  },
};
```

### test

- **类型：** `RegExp | ((params: { size: number; name: string }) => boolean)`

用来匹配需要内联的 JS 文件。

```ts title="rsbuild.config.ts"
export default {
  output: {
    inlineScripts: {
      enable: true,
      test: /[\\/]main\.\w+\.js$/,
    },
  },
};
```

## 与 ESM 输出配合使用

开启 [output.module](/zh/config/output/module.md) 后，初始 JavaScript Chunk 可能通过静态 ESM import 引用 runtime 或共享 Chunk。`inlineScripts` 将这些 Chunk 移入 HTML 并移除对应的文件后，这些 import 将无法继续解析。

因此，每个 HTML 入口应该只有一个初始 JavaScript Chunk。请将 runtime 保留在入口中，并仅拆分异步 Chunk：

```ts title="rsbuild.config.ts"
export default {
  output: {
    module: true,
    inlineScripts: true,
  },
  splitChunks: {
    // 仅拆分异步 Chunk
    chunks: 'async',
  },
  tools: {
    rspack: {
      optimization: {
        // 将 runtime 保留在入口 Chunk 中
        runtimeChunk: false,
      },
    },
  },
};
```

通过动态导入生成的异步 Chunk 仍然受支持。默认情况下，它们不会被内联，并会继续按需加载。如果应用必须生成独立的 runtime Chunk 或共享初始 Chunk，请不要开启 `inlineScripts`。