@hsu-react/ui 0.0.18 → 0.0.20

package/src/components/FilePreview/index.tsx

@@ -1,16 +1,33 @@
-import React from "react";
-import PdfPreview from "./_components/PdfPreview";
+import React, { Suspense, lazy } from "react";
 import VideoPreview from "./_components/VideoPreview";
 import TextPreview from "./_components/TextPreview";
-import MarkdownPreview from "./_components/MarkdownPreview";
 import ImagePreview from "./_components/ImagePreview";
-import XlsxPreview from "./_components/XlsxPreview";
-import { useXlsxData } from "./_hooks";
 import { FilePreviewType, FilePreviewTypeArr } from "./_utils";
 
 export type { FilePreviewType };
 export { FilePreviewTypeArr };
 
+/**
+ * 重型格式按需加载。
+ *
+ * FilePreview 是个按 fileType 分发的 dispatcher，而它处在 Upload / FormItem 的静态
+ * 依赖图上（FormItem → FormUpload → Upload → FilePreview），业务侧只要用到任何一种
+ * 表单项，下面这些只服务于特定格式的库就会被打进首屏：
+ *
+ *   pdf   → PdfPreview       → hsu-utils 的 RenderPDF → pdfjs-dist   约 374 KB
+ *   xlsx  → XlsxPreviewPane  → xlsx ＋ x-data-spreadsheet
+ *   md    → MarkdownPreview  → Markdown → katex 等
+ *
+ * 修 dispatcher 而不是逐个改它的引用方：这里改一次，所有静态 import FilePreview 的
+ * 地方（Upload、UploadedItem、FormImage…）都受益，也不会因为将来多一个引用方而回归。
+ *
+ * 图片/文本/视频三种是轻量实现，保持静态——它们也是最常命中的格式，不值得为其
+ * 付一次异步往返。
+ */
+const PdfPreview = lazy(() => import("./_components/PdfPreview"));
+const MarkdownPreview = lazy(() => import("./_components/MarkdownPreview"));
+const XlsxPreviewPane = lazy(() => import("./_components/XlsxPreviewPane"));
+
 interface FilePreviewProps {
   fileUrl?: string;
   fileType?: FilePreviewType;
@@ -25,7 +42,6 @@ interface FilePreviewProps {
 const FilePreview: React.FC<FilePreviewProps> = (props) => {
   const { fileUrl, fileType, open, onClose, text, className, pagination } =
     props;
-  const xlsxData = useXlsxData({ fileType, fileUrl });
 
   if (!open) {
     return null;
@@ -43,13 +59,15 @@ const FilePreview: React.FC<FilePreviewProps> = (props) => {
     }
     case "pdf": {
       return (
-        <PdfPreview
-          fileUrl={fileUrl}
-          open={open}
-          onClose={onClose}
-          className={className}
-          pagination={pagination}
-        />
+        <Suspense fallback={null}>
+          <PdfPreview
+            fileUrl={fileUrl}
+            open={open}
+            onClose={onClose}
+            className={className}
+            pagination={pagination}
+          />
+        </Suspense>
       );
     }
     case "jpg":
@@ -71,16 +89,25 @@ const FilePreview: React.FC<FilePreviewProps> = (props) => {
     }
     case "md": {
       return (
-        <MarkdownPreview text={text} onClose={onClose} className={className} />
+        <Suspense fallback={null}>
+          <MarkdownPreview
+            text={text}
+            onClose={onClose}
+            className={className}
+          />
+        </Suspense>
       );
     }
     case "xlsx": {
       return (
-        <XlsxPreview
-          xlsxData={xlsxData}
-          onClose={onClose}
-          className={className}
-        />
+        <Suspense fallback={null}>
+          <XlsxPreviewPane
+            fileUrl={fileUrl}
+            fileType={fileType}
+            onClose={onClose}
+            className={className}
+          />
+        </Suspense>
       );
     }
     default: {

package/src/components/FormItem/FormInput/FormPasswordStrength/index.tsx

@@ -1,9 +1,8 @@
 import Input, { InputProps as BasicInputProps } from "../../../Input";
 import ItemContainer, { ItemContainerProps } from "../../ItemContainer";
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 import styles from "./index.module.scss";
-import zxcvbn from "zxcvbn";
 
 interface InputProps extends BasicInputProps {}
 
@@ -11,9 +10,43 @@ export interface FormPasswordStrengthProps extends ItemContainerProps {
   componentProps?: InputProps;
 }
 
+/**
+ * zxcvbn 约 793 KB（未压缩），却只在这一个字段的 onChange 里用来算强度分。
+ * 静态 import 会让它跟着 FormInput → FormItem 进入每个引入过表单项的页面的
+ * 首屏 chunk。改成动态 import：只有真的渲染了 PASSWORDSTRENGTH 字段才去拉。
+ *
+ * 模块级缓存 Promise，多个密码框共用一次加载；失败时清掉缓存，下次重试。
+ */
+type Zxcvbn = typeof import("zxcvbn");
+
+let zxcvbnPromise: Promise<Zxcvbn> | undefined;
+const loadZxcvbn = (): Promise<Zxcvbn> => {
+  if (!zxcvbnPromise) {
+    zxcvbnPromise = import("zxcvbn")
+      .then((mod) => {
+        // zxcvbn 是 `export =` 的 CJS 模块：不同打包器/interop 下动态 import 拿到的
+        // 可能是函数本身，也可能是 { default: 函数 }，两种都要兼容
+        const m = mod as Zxcvbn & { default?: Zxcvbn };
+        return m.default ?? m;
+      })
+      .catch((err) => {
+        zxcvbnPromise = undefined;
+        throw err;
+      });
+  }
+  return zxcvbnPromise;
+};
+
 const PasswordStrength: React.FC<InputProps> = (props) => {
   const { placeholder, onChange, ...inputConfig } = props;
   const [fraction, setFraction] = useState<number>(0);
+  // 挂载即预取：chunk 仍是独立的，但用户敲第一个字符时通常已经就绪
+  useEffect(() => {
+    loadZxcvbn().catch(() => undefined);
+  }, []);
+
+  // 打字比加载快时会有多次并发计算，迟到的结果不能盖掉最新一次
+  const seqRef = useRef(0);
 
   return (
     <div className={styles.passwordStrength}>
@@ -23,8 +56,14 @@ const PasswordStrength: React.FC<InputProps> = (props) => {
         onChange={(value) => {
           onChange && onChange(value);
 
-          const _fraction = zxcvbn(value).guesses_log10;
-          setFraction(_fraction);
+          const seq = ++seqRef.current;
+          loadZxcvbn()
+            .then((zxcvbn) => {
+              if (seq !== seqRef.current) return;
+              setFraction(zxcvbn(value).guesses_log10);
+            })
+            // 强度条只是辅助提示，拉不到就不显示，不打断用户输入
+            .catch(() => undefined);
         }}
         allowClear
         autoComplete="new-password"

package/src/components/FormItem/index.md

@@ -528,3 +528,22 @@ export default () => (
 - 上传类：`FILE`、`IMAGEFILE`
 
 > 同时导出 `FormItemContainer`（即 `ItemContainer`）及类型 `FormItemType`、`FormItemProps`、`PlaceholderDict` / `PlaceholderDictEn` 占位文案字典。
+
+### 重型字段按需加载
+
+`EDITOR`、`CODEMIRROR`、`PASSWORDSTRENGTH` 三类字段的实现依赖体积很大的三方库
+（`@wangeditor/editor` 约 814 KB、`@codemirror/*` 约 380 KB、`zxcvbn` 约 793 KB，均为未压缩）。
+`FormItem` 几乎会被每个业务页面引入，若静态引入这些渲染器，那么**只要用到任何一种表单项**，
+上述库就会被一并打进消费方的首屏产物。
+
+因此这三类字段改为按需加载：只有 `type` 真的命中时才去拉对应 chunk。对使用方而言：
+
+- **用法不变**，仍然是 `<FormItem type="EDITOR" ... />`，无需自行包 `Suspense`。
+- 首次渲染这类字段时，该字段会晚一拍出现（组件内部已用 `Suspense fallback={null}` 兜住，
+  不会让表单布局跳动）。antd `Form` 的值存在 store 里，字段挂载晚于 `setFieldsValue`
+  也能正确回填，**不影响编辑态回显**。
+- `PASSWORDSTRENGTH` 在挂载时即预取 `zxcvbn`，正常输入速度下感知不到延迟；强度条在
+  加载完成前保持 0，加载失败则不显示，不阻断输入。
+
+若消费方希望这些库进首屏（例如整站以富文本编辑为主），照常在自己的入口静态
+`import Editor from "@hsu-react/ui/es/components/Editor"` 即可，两者不冲突。

package/src/components/FormItem/index.tsx

@@ -8,7 +8,7 @@ import FormDatePicker, {
   FormRangePickerProps,
   FormStepPickerProps,
 } from "./FormDatePicker";
-import FormEditor, { FormEditorProps } from "./FormEditor";
+import type { FormEditorProps } from "./FormEditor";
 import FormInput, {
   FormInputNumberProps,
   FormInputProps,
@@ -31,9 +31,40 @@ import FormTree, { FormTreeProps } from "./FormTree";
 import FormUpload, { FormImageProps, FormUploadProps } from "./FormUpload";
 import ItemContainer, { ItemContainerProps } from "./ItemContainer";
 import FormText, { FormTextProps } from "./FormText";
-import FormCodeMirror, { FormCodeMirrorProps } from "./FormCodeMirror";
+import type { FormCodeMirrorProps } from "./FormCodeMirror";
 
-import React from "react";
+import React, { Suspense, lazy } from "react";
+
+/**
+ * 重型字段按需加载。
+ *
+ * FormItem 是个静态分发器，几乎每个业务页面都会引入它。若在这里静态 import
+ * 全部渲染器，那么**只要用到任何一种表单项**，富文本、代码编辑器这些巨型依赖
+ * 就会被一并拉进消费方的首屏 chunk：
+ *
+ *   FormItem → FormEditor      → Editor     → @wangeditor/editor      （约 814 KB）
+ *   FormItem → FormCodeMirror  → CodeMirror → @codemirror/*           （约 380 KB）
+ *
+ * 消费方实测：某后台项目仅因入口图里存在 FormItem，首屏就多背了约 2.5 MB
+ * 未压缩的三方库；改为按需加载后首屏从 3.72 MB 降到 965 KB（gzip）。
+ *
+ * 只有 type 真的命中 EDITOR / CODEMIRROR 时才会去拉对应 chunk。类型仍走静态
+ * `import type`（编译期擦除，不产生运行时依赖），所以 FormItemMap 不受影响。
+ * 同一目录下的 CodeMirror 早就用 `import()` 按需加载语言包/校验器，这里是同一思路。
+ */
+const FormEditor = lazy(() => import("./FormEditor"));
+const FormCodeMirror = lazy(() => import("./FormCodeMirror"));
+
+/**
+ * 重型字段的 Suspense 包装。
+ *
+ * fallback 用 null 而不是骨架：这些字段都由 ItemContainer 渲染 antd 的
+ * Form.Item，加载期间不占位反而不会让表单布局跳动；antd Form 的值存在 store 里，
+ * 字段挂载晚于 setFieldsValue 也能正确回填，不影响编辑态回显。
+ */
+const LazyField: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <Suspense fallback={null}>{children}</Suspense>
+);
 
 export { ItemContainer as FormItemContainer };
 export type { ItemContainerProps as FormItemContainerProps };
@@ -374,9 +405,17 @@ const FormItem: React.FC<FormItemProps> = (props) => {
     case "SLIDER":
       return <FormSlider {...props} />;
     case "EDITOR":
-      return <FormEditor {...props} />;
+      return (
+        <LazyField>
+          <FormEditor {...props} />
+        </LazyField>
+      );
     case "CODEMIRROR":
-      return <FormCodeMirror {...props} />;
+      return (
+        <LazyField>
+          <FormCodeMirror {...props} />
+        </LazyField>
+      );
     case "TEXT":
       return <FormText {...props} />;
     default: