Merge pull request #36 from dragooncjw/fix/site-performance

fix: site performance & revert logo

.github/workflows/deploy.yml

@@ -54,6 +54,7 @@ jobs:
         uses: actions/upload-pages-artifact@v3
         with:
           path: docs
+          name: github-pages
 
   deploy:
     permissions:
@@ -69,5 +70,5 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v4
 

apps/docs/rspress.config.ts

@@ -11,6 +11,23 @@ export default defineConfig({
   builderConfig: {
     tools: {
       rspack: {
+        optimization: {
+          splitChunks: {
+            chunks: 'all', // 拆分所有模块，包括异步和同步
+            minSize: 30 * 1024, // 30KB 以下不拆分
+            maxSize: 500 * 1024, // 500KB 以上强制拆分
+            minChunks: 1, // 最少被引用 1 次就可以拆分
+            automaticNameDelimiter: '-',
+            cacheGroups: {
+              vendors: {
+                test: /[\\/]node_modules[\\/]/,
+                name: 'vendors',
+                chunks: 'all',
+                priority: -10, // 优先级
+              },
+            },
+          },
+        },
         // 禁用 ES 模块输出（启用 CommonJS）
         experiments: {
           outputModule: false,

apps/docs/src/en/api/plugins/config-theme.mdx

@@ -406,7 +406,7 @@ export default defineConfig({
         icon: 'github',
         mode: 'dom',
         content:
-          '<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/rjhwzy/ljhwZthlaukjlkulzlp/rspress/rspress-navbar-logo-0904.png" alt="logo" id="logo" class="mr-4 rspress-logo dark:hidden">',
+          '<img loading="lazy" src="https://lf3-static.bytednsdoc.com/obj/eden-cn/rjhwzy/ljhwZthlaukjlkulzlp/rspress/rspress-navbar-logo-0904.png" alt="logo" id="logo" class="mr-4 rspress-logo dark:hidden">',
       },
     ],
   },

apps/docs/src/en/examples/fixed-layout/fixed-feature-overview.mdx

@@ -26,7 +26,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-fixed-layout
     <td>Minimap</td>
     <td>
       <div className="rs-center">
-        <img src="@/public/fixed-layout/minimap.gif"  />
+        <img loading="lazy" src="@/public/fixed-layout/minimap.gif"  />
       </div>
     </td>
   </tr>
@@ -34,7 +34,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-fixed-layout
     <td>Undo/Redo</td>
     <td>
       <div className="rs-center">
-        <img src="@/public/fixed-layout/redo-undo.gif"  />
+        <img loading="lazy" src="@/public/fixed-layout/redo-undo.gif"  />
       </div>
     </td>
   </tr>
@@ -42,7 +42,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-fixed-layout
     <td>Copy/Paste (Support Shortcut)</td>
     <td>
       <div className="rs-center">
-        <img src="@/public/fixed-layout/copypaste.gif"  />
+        <img loading="lazy" src="@/public/fixed-layout/copypaste.gif"  />
       </div>
     </td>
   </tr>
@@ -55,7 +55,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-fixed-layout
     <td>
       <div className="rs-center">
         <div className="rs-center">
-          <img src="@/public/fixed-layout/dragdrop.gif"  />
+          <img loading="lazy" src="@/public/fixed-layout/dragdrop.gif"  />
         </div>
       </div>
     </td>
@@ -66,7 +66,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-fixed-layout
     </td>
     <td>
       <div className="rs-center">
-        <img src="@/public/fixed-layout/layout-change.gif"  />
+        <img loading="lazy" src="@/public/fixed-layout/layout-change.gif"  />
       </div>
     </td>
   </tr>
@@ -76,7 +76,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-fixed-layout
     </td>
     <td>
       <div className="rs-center">
-        <img src="@/public/fixed-layout/fold.gif"  />
+        <img loading="lazy" src="@/public/fixed-layout/fold.gif"  />
       </div>
     </td>
   </tr>
@@ -86,7 +86,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-fixed-layout
     </td>
     <td>
       <div className="rs-center">
-        <img src="@/public/fixed-layout/group.gif"  />
+        <img loading="lazy" src="@/public/fixed-layout/group.gif"  />
       </div>
     </td>
   </tr>

apps/docs/src/en/examples/free-layout/free-feature-overview.mdx

@@ -29,7 +29,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-free-layout
     </td>
     <td>
       <div className="rs-center">
-        <img src="@/public/free-layout/autolayout.gif"  />
+        <img loading="lazy" src="@/public/free-layout/autolayout.gif"  />
       </div>
     </td>
   </tr>
@@ -39,7 +39,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-free-layout
     </td>
     <td>
       <div className="rs-center">
-        <img src="@/public/free-layout/snap.gif"  />
+        <img loading="lazy" src="@/public/free-layout/snap.gif"  />
       </div>
     </td>
   </tr>

apps/docs/src/en/guide/advanced/form.mdx

@@ -130,7 +130,7 @@ The following example shows:
 3. How to display the error of the array item
 
 <div className="rs-center" >
-  <img src="@/public/field-array.gif"  style={{ maxWidth: 600 }}/>
+  <img loading="lazy" src="@/public/field-array.gif"  style={{ maxWidth: 600 }}/>
 </div>
 
 ```tsx pure
@@ -203,7 +203,7 @@ export const arrayMeta: FormMeta = {
 Validation logic is configured globally, and the validation logic is declared by the form item path
 
 <div className="rs-center" >
-  <img src="@/public/form-validate.gif"  style={{ maxWidth: 600 }}/>
+  <img loading="lazy" src="@/public/form-validate.gif"  style={{ maxWidth: 600 }}/>
 </div>
 
 ```tsx pure
@@ -304,7 +304,7 @@ The following example shows:
 - onArrayDelete
 
 <div className="rs-center" >
-  <img src="@/public/form-effect.gif"  style={{ maxWidth: 600 }}/>
+  <img loading="lazy" src="@/public/form-effect.gif"  style={{ maxWidth: 600 }}/>
 </div>
 
 ```tsx pure

apps/docs/src/en/guide/concepts/reactflow.mdx

@@ -26,11 +26,11 @@ Compared to ReactFlow, FlowGram aims to provide a complete out-of-the-box soluti
   <tr>
     <td>
       <div className="rs-tip">Since events are bound to SVG, it's difficult to click on elements when zoomed out</div>
-      <img src="@/public/reactflow/reactflow-render.gif"/>
+      <img loading="lazy" src="@/public/reactflow/reactflow-render.gif"/>
     </td>
     <td>
       <div className="rs-tip">FlowGram's events use global mousemove monitoring and calculate positions with Threshold, allowing clicks even when zoomed out, while also supporting edge reconnection</div>
-      <img src="@/public/reactflow/reactflow-interaction.gif"/>
+      <img loading="lazy" src="@/public/reactflow/reactflow-interaction.gif"/>
     </td>
   </tr>
 </table>

apps/docs/src/en/guide/index/introduction.mdx

@@ -5,8 +5,8 @@ See: https://reactflow.dev/examples/nodes/custom-node
 - ReactFlow's interaction customization cost is high. As shown below, it's difficult to select points when the canvas is zoomed out, and it doesn't support drag-and-drop line reconnection
 <table>
   <tr>
-    <td><img src="@/public/reactflow/reactflow-render.gif"/></td>
-    <td><img src="@/public/reactflow/reactflow-interaction.gif"/></td>
+    <td><img loading="lazy" src="@/public/reactflow/reactflow-render.gif"/></td>
+    <td><img loading="lazy" src="@/public/reactflow/reactflow-interaction.gif"/></td>
   </tr>
 </table>
 
@@ -98,7 +98,7 @@ Suitable for decoupling large data objects, often used in games, where each char
 
 :::
 
-<img style={{filter: 'invert(0.9)'}} src="./assets/ecs.png"/>
+<img loading="lazy" style={{filter: 'invert(0.9)'}} src="./assets/ecs.png"/>
 
 ReduxStore pseudo code
 ```jsx pure

apps/docs/src/en/guide/index/variable-engine.mdx

@@ -62,8 +62,8 @@ An AST node used to declare new variables, using a unique identifier to point to
 
 <table>
   <tr>
-    <td><img src="./assets/variable-type1.png"/></td>
-    <td><img src="./assets/variable-type2.png"/></td>
+    <td><img loading="lazy" src="./assets/variable-type1.png"/></td>
+    <td><img loading="lazy" src="./assets/variable-type2.png"/></td>
   </tr>
 </table>
 

apps/docs/src/en/guide/introduction.mdx

@@ -23,7 +23,7 @@ In today's AI-driven era, we are focusing more on how to empower workflows with
       Fixed layout with nodes/branches supporting specified position drag and drop, offering compound nodes like branches and loops
     </div>
     <div>
-      <img src="@/public/fixed-layout/fixed-layout-demo.gif"/>
+      <img loading="lazy" src="@/public/fixed-layout/fixed-layout-demo.gif"/>
     </div>
   </div>
   <div>
@@ -36,7 +36,7 @@ In today's AI-driven era, we are focusing more on how to empower workflows with
       Free layout where nodes can be moved to any position and connected through free connections
     </div>
     <div>
-      <img src="@/public/free-layout/free-layout-demo.gif"/>
+      <img loading="lazy" src="@/public/free-layout/free-layout-demo.gif"/>
     </div>
   </div>
 </div>
@@ -53,7 +53,7 @@ Providing a set of interactive best practices for smoother workflow operations
         Motion animations in web applications can be traced back to Material Design, which suggests that element changes in width, height, or position need a transition process. The canvas engine separates the drawing of lines and nodes, greatly reducing the cost of implementing motion transitions
       </p>
       <div className="rs-center">
-        <img src="@/public/common/motion.gif" />
+        <img loading="lazy" src="@/public/common/motion.gif" />
       </div>
     </td>
   </tr>
@@ -64,7 +64,7 @@ Providing a set of interactive best practices for smoother workflow operations
         Gestures refer to Mac touchpad two-finger spread/pinch for canvas zoom in/out, or holding space to drag the canvas, interactions inspired by Sketch and Figma
       </p>
       <div className="rs-center">
-        <img src="@/public/common/touch-pad.gif"  />
+        <img loading="lazy" src="@/public/common/touch-pad.gif"  />
       </div>
     </td>
   </tr>
@@ -72,7 +72,7 @@ Providing a set of interactive best practices for smoother workflow operations
     <td>Minimap</td>
     <td>
       <div className="rs-center">
-        <img src="@/public/fixed-layout/minimap.gif"  />
+        <img loading="lazy" src="@/public/fixed-layout/minimap.gif"  />
       </div>
     </td>
   </tr>
@@ -80,7 +80,7 @@ Providing a set of interactive best practices for smoother workflow operations
     <td>Undo/Redo</td>
     <td>
       <div className="rs-center">
-        <img src="@/public/fixed-layout/redo-undo.gif"  />
+        <img loading="lazy" src="@/public/fixed-layout/redo-undo.gif"  />
       </div>
     </td>
   </tr>
@@ -88,7 +88,7 @@ Providing a set of interactive best practices for smoother workflow operations
     <td>Copy/Paste (Shortcut Support)</td>
     <td>
       <div className="rs-center">
-        <img src="@/public/fixed-layout/copypaste.gif"  />
+        <img loading="lazy" src="@/public/fixed-layout/copypaste.gif"  />
       </div>
     </td>
   </tr>
@@ -102,7 +102,7 @@ Providing a set of interactive best practices for smoother workflow operations
     <td>
       <div className="rs-center">
         <div className="rs-center">
-          <img src="@/public/fixed-layout/dragdrop.gif"  />
+          <img loading="lazy" src="@/public/fixed-layout/dragdrop.gif"  />
         </div>
       </div>
     </td>
@@ -114,7 +114,7 @@ Providing a set of interactive best practices for smoother workflow operations
     </td>
     <td>
       <div className="rs-center">
-        <img src="@/public/fixed-layout/layout-change.gif"  />
+        <img loading="lazy" src="@/public/fixed-layout/layout-change.gif"  />
       </div>
     </td>
   </tr>
@@ -125,7 +125,7 @@ Providing a set of interactive best practices for smoother workflow operations
     </td>
     <td>
       <div className="rs-center">
-        <img src="@/public/fixed-layout/fold.gif"  />
+        <img loading="lazy" src="@/public/fixed-layout/fold.gif"  />
       </div>
     </td>
   </tr>
@@ -136,7 +136,7 @@ Providing a set of interactive best practices for smoother workflow operations
     </td>
     <td>
       <div className="rs-center">
-        <img src="@/public/fixed-layout/group.gif"  />
+        <img loading="lazy" src="@/public/fixed-layout/group.gif"  />
       </div>
     </td>
   </tr>
@@ -147,7 +147,7 @@ Providing a set of interactive best practices for smoother workflow operations
     </td>
     <td>
       <div className="rs-center">
-        <img src="@/public/free-layout/autolayout.gif"  />
+        <img loading="lazy" src="@/public/free-layout/autolayout.gif"  />
       </div>
     </td>
   </tr>
@@ -158,7 +158,7 @@ Providing a set of interactive best practices for smoother workflow operations
     </td>
     <td>
       <div className="rs-center">
-        <img src="@/public/free-layout/snap.gif"  />
+        <img loading="lazy" src="@/public/free-layout/snap.gif"  />
       </div>
     </td>
   </tr>
@@ -169,7 +169,7 @@ Providing a set of interactive best practices for smoother workflow operations
     </td>
     <td>
       <div className="rs-center">
-        <img src="@/public/free-layout/loop.gif"  />
+        <img loading="lazy" src="@/public/free-layout/loop.gif"  />
       </div>
     </td>
   </tr>
@@ -185,7 +185,7 @@ Providing a set of interactive best practices for smoother workflow operations
       </a>
     </div>
     <div>
-      <img src="@/public/ref-coze-en.png"/>
+      <img loading="lazy" src="@/public/ref-coze-en.png"/>
     </div>
   </div>
   <div>
@@ -193,7 +193,7 @@ Providing a set of interactive best practices for smoother workflow operations
       Lark Low-code Platform Workflow
     </a>
     <div>
-      <img src="@/public/ref-apaas-en.png"/>
+      <img loading="lazy" src="@/public/ref-apaas-en.png"/>
     </div>
   </div>
   <div>
@@ -201,7 +201,7 @@ Providing a set of interactive best practices for smoother workflow operations
       Lark Base Workflow
     </a>
     <div>
-      <img src="@/public/ref-bitable-en.png"/>
+      <img loading="lazy" src="@/public/ref-bitable-en.png"/>
     </div>
   </div>
 </div>

apps/docs/src/zh/api/plugins/config-theme.mdx

@@ -406,7 +406,7 @@ export default defineConfig({
         icon: 'github',
         mode: 'dom',
         content:
-          '<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/rjhwzy/ljhwZthlaukjlkulzlp/rspress/rspress-navbar-logo-0904.png" alt="logo" id="logo" class="mr-4 rspress-logo dark:hidden">',
+          '<img loading="lazy" src="https://lf3-static.bytednsdoc.com/obj/eden-cn/rjhwzy/ljhwZthlaukjlkulzlp/rspress/rspress-navbar-logo-0904.png" alt="logo" id="logo" class="mr-4 rspress-logo dark:hidden">',
       },
     ],
   },

apps/docs/src/zh/examples/fixed-layout/fixed-feature-overview.mdx

@@ -26,7 +26,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-fixed-layout
     <td>缩略图</td>
     <td>
       <div className="rs-center">
-        <img src="@/public/fixed-layout/minimap.gif"  />
+        <img loading="lazy" src="@/public/fixed-layout/minimap.gif"  />
       </div>
     </td>
   </tr>
@@ -34,7 +34,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-fixed-layout
     <td>撤销/重做</td>
     <td>
       <div className="rs-center">
-        <img src="@/public/fixed-layout/redo-undo.gif"  />
+        <img loading="lazy" src="@/public/fixed-layout/redo-undo.gif"  />
       </div>
     </td>
   </tr>
@@ -42,7 +42,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-fixed-layout
     <td>复制/粘贴(支持快捷键)</td>
     <td>
       <div className="rs-center">
-        <img src="@/public/fixed-layout/copypaste.gif"  />
+        <img loading="lazy" src="@/public/fixed-layout/copypaste.gif"  />
       </div>
     </td>
   </tr>
@@ -55,7 +55,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-fixed-layout
     <td>
       <div className="rs-center">
         <div className="rs-center">
-          <img src="@/public/fixed-layout/dragdrop.gif"  />
+          <img loading="lazy" src="@/public/fixed-layout/dragdrop.gif"  />
         </div>
       </div>
     </td>
@@ -66,7 +66,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-fixed-layout
     </td>
     <td>
       <div className="rs-center">
-        <img src="@/public/fixed-layout/layout-change.gif"  />
+        <img loading="lazy" src="@/public/fixed-layout/layout-change.gif"  />
       </div>
     </td>
   </tr>
@@ -76,7 +76,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-fixed-layout
     </td>
     <td>
       <div className="rs-center">
-        <img src="@/public/fixed-layout/fold.gif"  />
+        <img loading="lazy" src="@/public/fixed-layout/fold.gif"  />
       </div>
     </td>
   </tr>
@@ -86,7 +86,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-fixed-layout
     </td>
     <td>
       <div className="rs-center">
-        <img src="@/public/fixed-layout/group.gif"  />
+        <img loading="lazy" src="@/public/fixed-layout/group.gif"  />
       </div>
     </td>
   </tr>

apps/docs/src/zh/examples/free-layout/free-feature-overview.mdx

@@ -29,7 +29,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-free-layout
     </td>
     <td>
       <div className="rs-center">
-        <img src="@/public/free-layout/autolayout.gif"  />
+        <img loading="lazy" src="@/public/free-layout/autolayout.gif"  />
       </div>
     </td>
   </tr>
@@ -39,7 +39,7 @@ https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-free-layout
     </td>
     <td>
       <div className="rs-center">
-        <img src="@/public/free-layout/snap.gif"  />
+        <img loading="lazy" src="@/public/free-layout/snap.gif"  />
       </div>
     </td>
   </tr>

apps/docs/src/zh/guide/advanced/form.mdx

@@ -130,7 +130,7 @@ const render = () => (
 3. 数组项错误的展示
 
 <div className="rs-center" >
-  <img src="@/public/field-array.gif"  style={{ maxWidth: 600 }}/>
+  <img loading="lazy" src="@/public/field-array.gif"  style={{ maxWidth: 600 }}/>
 </div>
 
 ```tsx pure
@@ -203,7 +203,7 @@ export const arrayMeta: FormMeta = {
 校验逻辑配置在全局，通过表单项路径声明校验逻辑
 
 <div className="rs-center" >
-  <img src="@/public/form-validate.gif"  style={{ maxWidth: 600 }}/>
+  <img loading="lazy" src="@/public/form-validate.gif"  style={{ maxWidth: 600 }}/>
 </div>
 
 ```tsx pure
@@ -304,7 +304,7 @@ export const VALIDATE_EXAMPLE: FormMeta = {
 - onArrayDelete
 
 <div className="rs-center" >
-  <img src="@/public/form-effect.gif"  style={{ maxWidth: 600 }}/>
+  <img loading="lazy" src="@/public/form-effect.gif"  style={{ maxWidth: 600 }}/>
 </div>
 
 ```tsx pure

apps/docs/src/zh/guide/concepts/ecs.mdx

@@ -7,7 +7,7 @@
 
 :::
 
-<img style={{filter: 'invert(0.9)'}} src="@/public/ecs.png"/>
+<img loading="lazy" style={{filter: 'invert(0.9)'}} src="@/public/ecs.png"/>
 
 ReduxStore 伪代码
 ```jsx pure

apps/docs/src/zh/guide/concepts/reactflow.mdx

@@ -27,11 +27,11 @@
   <tr>
     <td>
       <div className="rs-tip">由于 事件是绑定在 svg 上，svg 在缩放后很容易点不到</div>
-      <img src="@/public/reactflow/reactflow-render.gif"/>
+      <img loading="lazy" src="@/public/reactflow/reactflow-render.gif"/>
     </td>
     <td>
       <div className="rs-tip">FlowGram 的事件是一种全局监听 mousemove 变化，并通过计算及 Threshold  大致确定位置，即使缩放很小也能点到, 同时支持线条重连</div>
-      <img src="@/public/reactflow/reactflow-interaction.gif"/>
+      <img loading="lazy" src="@/public/reactflow/reactflow-interaction.gif"/>
     </td>
   </tr>
 </table>

apps/docs/src/zh/guide/concepts/variable-engine.mdx

@@ -69,8 +69,8 @@
 :::
 <table>
   <tr>
-    <td><img src="@/public/variable-type1.png"/></td>
-    <td><img src="@/public/variable-type2.png"/></td>
+    <td><img loading="lazy" src="@/public/variable-type1.png"/></td>
+    <td><img loading="lazy" src="@/public/variable-type2.png"/></td>
   </tr>
 </table>
 

apps/docs/src/zh/guide/introduction.mdx

@@ -23,7 +23,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎，帮助开发者快
       固定的排版，节点/分支支持指定位置拖拽移动，并提供分支、循环等复合节点
     </div>
     <div>
-      <img src="@/public/fixed-layout/fixed-layout-demo.gif"/>
+      <img loading="lazy" src="@/public/fixed-layout/fixed-layout-demo.gif"/>
     </div>
   </div>
   <div>
@@ -36,7 +36,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎，帮助开发者快
       自由的排版，节点支持任意位置移动，通过自由连线连接节点
     </div>
     <div>
-      <img src="@/public/free-layout/free-layout-demo.gif"/>
+      <img loading="lazy" src="@/public/free-layout/free-layout-demo.gif"/>
     </div>
   </div>
 </div>
@@ -53,7 +53,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎，帮助开发者快
         Motion 动画在 Web 端应用可追溯到 Material Design，里边提到元素的变化如宽高或位置需要一个过渡过程，画布引擎会把线条和节点拆分单独绘制，使实现 Motion 过渡动画成本大大降低
       </p>
       <div className="rs-center">
-        <img src="@/public/common/motion.gif" />
+        <img loading="lazy" src="@/public/common/motion.gif" />
       </div>
     </td>
   </tr>
@@ -64,7 +64,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎，帮助开发者快
         手势指在 Mac 触摸板两指展开/合并可以实现画布放大/缩小，或者按住空格拖动画布，交互借鉴 Sketch、Figma
       </p>
       <div className="rs-center">
-        <img src="@/public/common/touch-pad.gif"  />
+        <img loading="lazy" src="@/public/common/touch-pad.gif"  />
       </div>
     </td>
   </tr>
@@ -72,7 +72,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎，帮助开发者快
     <td>缩略图</td>
     <td>
       <div className="rs-center">
-        <img src="@/public/fixed-layout/minimap.gif"  />
+        <img loading="lazy" src="@/public/fixed-layout/minimap.gif"  />
       </div>
     </td>
   </tr>
@@ -80,7 +80,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎，帮助开发者快
     <td>撤销/重做</td>
     <td>
       <div className="rs-center">
-        <img src="@/public/fixed-layout/redo-undo.gif"  />
+        <img loading="lazy" src="@/public/fixed-layout/redo-undo.gif"  />
       </div>
     </td>
   </tr>
@@ -88,7 +88,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎，帮助开发者快
     <td>复制/粘贴(支持快捷键)</td>
     <td>
       <div className="rs-center">
-        <img src="@/public/fixed-layout/copypaste.gif"  />
+        <img loading="lazy" src="@/public/fixed-layout/copypaste.gif"  />
       </div>
     </td>
   </tr>
@@ -102,7 +102,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎，帮助开发者快
     <td>
       <div className="rs-center">
         <div className="rs-center">
-          <img src="@/public/fixed-layout/dragdrop.gif"  />
+          <img loading="lazy" src="@/public/fixed-layout/dragdrop.gif"  />
         </div>
       </div>
     </td>
@@ -114,7 +114,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎，帮助开发者快
     </td>
     <td>
       <div className="rs-center">
-        <img src="@/public/fixed-layout/layout-change.gif"  />
+        <img loading="lazy" src="@/public/fixed-layout/layout-change.gif"  />
       </div>
     </td>
   </tr>
@@ -125,7 +125,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎，帮助开发者快
     </td>
     <td>
       <div className="rs-center">
-        <img src="@/public/fixed-layout/fold.gif"  />
+        <img loading="lazy" src="@/public/fixed-layout/fold.gif"  />
       </div>
     </td>
   </tr>
@@ -136,7 +136,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎，帮助开发者快
     </td>
     <td>
       <div className="rs-center">
-        <img src="@/public/fixed-layout/group.gif"  />
+        <img loading="lazy" src="@/public/fixed-layout/group.gif"  />
       </div>
     </td>
   </tr>
@@ -147,7 +147,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎，帮助开发者快
     </td>
     <td>
       <div className="rs-center">
-        <img src="@/public/free-layout/autolayout.gif"  />
+        <img loading="lazy" src="@/public/free-layout/autolayout.gif"  />
       </div>
     </td>
   </tr>
@@ -158,7 +158,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎，帮助开发者快
     </td>
     <td>
       <div className="rs-center">
-        <img src="@/public/free-layout/snap.gif"  />
+        <img loading="lazy" src="@/public/free-layout/snap.gif"  />
       </div>
     </td>
   </tr>
@@ -169,7 +169,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎，帮助开发者快
     </td>
     <td>
       <div className="rs-center">
-        <img src="@/public/free-layout/loop.gif"  />
+        <img loading="lazy" src="@/public/free-layout/loop.gif"  />
       </div>
     </td>
   </tr>
@@ -185,7 +185,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎，帮助开发者快
       </a>
     </div>
     <div>
-      <img src="@/public/ref-coze.png"/>
+      <img loading="lazy" src="@/public/ref-coze.png"/>
     </div>
   </div>
   <div>
@@ -193,7 +193,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎，帮助开发者快
       飞书低代码平台工作流
     </a>
     <div>
-      <img src="@/public/ref-apaas.png"/>
+      <img loading="lazy" src="@/public/ref-apaas.png"/>
     </div>
   </div>
   <div>
@@ -201,7 +201,7 @@ FlowGram 是一套基于节点编辑的流程搭建引擎，帮助开发者快
       飞书多维表格工作流
     </a>
     <div>
-      <img src="@/public/ref-bitable.png"/>
+      <img loading="lazy" src="@/public/ref-bitable.png"/>
     </div>
   </div>
 </div>