output.inlineScripts

类型：

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 文件中。

示例

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

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

开启 output.inlineScripts 选项后：

rsbuild.config.ts

export default {
  output: {
    inlineScripts: true,
  },
};

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

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

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

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

Tip

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

script 标签位置

在开启 output.inlineScripts 时，建议将 html.inject 设置为 'body'。

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

rsbuild.config.ts

export default {
  html: {
    inject: 'body',
  },
  output: {
    inlineScripts: true,
  },
};

通过正则匹配

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

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

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 的资源，可以添加如下配置：

rsbuild.config.ts

export default {
  output: {
    inlineScripts({ size }) {
      return size < 10 * 1000;
    },
  },
};

异步 Chunks

当你在 JavaScript 中使用 dynamic import 时，Rspack 会生成一个异步 Chunk。默认情况下，output.inlineScripts 不会将异步 Chunk 内联到 HTML 中。

如果你希望将异步 Chunks 内联到 HTML 中，你可以通过 tools.rspack 配置项来实现修改 Rspack 的默认行为，将 module.parser.javascript.dynamicImportMode 设置为 'eager'，此时 Rspack 不会为 dynamic import 生成单独的 JS 文件。

rsbuild.config.ts

export default {
  output: {
    inlineScripts: true,
  },
  tools: {
    rspack: {
      module: {
        parser: {
          javascript: {
            dynamicImportMode: 'eager',
          },
        },
      },
    },
  },
};

选项

enable

类型： 'auto' | boolean
默认值： false

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

rsbuild.config.ts

export default {
  output: {
    inlineScripts: {
      enable: 'auto',
      test: /[\\/]main\.\w+\.js$/,
    },
  },
};

test

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

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

rsbuild.config.ts

export default {
  output: {
    inlineScripts: {
      enable: true,
      test: /[\\/]main\.\w+\.js$/,
    },
  },
};

与 ESM 输出配合使用

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

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

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。

#output.inlineScripts

#示例

#script 标签位置

#通过正则匹配

#通过函数匹配

#异步 Chunks

#选项

#enable

#test

#与 ESM 输出配合使用

output.inlineScripts

示例

script 标签位置

通过正则匹配

通过函数匹配

异步 Chunks

选项

enable

test

与 ESM 输出配合使用