diff --git a/.changeset/soft-dryers-brake.md b/.changeset/soft-dryers-brake.md new file mode 100644 index 0000000000..a33e63c515 --- /dev/null +++ b/.changeset/soft-dryers-brake.md @@ -0,0 +1,5 @@ +--- +'@rsbuild/core': patch +--- + +release: 0.4.13 diff --git a/e2e/cases/output/assets.test.ts b/e2e/cases/output/assets.test.ts index ba938284d7..2311055b30 100644 --- a/e2e/cases/output/assets.test.ts +++ b/e2e/cases/output/assets.test.ts @@ -12,7 +12,17 @@ const cases = [ expected: 'inline', }, { - name: 'assets(maxSize 0)', + name: 'assets(dataUriLimit 0)', + cwd: join(fixtures, 'assets'), + config: { + output: { + dataUriLimit: 0, + }, + }, + expected: 'url', + }, + { + name: 'assets(dataUriLimit.image 0)', cwd: join(fixtures, 'assets'), config: { output: { @@ -24,13 +34,12 @@ const cases = [ expected: 'url', }, { - name: 'assets(maxSize Infinity)', + name: 'assets(dataUriLimit max number)', cwd: join(fixtures, 'assets'), config: { output: { dataUriLimit: { - // Rspack not support Infinity - image: 5 * 1024, + image: Number.MAX_SAFE_INTEGER, }, }, }, diff --git a/packages/core/src/plugins/asset.ts b/packages/core/src/plugins/asset.ts index 8c18a1c5c8..717311671e 100644 --- a/packages/core/src/plugins/asset.ts +++ b/packages/core/src/plugins/asset.ts @@ -36,7 +36,11 @@ export const pluginAsset = (): RsbuildPlugin => ({ const regExp = getRegExpForExts(exts); const distDir = getDistPath(config, assetType); const filename = getFilename(config, assetType, isProd); - const maxSize = config.output.dataUriLimit[assetType]; + const { dataUriLimit } = config.output; + const maxSize = + typeof dataUriLimit === 'number' + ? dataUriLimit + : dataUriLimit[assetType]; const rule = chain.module.rule(assetType).test(regExp); chainStaticAssetRule({ diff --git a/packages/document/docs/en/config/output/data-uri-limit.mdx b/packages/document/docs/en/config/output/data-uri-limit.mdx index 2a185b7df6..4771c6dfa5 100644 --- a/packages/document/docs/en/config/output/data-uri-limit.mdx +++ b/packages/document/docs/en/config/output/data-uri-limit.mdx @@ -3,12 +3,14 @@ - **Type:** ```ts -type DataUriLimitConfig = { - svg?: number; - font?: number; - image?: number; - media?: number; -}; +type DataUriLimitConfig = + | number + | { + svg?: number; + font?: number; + image?: number; + media?: number; + }; ``` - **Default:** @@ -37,7 +39,37 @@ Detail: ### Example -Set the threshold of images to 5000 Bytes, and set media assets not to be inlined: +- Inline all static assets less than 4kB: + +```js +export default { + output: { + dataUriLimit: 4000, + }, +}; +``` + +- Disable inlining of static assets: + +```js +export default { + output: { + dataUriLimit: 0, + }, +}; +``` + +- Inline all static assets: + +```js +export default { + output: { + dataUriLimit: Number.MAX_SAFE_INTEGER, + }, +}; +``` + +- Set the threshold for image assets to 5kB, do not inline video assets: ```js export default { diff --git a/packages/document/docs/zh/config/output/data-uri-limit.mdx b/packages/document/docs/zh/config/output/data-uri-limit.mdx index ee679d0f8e..87dc6ac2b7 100644 --- a/packages/document/docs/zh/config/output/data-uri-limit.mdx +++ b/packages/document/docs/zh/config/output/data-uri-limit.mdx @@ -3,12 +3,14 @@ - **类型:** ```ts -type DataUriLimitConfig = { - svg?: number; - font?: number; - image?: number; - media?: number; -}; +type DataUriLimitConfig = + | number + | { + svg?: number; + font?: number; + image?: number; + media?: number; + }; ``` - **默认值:** @@ -37,7 +39,37 @@ const defaultDatUriLimit = { ### 示例 -修改图片资源的阈值为 5000 Bytes,设置视频资源不内联: +- 内联小于 4kB 的所有静态资源: + +```js +export default { + output: { + dataUriLimit: 4000, + }, +}; +``` + +- 禁用静态资源内联: + +```js +export default { + output: { + dataUriLimit: 0, + }, +}; +``` + +- 内联所有静态资源: + +```js +export default { + output: { + dataUriLimit: Number.MAX_SAFE_INTEGER, + }, +}; +``` + +- 设置图片资源的阈值为 5kB,不内联视频资源: ```js export default { diff --git a/packages/plugin-svgr/src/index.ts b/packages/plugin-svgr/src/index.ts index 19f496eb5c..985682abe6 100644 --- a/packages/plugin-svgr/src/index.ts +++ b/packages/plugin-svgr/src/index.ts @@ -56,11 +56,14 @@ export const pluginSvgr = (options: PluginSvgrOptions = {}): RsbuildPlugin => ({ const { svgDefaultExport = 'url' } = options; const assetType = 'svg'; - const distDir = getDistPath(config, assetType); const filename = getFilename(config, assetType, isProd); const outputName = path.posix.join(distDir, filename); - const maxSize = config.output.dataUriLimit[assetType]; + const { dataUriLimit } = config.output; + const maxSize = + typeof dataUriLimit === 'number' + ? dataUriLimit + : dataUriLimit[assetType]; // delete origin rules chain.module.rules.delete(CHAIN_ID.RULE.SVG); @@ -114,7 +117,7 @@ export const pluginSvgr = (options: PluginSvgrOptions = {}): RsbuildPlugin => ({ .use(CHAIN_ID.USE.URL) .loader(path.join(__dirname, '../compiled', 'url-loader')) .options({ - limit: config.output.dataUriLimit.svg, + limit: maxSize, name: outputName, }), ); diff --git a/packages/shared/src/types/config/output.ts b/packages/shared/src/types/config/output.ts index ec0a00197b..e697b0023a 100644 --- a/packages/shared/src/types/config/output.ts +++ b/packages/shared/src/types/config/output.ts @@ -303,7 +303,7 @@ export interface NormalizedOutputConfig extends OutputConfig { }; filenameHash: boolean | string; assetPrefix: string; - dataUriLimit: NormalizedDataUriLimit; + dataUriLimit: number | NormalizedDataUriLimit; disableMinimize: boolean; minify: Minify; enableCssModuleTSDeclaration: boolean;