Next.js App Router服务端驱动组件首屏JS超400KB优化方案求助

核心矛盾是：CMS支持跨页面动态添加组件，必须依赖全局组件映射，但全局导入所有组件会导致首屏JS体积超标，同时还要保证SSR和无渲染延迟。以下是可行的解决方案：

方案：将全局配置改为动态导入工厂函数 #

把全局配置里的直接组件引用替换成动态导入的工厂函数，这样首屏不会加载所有组件，仅当需要渲染某个组件时才触发加载，同时保留SSR支持。

1. 修改全局组件配置 #

// 全局配置文件：widgets.config.ts
export const UNIVERSAL_WIDGET: Record<string, () => Promise<{ default: React.ComponentType }>> = {
  // PRICE_TEMPLATE_WIDGET_MAPPING
  [WIDGET_KEYS.POPULAR_CITIES_WIDGET]: () => import(/* webpackChunkName: "widget-popular-cities" */ '../components/ComponentA'),
  [WIDGET_KEYS.CALCULATE_EMI_WIDGET]: () => import(/* webpackChunkName: "widget-calculate-emi" */ '../components/ComponentB'),
  [WIDGET_KEYS.PRICE_PAGE_VARIANT_WIDGET]: () => import(/* webpackChunkName: "widget-price-variant" */ '../components/ComponentC'),

  // VARIANT_TEMPLATE_WIDGET_MAPPING
  [WIDGET_KEYS.VARIANT_PAGE_VARIANT_WIDGET]: () => import(/* webpackChunkName: "widget-variant-page" */ '../components/ComponentD'),

  // SPECS_TEMPLATE_WIDGET_MAPPING
  [WIDGET_KEYS.FEATURE_CHECK]: () => import(/* webpackChunkName: "widget-feature-check" */ '../components/ComponentE'),
  [WIDGET_KEYS.SPECPAGE_VARIANT_WIDGET]: () => import(/* webpackChunkName: "widget-spec-variant" */ '../components/ComponentF'),
};

• 用webpackChunkName给每个组件chunk命名，方便调试和分析打包体积
• 配置中仅存储组件的加载函数，而非已导入的组件实例

2. 页面层级配置同步改造 #

页面专属配置也采用相同的动态导入格式，保持统一：

const SPECS_TEMPLATE_WIDGET_MAPPING = {
  [WIDGET_KEYS.HERO_SECTION]: () => import(/* webpackChunkName: "widget-specs-hero" */ '../components/SpecsHeroSection'),
};

// 合并后的最终配置
const FINAL_WIDGETS = {
  ...UNIVERSAL_WIDGET,
  ...SPECS_TEMPLATE_WIDGET_MAPPING,
};

3. 实现组件渲染器（支持SSR） #

创建一个客户端组件负责按需加载并渲染组件，结合Suspense处理加载状态，确保SSR正常工作：

'use client';
import { Suspense, lazy } from 'react';

interface WidgetRendererProps {
  widgetKey: string;
  props: Record<string, any>;
}

export default function WidgetRenderer({ widgetKey, props }: WidgetRendererProps) {
  const loadComponent = FINAL_WIDGETS[widgetKey];
  if (!loadComponent) return null;

  const Component = lazy(loadComponent);

  return (
    <Suspense fallback={<div className="widget-loading">加载中...</div>}>
      <Component {...props} />
    </Suspense>
  );
}

4. 页面中按需渲染组件 #

在服务器组件中先获取API返回的组件列表，再渲染对应组件：

// 服务器组件：app/specs/page.tsx
import { Suspense } from 'react';
import WidgetRenderer from './WidgetRenderer';

async function getPageWidgets() {
  // 调用API获取当前页面需要渲染的组件列表
  const res = await fetch(process.env.NEXT_PUBLIC_API_URL + '/page-widgets', { cache: 'no-store' });
  return res.json();
}

export default async function SpecsPage() {
  const widgets = await getPageWidgets();

  return (
    <div className="page-container">
      {widgets.map((widget: any) => (
        <Suspense key={widget.key} fallback={<div className="page-loading">加载页面组件...</div>}>
          <WidgetRenderer widgetKey={widget.key} props={widget.props} />
        </Suspense>
      ))}
    </div>
  );
}

为什么这个方案可行？ #

• 解决首屏体积问题：仅加载当前页面API返回的组件，未被引用的组件不会打包进首屏JS
• 保留SSR能力：服务器端会渲染Suspense的fallback内容，SEO不受影响
• 无渲染延迟：如果在服务器组件中预加载组件（可在getPageWidgets中添加await Promise.all(widgets.map(w => FINAL_WIDGETS[w.key]()))），客户端拿到页面时组件已预加载完成，几乎无感知延迟
• 兼容CMS动态配置：全局配置依然保留所有组件映射，支持任意组件跨页面添加

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