feat: allow output.dataUriLimit to be a number (#1755)

web-infra-dev · Mar 7, 2024 · b16ef7b · b16ef7b
1 parent 87ae72d
commit b16ef7b
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 23 deletions.
diff --git a/.changeset/soft-dryers-brake.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;