Skip to content

fix: 修复异步加载 CSS 时重复插入的问题 - #1093

Merged
yiludege merged 1 commit into
masterfrom
fix/style-placeholder
Jun 15, 2026
Merged

yiludege merged 1 commit into
masterfrom
fix/style-placeholder

Conversation

@yiludege

@yiludege yiludege commented Jun 9, 2026

Copy link
Copy Markdown
Collaborator

问题

子应用调用 document.head.appendChild(link) 后,wujie 异步加载 CSS。在 CSS 加载完成前,checkLinkAndLoad 等去重检查无法找到已存在的元素,导致相同的 CSS 被重复插入多次。

场景示例

  • TDesign IconFont 组件的 checkLinkAndLoad 函数
  • React StrictMode 下 useEffect 执行两次
  • 快速连续调用相同 CSS 加载

解决方案

  • 在异步加载 CSS 前,立即创建占位 <style> 元素并插入 DOM
  • 保留原始 <link> 的属性(如 class),以便去重逻辑能找到
  • CSS 加载完成后填充内容到占位元素

修改文件

effect.ts

loadStyleSheet 函数:

  • 提前解析属性并创建占位元素
  • 立即插入 DOM(关键改动)
  • CSS 加载完成后填充内容或处理 ignore 情况

测试

  • TDesign IconFont 组件不再重复加载 CSS
  • React StrictMode 下 CSS 只加载一次
  • 普通 CSS 加载流程不受影响

问题:
- 子应用调用 document.head.appendChild(link) 后,wujie 异步加载 CSS
- 在 CSS 加载完成前,checkLinkAndLoad 等去重检查无法找到已存在的元素
- 导致相同的 CSS 被重复插入多次

场景示例:
- TDesign IconFont 组件的 checkLinkAndLoad 函数
- React StrictMode 下 useEffect 执行两次
- 快速连续调用相同 CSS 加载

解决方案:
- 在异步加载 CSS 前,立即创建占位 <style> 元素并插入 DOM
- 保留原始 <link> 的属性(如 class),以便去重逻辑能找到
- CSS 加载完成后填充内容到占位元素

修改:
- effect.ts loadStyleSheet 函数:
  - 提前解析属性并创建占位元素
  - 立即插入 DOM(关键改动)
  - CSS 加载完成后填充内容或处理 ignore 情况
@yiludege
yiludege merged commit e132206 into master Jun 15, 2026
3 checks passed
yiludege added a commit that referenced this pull request Jun 15, 2026
* Revert "fix: 将 font 样式挂载到最外层 document.head 以支持嵌套子应用 (#1092)"

This reverts commit 2ed612f.

* fix: 将 font 样式挂载到最外层 document.head 以支持嵌套子应用

在 revert #1092 错误合入后重新应用本修复。原 PR 误将 monorepo 压扁为单包结构,
本提交仅修改 wujie-core 三个源文件,并保留 #1093 的 CSS placeholder 逻辑。

Fixes #845
Fixes #620

Co-authored-by: Cursor <cursoragent@cursor.com>

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
yiludege added a commit that referenced this pull request Jun 15, 2026
在 revert #1092 错误合入后重新应用本修复。原 PR 误将 monorepo 压扁为单包结构,
本提交仅修改 wujie-core 三个源文件,并保留 #1093 的 CSS placeholder 逻辑。

Fixes #845
Fixes #620

Co-authored-by: Cursor <cursoragent@cursor.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant