docs(assets): add assets, json, svgr usage document (#741)

Co-authored-by: Timeless0911 <[email protected]>

Author: SoonIter

tests/integration/asset/__snapshots__/index.test.ts.snap

@@ -13,7 +13,14 @@ export { draft_rslib_entry_namespaceObject as default };
 `;
 
 exports[`use json 1`] = `
-"JSON.parse('{"foo":1,"bar":["2"]}');
+"var data_namespaceObject = {
+    R: 1,
+    K: [
+        "2"
+    ]
+};
+console.log(data_namespaceObject.R);
+console.log(data_namespaceObject.K);
 "
 `;
 

tests/integration/asset/json/src/index.js

@@ -1,3 +1,4 @@
-import a from './assets/data.json';
+import { bar, foo } from './assets/data.json';
 
-a;
+console.log(foo);
+console.log(bar);

website/docs/en/config/rsbuild/output.mdx

@@ -4,9 +4,11 @@ import { RsbuildDocBadge } from '@components/RsbuildDocBadge';
 
 Options for build outputs.
 
-{/* ## output.assetPrefix <RsbuildDocBadge path="/config/output/asset-prefix" text="output.assetPrefix" /> */}
+## output.assetPrefix <RsbuildDocBadge path="/config/output/asset-prefix" text="output.assetPrefix" />
 
-{/* In [production mode](https://rsbuild.dev/config/mode), use this option to set the URL prefix for static assets, such as setting it to a CDN URL. */}
+Use this option to set the URL prefix for static assets, such as setting it to a CDN URL.
+
+When [format](/config/lib/format) is set to `cjs` or `esm`, Rslib defaults to setting `output.assetPrefix` to `"auto"`.
 
 ## output.charset <RsbuildDocBadge path="/config/output/charset" text="output.charset" />
 
@@ -28,6 +30,8 @@ For custom CSS Modules configuration.
 
 Set the size threshold to inline static assets such as images and fonts.
 
+When [format](/config/lib/format) is set to `cjs` or `esm`, Rslib defaults to setting `output.dataUriLimit` to `0`, without inlining any static assets, so that build tools on the application side can handle and optimize them.
+
 ## output.distPath <RsbuildDocBadge path="/config/output/dist-path" text="output.distPath" />
 
 Set the directory of the dist files. Rsbuild will output files to the corresponding subdirectory according to the file type.

website/docs/en/guide/advanced/_meta.json

@@ -2,6 +2,9 @@
   "third-party-deps",
   "output-compatibility",
   "dts",
+  "static-assets",
+  "svgr-files",
+  "json-files",
   "module-federation",
   "storybook"
 ]

website/docs/en/guide/advanced/json-files.mdx

@@ -0,0 +1,106 @@
+# Import JSON files
+
+Rslib supports import JSON files in code.
+
+## JSON file
+
+You can directly import JSON files in JavaScript files.
+
+:::warning
+
+In bundle mode, JSON files support both default and named import.
+
+In bundleless mode, JSON files only support named import.
+
+:::
+
+### Default import
+
+```json title="example.json"
+{
+  "name": "foo",
+  "items": [1, 2]
+}
+```
+
+```js title="index.js"
+import example from './example.json';
+
+console.log(example.name); // 'foo';
+console.log(example.items); // [1, 2];
+```
+
+### Named import
+
+Rslib also supports importing JSON files through named import.
+
+Here is an example, assuming the source code is as follows:
+
+import { Tabs, Tab } from '@theme';
+
+<Tabs>
+  <Tab label="src/index.ts">
+
+```js
+import { name } from './example.json';
+
+console.log(name); // 'foo';
+```
+
+  </Tab>
+  <Tab label="src/example.json">
+
+```json
+{
+  "name": "foo",
+  "items": [1, 2]
+}
+```
+
+  </Tab>
+</Tabs>
+
+Based on the configuration in the [output structure](/guide/basic/output-structure) specified in the configuration file, the following outputs will be emitted:
+
+<Tabs>
+<Tab label="bundle">
+<Tabs>
+  <Tab label="dist/index.js">
+
+```tsx
+var example_namespaceObject = {
+  u: 'foo',
+};
+console.log(example_namespaceObject.u);
+```
+
+  </Tab>
+</Tabs>
+</Tab>
+
+<Tab label="bundleless">
+
+<Tabs>
+  <Tab label="dist/index.js">
+
+```tsx
+import * as example from './example.js';
+
+console.log(example.name);
+```
+
+  </Tab>
+  <Tab label="dist/example.js">
+
+```tsx
+var example_namespaceObject = JSON.parse('{"name":"foo","items":[1,2]}');
+var __webpack_exports__items = example_namespaceObject.items;
+var __webpack_exports__name = example_namespaceObject.name;
+export { __webpack_exports__items as items, __webpack_exports__name as name };
+```
+
+  </Tab>
+</Tabs>
+</Tab>
+
+</Tabs>