解决Ant Design Pro项目构建后首次加载白屏问题的实践方案
项目地址: https://gitcode.com/gh_mirrors/an/ant-design-pro 问题背景
在Ant Design Pro项目开发中，很多开发者会遇到一个常见问题：项目构建后首次加载时出现白屏现象。这个问题通常发生在SPA（单页应用）中，由于JavaScript包体积较大，在资源加载完成前页面无法渲染内容，导致用户体验不佳。
问题分析
通过技术分析，我们发现问题的核心原因在于：
-
DOM加载顺序问题：传统的loading.js脚本被放置在head中执行时，目标DOM元素（如#root）尚未加载完成，导致脚本无法正常工作。
-
资源加载顺序问题：即使将脚本放在body中，如果位于umi.js之后，仍然需要等待主包加载完成才能执行，失去了loading效果的意义。
解决方案比较
方案一：手动修改构建产物
最直接的解决方案是构建后手动修改index.html文件：
- 将loading.js脚本从head移动到body中
- 确保其位置在#root元素之后，umi.js之前
优点：
- 实现简单直接
- 效果立竿见影
缺点：
- 每次构建后都需要手动修改，不适合自动化部署流程
- 不利于团队协作开发
方案二：使用UMI插件机制
更优雅的解决方案是利用UMI的插件系统自动注入脚本：
- 在项目根目录创建
plugin.ts文件 - 实现插件逻辑，动态插入loading脚本到正确位置
export default (api: any) => {
api.addHTMLScripts(() => [
{
content: `
// loading.js内容
const root = document.createElement('div');
root.id = 'loading';
root.innerHTML = '加载中...';
document.body.appendChild(root);
`,
},
]);
};
实现要点：
- 使用
addHTMLScriptsAPI确保脚本在正确时机执行 - 直接创建DOM元素而非依赖现有元素
- 可以结合CSS实现更精美的加载动画
优势：
- 自动化处理，无需每次构建后手动修改
- 符合UMI生态最佳实践
- 便于团队共享和维护
最佳实践建议
- 分包优化：配合UMI的代码分割策略，减少主包体积
// config/config.ts
export default {
codeSplitting: {
jsStrategy: 'granularChunks',
},
}
-
加载动画设计：建议使用轻量级的CSS动画而非复杂JS实现，减少性能开销
-
环境区分：开发环境可能不需要loading效果，可通过环境变量控制
-
性能监控：添加加载时间统计，持续优化首屏体验
总结
Ant Design Pro项目的白屏问题本质上是资源加载优化问题。通过UMI插件系统自动注入loading脚本是最推荐的解决方案，它不仅解决了当前问题，还为后续性能优化提供了扩展性。开发者应当根据项目实际情况选择最适合的方案，并持续关注首屏加载性能指标。
对于企业级应用，建议进一步考虑SSR（服务端渲染）或预渲染方案，从根本上解决白屏问题，提供更好的用户体验。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
