React：useEffect中使用ES2020动态import阻塞渲染问题

输出顺序差异的核心原因 #

两个场景输出顺序不同，本质是window.load事件的触发规则和两种异步请求的资源优先级不同：

• window.load 触发规则：必须等待页面所有高优先级关联资源全部加载完成后才会触发，包括常规脚本、样式表、图片、以及初始阶段发起的ES动态导入资源。
• fetch请求属于用户主动发起的普通业务请求，浏览器默认不会将其归类为页面核心资源，不会等待fetch完成再触发window.load，因此第一个场景中fetch的响应返回在load事件之后，输出顺序为：

begin
window loaded
end

• ES规范的动态import()被浏览器判定为页面需要的高优先级模块资源，只要动态import在页面初始阶段发起，window.load就会等待该资源加载完成后再触发，因此第二个场景中import完成在load事件之前，输出顺序为：

begin
end
window loaded

关于大体积JSON卡渲染的说明 #

你感知到的“浏览器卡住、React不渲染”并不是useEffect中的异步代码阻塞了渲染流程：React组件的渲染逻辑本身会在useEffect执行之前完成，你示例中return null所以看不到渲染内容，实际如果有可渲染的DOM结构，在begin输出前页面就已经完成渲染了。
如果实际项目中确实出现了首屏渲染延迟，一般是你的打包工具（Webpack/Vite等）对这个动态导入的JSON做了预加载优化，将其加入了首屏高优先级资源队列，拖慢了首屏渲染速度，可以通过调整打包工具的资源优先级配置，给该JSON资源设置低优先级加载即可解决。

内容的提问来源于stack exchange，提问作者Kazuto_Ute