feat: allow to configure dataUriLimit for extended assets (#3826)

web-infra-dev · Oct 25, 2024 · 94a861d · 94a861d
1 parent 630ba32
commit 94a861d
Show file tree

Hide file tree

Showing 12 changed files with 44 additions and 10 deletions.
diff --git a/packages/core/src/config.ts b/packages/core/src/config.ts
@@ -164,6 +164,7 @@ const getDefaultOutputConfig = (): NormalizedOutputConfig => ({
     font: DEFAULT_DATA_URL_SIZE,
     image: DEFAULT_DATA_URL_SIZE,
     media: DEFAULT_DATA_URL_SIZE,
+    assets: DEFAULT_DATA_URL_SIZE,
   },
   legalComments: 'linked',
   injectStyles: false,

diff --git a/packages/core/src/plugins/asset.ts b/packages/core/src/plugins/asset.ts
@@ -2,7 +2,6 @@ import path from 'node:path';
 import type { GeneratorOptionsByModuleType } from '@rspack/core';
 import {
   AUDIO_EXTENSIONS,
-  DEFAULT_DATA_URL_SIZE,
   FONT_EXTENSIONS,
   IMAGE_EXTENSIONS,
   VIDEO_EXTENSIONS,
@@ -134,9 +133,7 @@ export const pluginAsset = (): RsbuildPlugin => ({
         const { dataUriLimit } = config.output;
         const rule = chain.module.rule('additional-assets').test(assetsInclude);
         const maxSize =
-          typeof dataUriLimit === 'number'
-            ? dataUriLimit
-            : DEFAULT_DATA_URL_SIZE;
+          typeof dataUriLimit === 'number' ? dataUriLimit : dataUriLimit.assets;
 
         chainStaticAssetRule({
           emit: emitAssets,

diff --git a/packages/core/src/types/config.ts b/packages/core/src/types/config.ts
@@ -733,6 +733,11 @@ export type DataUriLimit = {
    * @default 4096
    */
   media?: number;
+  /**
+   * The data URI limit of other static assets.
+   * @default 4096
+   */
+  assets?: number;
 };
 
 export type Charset = 'ascii' | 'utf8';

diff --git a/packages/core/tests/__snapshots__/environments.test.ts.snap b/packages/core/tests/__snapshots__/environments.test.ts.snap
@@ -43,6 +43,7 @@ exports[`environment config > should normalize environment config correctly 1`]
       "namedExport": false,
     },
     "dataUriLimit": {
+      "assets": 4096,
       "font": 4096,
       "image": 4096,
       "media": 4096,
@@ -172,6 +173,7 @@ exports[`environment config > should normalize environment config correctly 2`]
       "namedExport": false,
     },
     "dataUriLimit": {
+      "assets": 4096,
       "font": 4096,
       "image": 4096,
       "media": 4096,
@@ -301,6 +303,7 @@ exports[`environment config > should print environment config when inspect confi
         "namedExport": false,
       },
       "dataUriLimit": {
+        "assets": 4096,
         "font": 4096,
         "image": 4096,
         "media": 4096,
@@ -461,6 +464,7 @@ exports[`environment config > should print environment config when inspect confi
         "namedExport": false,
       },
       "dataUriLimit": {
+        "assets": 4096,
         "font": 4096,
         "image": 4096,
         "media": 4096,
@@ -641,6 +645,7 @@ exports[`environment config > should support modify environment config by api.mo
         "namedExport": false,
       },
       "dataUriLimit": {
+        "assets": 4096,
         "font": 4096,
         "image": 4096,
         "media": 4096,
@@ -802,6 +807,7 @@ exports[`environment config > should support modify environment config by api.mo
         "namedExport": false,
       },
       "dataUriLimit": {
+        "assets": 4096,
         "font": 4096,
         "image": 4096,
         "media": 4096,
@@ -964,6 +970,7 @@ exports[`environment config > should support modify environment config by api.mo
         "namedExport": false,
       },
       "dataUriLimit": {
+        "assets": 4096,
         "font": 4096,
         "image": 4096,
         "media": 4096,
@@ -1129,6 +1136,7 @@ exports[`environment config > should support modify single environment config by
         "namedExport": false,
       },
       "dataUriLimit": {
+        "assets": 4096,
         "font": 4096,
         "image": 4096,
         "media": 4096,
@@ -1290,6 +1298,7 @@ exports[`environment config > should support modify single environment config by
         "namedExport": false,
       },
       "dataUriLimit": {
+        "assets": 4096,
         "font": 4096,
         "image": 4096,
         "media": 4096,

diff --git a/website/docs/en/config/output/data-uri-limit.mdx b/website/docs/en/config/output/data-uri-limit.mdx
@@ -3,13 +3,14 @@
 - **Type:**
 
 ```ts
-type DataUriLimitConfig =
+type DataUriLimit =
   | number
   | {
       svg?: number;
       font?: number;
       image?: number;
       media?: number;
+      assets?: number;
     };
 ```
 
@@ -21,6 +22,7 @@ const defaultDatUriLimit = {
   font: 4096,
   image: 4096,
   media: 4096,
+  assets: 4096,
 };
 ```
 
@@ -36,6 +38,7 @@ Detail:
 - `font`: The threshold of the font file.
 - `image`: The threshold of non-SVG images.
 - `media`: The threshold of media assets such as videos.
+- `assets`: The threshold of other static assets. Such as the assets defined in [Extend Asset Types](/guide/basic/static-assets#扩展静态资源类型).
 
 ## Example
 

diff --git a/website/docs/en/config/output/dist-path.mdx b/website/docs/en/config/output/dist-path.mdx
@@ -53,7 +53,7 @@ Detail:
 - `wasm`: The output directory of WebAssembly files.
 - `image`: The output directory of non-SVG images.
 - `media`: The output directory of media assets, such as videos.
-- `assets`: The output directory of assets except the types mentioned above, which also match [Asset Modules](https://rspack.dev/guide/features/asset-module).
+- `assets`: The output directory of other static assets. Such as the assets defined in [Extend Asset Types](/guide/basic/static-assets#extend-asset-types).
 
 ### Root Directory
 

diff --git a/website/docs/en/config/output/filename.mdx b/website/docs/en/config/output/filename.mdx
@@ -66,7 +66,7 @@ The following are the details of each filename:
 - `font`: The name of the font files.
 - `image`: The name of non-SVG images.
 - `media`: The name of media assets, such as video.
-- `assets`: The name of assets except the types mentioned above, which match [Asset Modules](https://rspack.dev/guide/features/asset-module).
+- `assets`: The name of other static assets. Such as the assets defined in [Extend Asset Types](/guide/basic/static-assets#extend-asset-types).
 
 > See [Output Files](/guide/basic/output-files) for more information.
 

diff --git a/website/docs/en/guide/basic/static-assets.mdx b/website/docs/en/guide/basic/static-assets.mdx
@@ -268,6 +268,14 @@ export default {
 
 For more information about asset modules, please refer to [Rspack - Asset modules](https://rspack.dev/guide/features/asset-module).
 
+### Related Configurations
+
+Extended static asset types will be affected by the following configurations:
+
+- [output.filename.assets](/config/output/filename): Set the name of extended static assets.
+- [output.distPath.assets](/config/output/dist-path): Set the output directory of extended static assets.
+- [output.dataUriLimit.assets](/config/output/data-uri-limit): Set the threshold of inlining for extended static assets.
+
 ## Custom Rules
 
 In some scenarios, you may need to bypass the built-in assets processing rules of Rsbuild and add some custom rules.

diff --git a/website/docs/zh/config/output/data-uri-limit.mdx b/website/docs/zh/config/output/data-uri-limit.mdx
@@ -3,13 +3,14 @@
 - **类型：**
 
 ```ts
-type DataUriLimitConfig =
+type DataUriLimit =
   | number
   | {
       svg?: number;
       font?: number;
       image?: number;
       media?: number;
+      assets?: number;
     };
 ```
 
@@ -21,6 +22,7 @@ const defaultDatUriLimit = {
   font: 4096,
   image: 4096,
   media: 4096,
+  assets: 4096,
 };
 ```
 
@@ -36,6 +38,7 @@ const defaultDatUriLimit = {
 - `font`：表示字体文件的体积阈值。
 - `image`：表示非 SVG 图片的体积阈值。
 - `media`：表示视频等媒体资源的体积阈值。
+- `assets`：其他静态资源的体积阈值。例如 [扩展静态资源类型](/guide/basic/static-assets#扩展静态资源类型) 中定义的资源。
 
 ## 示例
 

diff --git a/website/docs/zh/config/output/dist-path.mdx b/website/docs/zh/config/output/dist-path.mdx
@@ -53,7 +53,7 @@ const defaultDistPath = {
 - `wasm`：表示 WebAssembly 文件的输出目录。
 - `image`：表示非 SVG 图片的输出目录。
 - `media`：表示视频等媒体资源的输出目录。
-- `assets`：表示除了上述类型之外，其他也命中 [Asset Modules](https://rspack.dev/guide/features/asset-module) 的文件的输出目录。
+- `assets`：其他静态资源的输出目录。例如 [扩展静态资源类型](/guide/basic/static-assets#扩展静态资源类型) 中定义的资源。
 
 ### 根目录
 

diff --git a/website/docs/zh/config/output/filename.mdx b/website/docs/zh/config/output/filename.mdx
@@ -65,7 +65,7 @@ const prodDefaultFilename = {
 - `font`：表示字体文件的名称。
 - `image`：表示非 SVG 图片的名称。
 - `media`：表示视频等媒体资源的名称。
-- `assets`：表示除了上述类型之外，其他命中 [Asset Modules](https://rspack.dev/guide/features/asset-module) 的文件名称。
+- `assets`：其他静态资源的名称。例如 [扩展静态资源类型](/guide/basic/static-assets#扩展静态资源类型) 中定义的资源。
 
 > 查看 [构建产物目录](/guide/basic/output-files) 了解更多。
 

diff --git a/website/docs/zh/guide/basic/static-assets.mdx b/website/docs/zh/guide/basic/static-assets.mdx
@@ -268,6 +268,14 @@ export default {
 
 关于 asset modules 的更多介绍，请参考 [Rspack - Asset modules](https://rspack.dev/guide/features/asset-module)。
 
+### 相关配置
+
+扩展的静态资源类型会受到以下配置项的影响：
+
+- [output.filename.assets](/config/output/filename)：设置扩展的静态资源的名称。
+- [output.distPath.assets](/config/output/dist-path)：设置扩展的静态资源的输出目录。
+- [output.dataUriLimit.assets](/config/output/data-uri-limit)：设置扩展的静态资源内联的体积阈值。
+
 ## 自定义规则
 
 在某些场景下，你可能需要跳过 Rsbuild 内置的静态资源处理规则，并添加一些自定义规则。