Umi 4 路由分包加载白屏问题分析与解决方案

问题背景

在使用 Umi 4 框架开发应用时，开发者可能会遇到页面切换时出现短暂白屏的现象。这是由于 Umi 4 默认采用了按页面分包(Code Splitting)的优化策略，虽然这种策略能减少初始加载的资源量，但会带来路由切换时的加载等待问题。

技术原理分析

Umi 4 的按页分包机制基于 React 的 Suspense 组件实现。当应用配置了动态导入(懒加载)时，React 要求必须使用 Suspense 组件来包裹这些异步加载的组件。Suspense 提供了一个 fallback 属性，用于在组件加载过程中显示加载状态。

默认情况下，Umi 4 会为每个路由页面创建一个单独的代码块(chunk)，当用户导航到新路由时，需要先下载对应的 JavaScript 文件，然后才能渲染页面。这个下载和解析的过程会导致短暂的白屏现象。

解决方案

Umi 4 提供了自定义加载组件的机制来解决这个问题。开发者可以通过创建 src/loading.tsx 文件来自定义加载时的显示内容，替代默认的白屏状态。

具体实现步骤如下：

1. 在项目根目录的 src 文件夹下创建 loading.tsx 文件
2. 在该文件中导出你的自定义加载组件
3. 组件可以包含加载动画、进度条或其他视觉反馈

示例代码：

// src/loading.tsx
import React from 'react';

export default function Loading() {
  return (
    <div style={{
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      height: '100vh'
    }}>
      <div>页面加载中...</div>
    </div>
  );
}

进阶优化建议

1. 骨架屏技术：可以设计更复杂的加载状态，如骨架屏(Skeleton Screen)，提前展示页面的大致布局，提升用户体验

2. 预加载策略：对于关键页面，可以使用 Umi 的预加载功能，在用户可能访问前提前加载资源

3. 加载状态优化：为不同的路由页面设计不同的加载状态，使过渡更加自然

4. 性能监控：监控页面加载时间，对于加载时间过长的页面进行优化

总结

Umi 4 的按页分包机制虽然带来了初始加载的性能优势，但也引入了路由切换时的白屏问题。通过自定义加载组件，开发者可以显著改善用户体验，消除白屏带来的不适感。合理利用这一特性，可以在保持应用性能的同时，提供更加流畅的用户界面。