docs: add bundleless mode img and polish the some words (#737)

web-infra-dev · Feb 6, 2025 · befb09a · befb09a
1 parent a6f8ca9
commit befb09a
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 6 deletions.
diff --git a/website/docs/en/config/lib/bundle.mdx b/website/docs/en/config/lib/bundle.mdx
@@ -130,7 +130,7 @@ export default defineConfig({
 });
 ```
 
-When `bundle` is set to `false`, as known as bundleless mode, Rslib will only transform the code into multiple files.
+When `bundle` is set to `false`, as known as bundleless mode, Rslib will transform the code into multiple files.
 
 ```diff
   .

diff --git a/website/docs/en/guide/basic/output-structure.mdx b/website/docs/en/guide/basic/output-structure.mdx
@@ -8,9 +8,11 @@ A bundle is a package of build artifacts, which may be a single file or multiple
 
 bundleless, on the other hand, means that each source file is compiled and built separately, but not bundled together. Each output file can be found with its corresponding source code file. The process of bundleless build can also be understood as the process of code conversion of source files only.
 
+![rslib-bundleless-mode](https://assets.rspack.dev/rslib/rslib-bundleless-mode.png)
+
 They have their own benefits.
 
-- bundle can reduce the size of build artifacts and also pre-package dependencies to reduce the size of installed dependencies. Packaging libraries in advance can speed up application project builds.
+- bundle can reduce the size of build artifacts and also prebundle dependencies to reduce the size of installed dependencies and increase security. Packaging libraries in advance can speed up application project builds.
 - bundleless maintains the original file structure and is more conducive to debugging and tree shaking.
 
 :::warning

diff --git a/website/docs/zh/config/lib/bundle.mdx b/website/docs/zh/config/lib/bundle.mdx
@@ -3,7 +3,7 @@
 - **类型：** `boolean`
 - **默认值：** `undefined`
 
-指定是否打包库，当 `bundle` 设置为 `true` 时称为 bundle 模式，设置为 `false` 时称为 bundleless 模式。更多详情请参见 [bundle / bundleless](/guide/basic/output-structure#bundle--bundleless)。
+指定是否打包库，当 `bundle` 设置为 `true` 时称为 bundle 模式，设置为 `false` 时称为 bundleless 模式。更多详情请参考 [bundle / bundleless](/guide/basic/output-structure#bundle--bundleless)。
 
 ## 设置入口
 
@@ -128,7 +128,7 @@ export default defineConfig({
 });
 ```
 
-当 `bundle` 设置为 `false` 时，也称为 bundleless 模式，Rslib 只会将代码转换为多个文件。
+当 `bundle` 设置为 `false` 时，也称为 bundleless 模式，Rslib 会将代码转换为多个文件。
 
 ```diff
   .

diff --git a/website/docs/zh/config/lib/syntax.mdx b/website/docs/zh/config/lib/syntax.mdx
@@ -25,7 +25,7 @@ type Syntax = EcmaScriptVersion | string[];
 
 配置 JavaScript 和 CSS 将被降级的语法版本。
 
-参见 [产物兼容性 - 语法降级](/guide/advanced/output-compatibility) 了解更多详情。
+参考 [产物兼容性 - 语法降级](/guide/advanced/output-compatibility) 了解更多详情。
 
 ## 设置 ECMAScript 版本
 

diff --git a/website/docs/zh/guide/basic/output-structure.mdx b/website/docs/zh/guide/basic/output-structure.mdx
@@ -8,9 +8,11 @@
 
 而 bundleless，则是指对每个源文件单独进行编译构建，但是并不将它们打包在一起。每一个产物文件都可以找到与之相对应的源码文件。bundleless 构建的过程，也可以理解为仅对源文件进行代码转换的过程。
 
+![rslib-bundleless-mode](https://assets.rspack.dev/rslib/rslib-bundleless-mode.png)
+
 它们有各自的好处：
 
-- bundle 可以减少构建产物的体积，也可以对依赖预打包，减小安装依赖的体积。提前对库进行打包，可以加快应用项目构建的速度。
+- bundle 可以减少构建产物的体积，也可以对依赖预打包，减小安装依赖的体积，增加安全性。提前对库进行打包，可以加快应用项目构建的速度。
 - bundleless 则是可以保持原有的文件结构，更有利于调试和 tree shaking。
 
 :::warning
-Original file line number
+Diff line change
@@ Expand Up / @@ -130,7 +130,7 @@ export default defineConfig({ @@
     });
     ```
-    When `bundle` is set to `false`, as known as bundleless mode, Rslib will only transform the code into multiple files.
+    When `bundle` is set to `false`, as known as bundleless mode, Rslib will transform the code into multiple files.
     ```diff
       .
@@ Expand Down @@