#接口: Output

Output 选项用于设置 bundle 和静态资源的输出方式与输出位置。

#属性

#assetPrefix?

optional assetPrefix?: string

Output.assetPrefix 用于设置静态资源的 URL 前缀。

#默认值

undefined

#备注

Output.assetPrefix 的作用与 Rspack 的 output.publicPath 配置基本相同，区别如下：

• output.assetPrefix 仅在生产环境构建时生效。

• output.assetPrefix 默认会自动在末尾添加 /。

• output.assetPrefix 的值会写入 process.env.ASSET_PREFIX 环境变量。

#示例

import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
  output: {
    assetPrefix: 'https://cdn.example.com/assets/',
  },
})

#cleanDistPath?

optional cleanDistPath?: boolean

Output.cleanDistPath 选项用于决定是否在构建开始前清空产物目录（默认为 dist）中的所有文件。

#备注

默认情况下，如果产物目录是项目根路径的子目录，Rspeedy 会自动清空构建目录中的所有文件。

当 output.distPath.root 是外部目录或与项目根目录相同时，默认不会开启 cleanDistPath，以免误删其他目录中的文件。

#默认值

当 output.distPath.root 为项目根目录的子目录时自动启用，否则禁用。

#示例

• 禁用文件清理：

import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
  output: {
    cleanDistPath: false,
  },
})

• 仅在生产环境构建前清理文件：

import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
  output: {
    cleanDistPath: process.env.NODE_ENV === 'production',
  },
})

#copy?

optional copy?: CopyRspackPluginOptions | (string | Pick<RawCopyPattern, "from"> & Partial<Omit<RawCopyPattern, "from">>)[]

Output.copy 选项用于将文件复制到产物目录。

#默认值

undefined

#备注

更多选项请参考 Rspack.CopyRspackPlugin。

#示例

• 将 ./src/assets 中的文件复制到 ./dist 目录：

import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  output: {
    copy: [
      // `./src/assets/image.png` -> `./dist/image.png`
      { from: './src/assets' },
    ],
  },
})

• 将 ./src/assets 中的文件复制到 ./dist/assets 目录：

import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  output: {
    copy: [
      // `./src/assets/image.png` -> `./dist/assets/image.png`
      { from: './src/assets', to: 'assets' },
    ],
  },
})

#cssModules?

optional cssModules?: CssModules

CssModules 选项用于自定义 CSS Modules 配置。

#默认值

undefined

#备注

默认会为 *.module.css、*.module.scss 和 *.module.less 启用 CSS Modules。使用 CssModules.auto 自定义过滤行为。

#示例

禁用 CSS Modules：

import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
  output: {
    cssModules: {
      auto: false,
    },
  },
})

为所有 CSS 文件启用 CSS Modules：

import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
  output: {
    cssModules: {
      auto: () => true,
    },
  },
})

#dataUriLimit?

optional dataUriLimit?: number | DataUriLimit

Lynx Default Changed

Output.dataUriLimit 选项用于设置图片、字体等静态资源内联的体积阈值。

#默认值

2048

#示例

内联所有小于 4kB 的静态资源：

import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
  output: {
    dataUriLimit: 4 * 1024,
  },
})

禁用静态资源内联：

import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
  output: {
    dataUriLimit: 0,
  },
})

内联所有静态资源：

import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
  output: {
    dataUriLimit: Number.MAX_SAFE_INTEGER,
  },
})

禁用所有媒体资源的内联，但不包括图片。

import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  output: {
    dataUriLimit: {
      image: 5000,
      media: 0,
    },
  },
})

#distPath?

optional distPath?: DistPathConfig

Lynx Default Changed

设置产物文件的目录。

#默认值

使用 Rsbuild 默认的 distPath 配置，并设置 root: 'dist'。

#备注

更多选项请参考 Rsbuild - distPath。

#示例

使用 output 代替 dist（默认值）：

import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
  output: {
    distPath: {
      root: './output',
    },
  },
})

#filename?

optional filename?: string | Filename

Filename 决定输出到 Output.distPath 下的 Lynx bundle 文件的名称。

#默认值

{ bundle: '[name].[platform].bundle', template: '[name].[platform].bundle' }

#备注

如果传入字符串，它将被用作 Filename.bundle。

#示例

import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
  output: {
    filename: '[name]/[name].lynx.bundle',
  },
})

#filenameHash?

optional filenameHash?: string | boolean

Output.filenameHash 选项用于控制生产环境构建后是否在文件名中添加 hash 值。

#默认值

在生产环境 web 构建中，Rsbuild 默认将该选项设置为 true；开发环境构建和非 web 产物默认不添加 hash。

#备注

Output.filename 的优先级高于 Output.filenameHash。

#示例

• 禁用 hash

import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  output: {
    filenameHash: false,
  },
})

• 修改 hash 格式

import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  output: {
    filenameHash: 'fullhash:16',
  },
})

可用的 hash 格式有：

• fullhash：整个编译的 hash 值。如果任意文件发生变化，整个项目所有产物文件的 hash 值都会改变。

• chunkhash：chunk 的 hash 值。仅当 chunk（及其包含的模块）的内容发生变化时，hash 值才会改变。

• contenthash：文件内容的 hash 值。仅当文件本身的内容发生变化时，hash 值才会改变。

#inlineScripts?

optional inlineScripts?: InlineChunkConfig

Output.inlineScripts 选项用于控制是否将脚本内联到 Lynx bundle（.lynx.bundle）中。

#默认值

Rspeedy 默认将其设为 true，只有当用户显式启用顶层的 splitChunks 选项时，才会切换为 false。

#备注

这与 output.inlineScripts 不同，因为我们通常希望将脚本内联到 Lynx bundle（.lynx.bundle）中。

有两点需要特别注意：

1. 只有后台线程脚本可以不内联，主线程脚本始终会被内联。

2. 目前，当启用 experimental_isLazyBundle 时，inlineScripts 始终为 true。

#示例

禁用后台线程脚本的内联。

import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  output: {
    inlineScripts: false,
  },
})

#legalComments?

optional legalComments?: "none" | "inline" | "linked"

Lynx Default Changed

Output.legalComments 用于控制如何处理法律注释（legal comment）。

#默认值

'none'

#备注

这与 Rsbuild 不同，因为我们通常不希望 Lynx 产物中出现 .LEGAL.txt 文件。

可以通过以下选项之一配置该行为：

• linked：将所有法律注释提取到 .LEGAL.txt 文件中，并通过注释链接到该文件。

• inline：将所有法律注释保留在原位置。

• none：移除所有法律注释。

#minify?

optional minify?: boolean | Minify

Minify 用于配置是否在生产环境构建中启用代码压缩，或配置压缩器选项。

#默认值

生产环境构建中为 true，其他情况为 false

#示例

禁用压缩。

import { defineConfig } from '@lynx-js/rspeedy'
export default defineConfig({
  output: {
    minify: false,
  },
})

#sourceMap?

optional sourceMap?: boolean | SourceMap

Lynx Default Changed

SourceMap 用于配置是否为产物生成 source map，以及如何生成。

#默认值

在 Lynx 构建中未设置该选项时，JavaScript source map 在开发环境使用 'cheap-module-source-map'，在生产环境使用 'source-map'；同时也会生成 CSS source map。所有 .map 资源都会在输出前被移除。