docs: complete en static assets

Author: SoonIter

website/docs/en/guide/advanced/static-assets.mdx

@@ -1,32 +1,32 @@
 # Import static assets
 
-Rslib 支持在代码中引用图片、字体、音频、视频等类型的静态资源。
+Rslib supports import static assets, including images, fonts, audio and video.
 
-## 静态资源格式
+## Assets format
 
-以下是 Rslib 默认支持的静态资源格式：
+The following are the formats supported by Rslib by default:
 
-- **图片**：png、jpg、jpeg、gif、svg、bmp、webp、ico、apng、avif、tif、tiff、jfif、pjpeg、pjp、cur。
-- **字体**：woff、woff2、eot、ttf、otf、ttc。
-- **音频**：mp3、wav、flac、aac、m4a、opus。
-- **视频**：mp4、webm、ogg、mov。
+- **images**: png, jpg, jpeg, gif, svg, bmp, webp, ico, apng, avif, tif, tiff, jfif, pjpeg, pjp, cur.
+- **fonts**: woff, woff2, eot, ttf, otf, ttc.
+- **audio**: mp3, wav, flac, aac, m4a, opus.
+- **video**: mp4, webm, ogg, mov.
 
-如果你需要引用其他格式的静态资源，请参考 [扩展静态资源类型](#扩展静态资源类型)。
+To import assets in other formats, refer to [Extend Asset Types](#extend-asset-types).
 
-## 在 JS 文件中引用
+## Import assets in JS file
 
-在 JS 文件中，可以直接通过 `import` 的方式引用相对路径下的静态资源：
+In JS files, you can directly refer to static assets with relative paths through `import`:
 
 ```tsx
-// 引用 src/assets 目录下的 logo.png 图片
+// Import the logo.png image in the 'src/assets' directory
 import logo from './assets/logo.png';
 
 console.log(logo); // "/static/logo.[hash].png"
 
 export default = () => <img src={logo} />;
 ```
 
-也可以使用**路径别名**来引用：
+Import with **alias** is also available:
 
 ```tsx
 import logo from '@/assets/logo.png';
@@ -36,9 +36,9 @@ console.log(logo); // "/static/logo.[hash].png"
 export default = () => <img src={logo} />;
 ```
 
-在 [format](/config/lib/format) 为 `cjs` 或 `esm` 时，Rslib 将产物视为会被其他打包工具再次消费的中间产物。Rslib 会在代码转换时将源文件转化为一个 JS 文件和一个根据 [output.distPath](/config/rsbuild/output#outputdistpath) 输出的静态资源文件，用于保留对静态资源的 `import` 语句。
+When the [format](/config/lib/format) is set to `cjs` or `esm`, Rslib treats the output as an mid-level artifact that will be consumed by other build tools again. During the code transformation, Rslib transforms the source file into a JS file and a static asset file that is output according to [output.distPath](/config/rsbuild/output#outputdistpath), which is used to preserve the `import` statements for static assets.
 
-下面是一个使用示例，假设源码如下：
+The following is an example of usage, assuming the source code is as follows:
 
 import { Tabs, Tab } from '@theme';
 
@@ -57,7 +57,7 @@ console.log(logo);
   </Tab>
 </Tabs>
 
-会根据配置文件中的 [产物结构](/guide/basic/output-structure) 配置，打包出如下产物：
+Based on the configuration in the [output structure](/guide/basic/output-structure) in the configuration file, the following outputs will be packaged:
 
 <Tabs>
 <Tab label="Bundle">
@@ -105,27 +105,27 @@ export { logo_rslib_entry_namespaceObject as default };
 
 </Tabs>
 
-## 在 CSS 文件中引用
+## Import assets in CSS file
 
-在 CSS 文件中，可以引用相对路径下的静态资源：
+In CSS files, you can import static assets with relative paths:
 
 ```css title="src/index.css"
 .logo {
   background-image: url('./assets/logo.png');
 }
 ```
 
-也支持使用**路径别名**来引用：
+Import with **alias** are also supported:
 
 ```css title="src/index.css"
 .logo {
   background-image: url('@/assets/logo.png');
 }
 ```
 
-在 [format](/config/lib/format) 为 `cjs` 或 `esm` 时，Rslib 将产物视为会被其他打包工具再次消费的中间产物。Rslib 会通过设置 [output.assetPrefix](/config/rsbuild/output#outputassetprefix) 为 `"auto"` 来使 CSS 产物中保留相对引用路径。
+When the [format](/config/lib/format) is `cjs` or `esm`, Rslib treats the output as an intermediate product that will be consumed again by other packaging tools. Rslib preserves relative reference paths in CSS outputs by setting [output.assetPrefix](/config/rsbuild/output#outputassetprefix) to `"auto"`.
 
-下面是一个使用示例，假设源码如下：
+The following is an example of usage, assuming the source code is as follows:
 
 <Tabs>
   <Tab label="src/index.css">
@@ -147,7 +147,7 @@ export { logo_rslib_entry_namespaceObject as default };
   </Tab>
 </Tabs>
 
-会打包出如下产物：
+The following output will be packaged:
 
 <Tabs>
 
@@ -174,9 +174,9 @@ export { logo_rslib_entry_namespaceObject as default };
 
 ---
 
-### 在 CSS 中忽略某些文件引用
+### Ignore some assets imported in CSS
 
-如果需要在 CSS 文件中引用绝对路径下的静态资源：
+If you need to import a static asset with an absolute path in a CSS file:
 
 ```css
 @font-face {
@@ -185,7 +185,7 @@ export { logo_rslib_entry_namespaceObject as default };
 }
 ```
 
-默认情况下，Rslib 内置的 `css-loader` 会解析 `url()` 中的绝对路径并寻找指定的模块。如果你希望跳过绝对路径的解析，可以配置 [`tools.cssLoader`](/config/rsbuild/tools#toolscssloader) 来过滤指定的路径，被过滤的路径将被原样保留在代码中。
+By default, the built-in `css-loader` in Rslib will resolve absolute paths in `url()` and look for the specified modules. If you want to skip resolving absolute paths, you can configure [`tools.cssLoader`](/config/rsbuild/tools#toolscssloader) to filter out the specified paths. The filtered paths are left as they are in the code.
 
 ```ts
 export default {
@@ -204,54 +204,54 @@ export default {
 };
 ```
 
-## 静态资源内联
+## Inline static assets
 
-在开发组件库这种会被其他打包工具再次消费的中间产物时，一般不会内联静态资源，交给应用侧的构建工具处理和优化。
+When developing libraries that will be consumed again by other build tools as intermediate products, static assets are typically not inlined, leaving the handling and optimization to the build tools on the application side.
 
-自动内联的体积阈值可以通过 [output.dataUriLimit](/config/rsbuild/output#outputdataurilimit) 配置项修改，在 [format](/config/lib/format) 为 `cjs` 或 `esm` 时，Rslib 默认会将 `output.dataUriLimit` 设置为 `0`，不内联任何静态资源。
+The automatic inlining size threshold can be modified via the [output.dataUriLimit](/config/rsbuild/output#outputdataurilimit) configuration option. When the [format](/config/lib/format) is `cjs` or `esm`, Rslib defaults the `output.dataUriLimit` to `0`, not inlining any static assets.
 
-## 构建产物目录
+## Build Output Directory
 
-当静态资源被引用后，会自动被输出到构建产物的目录下，你可以：
+Once static assets are referenced, they will automatically be output to the build output directory. You can:
 
-- 通过 [output.filename](/config/rsbuild/output#outputfilename) 来修改产物的文件名。
-- 通过 [output.distPath](/config/rsbuild/output#outputdistpath) 来修改产物的输出路径。
+- Modify the filename of the output through [output.filename](/config/rsbuild/output#outputfilename).
+- Change the output path of the product through [output.distPath](/config/rsbuild/output#outputdistpath).
 
-## 类型声明
+## Type declaration
 
-当你在 TypeScript 代码中引用静态资源时，TypeScript 可能会提示该模块缺少类型定义：
+When you import static assets in TypeScript code, TypeScript may prompt that the module is missing a type definition:
 
 ```
 TS2307: Cannot find module './logo.png' or its corresponding type declarations.
 ```
 
-此时你需要为静态资源添加类型声明文件，请在项目中创建 `src/env.d.ts` 文件，并添加相应的类型声明。
+To fix this, you need to add a type declaration file for the static assets, please create a `src/env.d.ts` file, and add the corresponding type declaration.
 
-- 方法一：如果项目里安装了 `@rslib/core` 包，你可以直接引用 `@rslib/core` 提供的**预设类型**：
+- Method 1: If the `@rslib/core` package is installed, you can reference the **preset types** provided by `@rslib/core`:
 
 ```ts
 /// <reference types="@rslib/core/types" />
 ```
 
-- 方法二：手动添加需要的类型声明：
+- Method 2: Manually add the required type declarations:
 
 ```ts title="src/env.d.ts"
-// 以 png 图片为例
+// Taking png images as an example
 declare module '*.png' {
-  const url: string;
-  export default url;
+  const content: string;
+  export default content;
 }
 ```
 
-添加类型声明后，如果依然存在上述错误提示，请尝试重启当前 IDE，或者调整 `env.d.ts` 所在的目录，使 TypeScript 能够正确识别类型定义。
+After adding the type declaration, if the type error still exists, you can try to restart the current IDE, or adjust the directory where `env.d.ts` is located, making sure the TypeScript can correctly identify the type definition.
 
-## 扩展静态资源类型
+## Extend asset types
 
-如果 Rslib 内置的静态资源类型不能满足你的需求，可以通过以下方式扩展额外的静态资源类型。
+If the built-in static assets type of Rslib does not meet your needs, you can extend the additional static assets type in the following ways.
 
-### 使用 `source.assetsInclude`
+### Use `source.assetsInclude`
 
-通过 [source.assetsInclude](/config/rsbuild/source#sourceassetsinclude) 配置项，你可以指定需要被视为静态资源的额外文件类型。
+By using the [source.assetsInclude](/config/rsbuild/source#sourceassetsinclude) config, you can specify additional file types to be treated as static assets.
 
 ```ts title="rslib.config.ts"
 export default {
@@ -261,19 +261,19 @@ export default {
 };
 ```
 
-添加以上配置后，你就可以在代码里引用 `*.pdf` 文件了，比如：
+After adding the above configuration, you can import `*.pdf` files in your code, for example:
 
 ```js
 import myFile from './static/myFile.pdf';
 
-console.log(myFile); // "/static/assets/myFile.[hash].pdf"
+console.log(myFile);
 ```
 
-### 使用 `tools.rspack`
+### Use `tools.rspack`
 
-可以通过 [tools.rspack](/config/rsbuild/tools#toolsrspack) 来修改内置的 Rspack 配置，并添加自定义的静态资源处理规则。
+You can modify the built-in Rspack configuration and add custom static assets handling rules via [tools.rspack](/config/rsbuild/tools#toolsrspack).
 
-比如，把 `*.pdf` 文件当做静态资源输出到产物目录，可以添加以下配置：
+For example, to treat `*.pdf` files as assets and output them to the dist directory, you can add the following configuration:
 
 ```ts title="rslib.config.ts"
 export default {
@@ -294,4 +294,4 @@ export default {
 };
 ```
 
-关于 asset modules 的更多介绍，请参考 [Rspack - Asset modules](https://rspack.dev/guide/features/asset-module)。
+For more information about asset modules, please refer to [Rspack - Asset modules](https://rspack.dev/guide/features/asset-module).