docs: update the doc

Author: SoonIter

examples/react-component-bundle-false/src/example.json

@@ -0,0 +1,4 @@
+{
+  "name": "foo",
+  "items": [1, 2]
+}

examples/react-component-bundle-false/src/index.tsx

@@ -1,17 +1,3 @@
-import type React from 'react';
-import { CounterButton } from './components/CounterButton';
-import { useCounter } from './useCounter';
-import './index.scss';
+import { name } from './example.json';
 
-export const Counter: React.FC = () => {
-  const { count, increment, decrement } = useCounter();
-
-  return (
-    <div>
-      <h1 className="counter-title">React</h1>
-      <h2 className="counter-text">Counter: {count}</h2>
-      <CounterButton onClick={decrement} label="-" />
-      <CounterButton onClick={increment} label="+" />
-    </div>
-  );
-};
+console.log(name); // 'foo';

examples/react-component-bundle/src/example.json

@@ -0,0 +1,4 @@
+{
+  "name": "foo",
+  "items": [1, 2]
+}

examples/react-component-bundle/src/index.tsx

@@ -1,17 +1,3 @@
-import type React from 'react';
-import { CounterButton } from './components/CounterButton';
-import { useCounter } from './useCounter';
-import './index.scss';
+import { name } from './example.json';
 
-export const Counter: React.FC = () => {
-  const { count, increment, decrement } = useCounter();
-
-  return (
-    <div>
-      <h1 className="counter-title">React</h1>
-      <h2 className="counter-text">Counter: {count}</h2>
-      <CounterButton onClick={decrement} label="-" />
-      <CounterButton onClick={increment} label="+" />
-    </div>
-  );
-};
+console.log(name); // 'foo';

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/zh/config/rsbuild/output.mdx

@@ -4,6 +4,12 @@ import { RsbuildDocBadge } from '@components/RsbuildDocBadge';
 
 与构建产物相关的选项。
 
+## output.assetPrefix <RsbuildDocBadge path="/config/output/asset-prefix" text="output.charset" />
+
+使用该选项设置静态资源的 URL 前缀，比如设置为 CDN 地址。
+
+在 [format](/config/lib/format) 为 `cjs` 或 `esm` 时，Rslib 默认会将 `output.assetPrefix` 设置为 `"auto"`。
+
 ## output.charset <RsbuildDocBadge path="/config/output/charset" text="output.charset" />
 
 指定输出文件的 [字符编码](https://developer.mozilla.org/en-US/docs/Glossary/Character_encoding)，以确保它们在不同的环境中能够正确显示。
@@ -24,6 +30,8 @@ import { RsbuildDocBadge } from '@components/RsbuildDocBadge';
 
 设置图片、字体、媒体等静态资源被自动内联为 base64 的体积阈值。
 
+在 [format](/config/lib/format) 为 `cjs` 或 `esm` 时，Rslib 默认会将 `output.dataUriLimit` 设置为 `0`，不内联任何静态资源，以便于应用侧的构建工具处理和优化。
+
 ## output.distPath <RsbuildDocBadge path="/config/output/dist-path" text="output.distPath" />
 
 设置构建产物的输出目录，Rsbuild 会根据产物的类型输出到对应的子目录下。

website/docs/zh/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/zh/guide/advanced/json-files.mdx

@@ -0,0 +1,101 @@
+# 引用 JSON 文件
+
+Rslib 支持在代码中引用 JSON 文件。
+
+## JSON 文件
+
+你可以直接在 JavaScript 文件中引用 JSON 文件。
+
+### 默认引用
+
+```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];
+```
+
+:::warning
+
+在 Bundle 模式下，JSON 文件支持默认引用和具名引用。
+
+在 Bundleless 模式下，JSON 文件仅支持具名引用。
+
+:::
+
+
+### 具名引用
+
+Rslib 同样支持通过 named import 来引用 JSON 文件：
+
+下面是一个使用示例，假设源码如下：
+
+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 title="example.json"
+{
+  "name": "foo",
+  "items": [1, 2]
+}
+```
+  </Tab>
+</Tabs>
+
+会根据配置文件中的 [产物结构](/guide/basic/output-structure) 配置，打包出如下产物：
+
+<Tabs>
+<Tab label="Bundle">
+<Tabs>
+  <Tab label="dist/index.js">
+```tsx
+var example_namespaceObject = {
+  "name": "foo"
+};
+console.log(example_namespaceObject.name);
+```
+
+  </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>