Merge pull request #1277 from zhensherlock/dev

Dev

Author: zhensherlock

docs/.vitepress/config.ts

@@ -63,6 +63,7 @@ export default {
           text: 'Extra',
           items: [
             { text: 'Internet Explorer', link: '/guide/extra/ie' },
+            { text: 'On demand', link: '/guide/extra/on-demand' },
           ]
         }
       ],

docs/.vitepress/locales/zh-CN.ts

@@ -45,6 +45,7 @@ export default {
         text: '扩展',
         items: [
           { text: 'Internet Explorer', link: '/zh/guide/extra/ie' },
+          { text: '按需加载', link: '/zh/guide/extra/on-demand' },
         ]
       }
     ],

docs/guide/extra/ie.md

@@ -18,7 +18,7 @@ import { Watermark } from 'watermark-js-plus/ie'
 ## CDN
 ```html
 <!-- import JavaScript -->
-<script src="https://www.unpkg.com/watermark-js-plus@1.6.0/dist/ie/index.iife.min.js"></script>
+<script src="https://www.unpkg.com/watermark-js-plus@1.6.1/dist/ie/index.iife.min.js"></script>
 ```
 
 > We recommend our users to lock version when using CDN. Please refer to [unpkg.com](https://unpkg.com/) for more information.

docs/guide/extra/on-demand.md

@@ -0,0 +1,31 @@
+---
+layout: doc
+---
+
+<el-backtop></el-backtop>
+
+# On Demand
+This guide explains how to use the on-demand loading feature in watermark-js-plus to optimize your application's performance by only loading the components you need.
+
+## NPM
+
+When using npm, you can import specific components directly to reduce bundle size
+
+```ts
+// Import only the Watermark component
+import { Watermark } from 'watermark-js-plus/es'
+
+// Import only the BlindWatermark component
+import { BlindWatermark } from 'watermark-js-plus/es'
+
+// Import only the ImageWatermark component
+import { ImageWatermark } from 'watermark-js-plus/es'
+```
+
+## Benefits
+- Reduced Bundle Size : Only load the components you actually use
+- Improved Performance : Smaller JavaScript payloads lead to faster page loads
+- Better User Experience : Quicker initial rendering and interaction
+- Lower Network Usage : Especially beneficial for users on limited data plans
+
+On-demand loading is particularly useful for large applications where you might only need specific watermark functionality in certain parts of your application.

docs/zh/guide/extra/ie.md

@@ -18,7 +18,7 @@ import { Watermark } from 'watermark-js-plus/ie'
 ## CDN
 ```html
 <!-- import JavaScript -->
-<script src="https://www.unpkg.com/watermark-js-plus@1.6.0/dist/ie/index.iife.min.js"></script>
+<script src="https://www.unpkg.com/watermark-js-plus@1.6.1/dist/ie/index.iife.min.js"></script>
 ```
 
 > 我们建议使用 CDN 引入用户在链接地址上锁定版本，以免将来插件升级时受到非兼容性更新的影响。锁定版本的方法请查看 [unpkg.com](https://unpkg.com/)。

docs/zh/guide/extra/on-demand.md

@@ -0,0 +1,31 @@
+---
+layout: doc
+---
+
+<el-backtop></el-backtop>
+
+# 按需加载
+本指南解释了如何在 watermark-js-plus 中使用按需加载功能，以通过仅加载您需要的组件来优化应用程序性能。
+
+## NPM
+
+使用 npm 时，您可以直接导入特定组件以减小包的大小
+
+```ts
+// 仅导入 Watermark 组件
+import { Watermark } from 'watermark-js-plus/es'
+
+// 仅导入 BlindWatermark 组件
+import { BlindWatermark } from 'watermark-js-plus/es'
+
+// 仅导入 ImageWatermark 组件
+import { ImageWatermark } from 'watermark-js-plus/es'
+```
+
+## Benefits
+- 减小包体积：只加载您实际使用的组件
+- 提高性能：更小的 JavaScript 负载导致更快的页面加载
+- 更好的用户体验 ：更快的初始渲染和交互
+- 降低网络使用量 ：对于使用有限数据计划的用户特别有益
+
+按需加载对于大型应用程序特别有用，在这些应用程序中，您可能只需要在应用程序的特定部分中使用特定的水印功能。