优化Code Splitting and Lazy Loading：Claude Code 实战指南

代码分割の必要性

SPAの打包サイズが大きくなると初期加载が遅くなります。代码分割と懒加载を适当地实现すれば、必要なコードだけを必要なタイミングで読み込めます。Claude Codeを活用すれば、既存项目への引入も高效的。

React.lazy と Suspense

import { lazy, Suspense } from "react";

// 懒加载组件
const Dashboard = lazy(() => import("./pages/Dashboard"));
const Settings = lazy(() => import("./pages/Settings"));
const Analytics = lazy(() => import("./pages/Analytics"));

function LoadingSpinner() {
  return (
    <div className="flex items-center justify-center h-64">
      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500" />
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<LoadingSpinner />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
        <Route path="/analytics" element={<Analytics />} />
      </Routes>
    </Suspense>
  );
}

Named Export の懒加载

// Named exportを懒加载する場合
const Chart = lazy(() =>
  import("./components/Chart").then((module) => ({
    default: module.BarChart,
  }))
);

// 汎用ヘルパー
function lazyNamed<T extends Record<string, any>>(
  factory: () => Promise<T>,
  name: keyof T
) {
  return lazy(() =>
    factory().then((module) => ({ default: module[name] }))
  );
}

const PieChart = lazyNamed(
  () => import("./components/Chart"),
  "PieChart"
);

Next.js の dynamic import

import dynamic from "next/dynamic";

// 客户端サイドのみで加载
const RichEditor = dynamic(() => import("./components/RichEditor"), {
  ssr: false,
  loading: () => <p>エディタを読み込み中...</p>,
});

// 条件付き加载
const AdminPanel = dynamic(() => import("./components/AdminPanel"), {
  ssr: false,
});

function Page({ isAdmin }: { isAdmin: boolean }) {
  return (
    <div>
      <h1>メインコンテンツ</h1>
      {isAdmin && <AdminPanel />}
    </div>
  );
}

ルートベースの分割

import { lazy, Suspense } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

// ルートごとに分割
const routes = [
  { path: "/", component: lazy(() => import("./pages/Home")) },
  { path: "/about", component: lazy(() => import("./pages/About")) },
  { path: "/blog/*", component: lazy(() => import("./pages/Blog")) },
  {
    path: "/admin/*",
    component: lazy(() => import("./pages/Admin")),
  },
];

function AppRouter() {
  return (
    <BrowserRouter>
      <Suspense fallback={<LoadingSpinner />}>
        <Routes>
          {routes.map(({ path, component: Component }) => (
            <Route key={path} path={path} element={<Component />} />
          ))}
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

预获取戦略

// マウスオーバーで预获取
function PrefetchLink({
  to,
  factory,
  children,
}: {
  to: string;
  factory: () => Promise<any>;
  children: React.ReactNode;
}) {
  const handleMouseEnter = () => {
    factory(); // 预获取開始
  };

  return (
    <Link to={to} onMouseEnter={handleMouseEnter}>
      {children}
    </Link>
  );
}

// ルートの预获取
const dashboardFactory = () => import("./pages/Dashboard");
const DashboardPage = lazy(dashboardFactory);

// 导航で使用
<PrefetchLink to="/dashboard" factory={dashboardFactory}>
  ダッシュボード
</PrefetchLink>

打包分析

// webpack-bundle-analyzer の配置
// next.config.js
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

module.exports = withBundleAnalyzer({
  // Next.js の配置
});

# バンドル分析の実行
ANALYZE=true npm run build

通过 Claude Codeの活用

代码分割の引入を让 Claude Code依頼するプロンプトです。性能改善の全体的なアプローチはSSR vs SSG比較、开发效率化は生産性を3倍にする10のTips也请参阅。

バンドルサイズを最適化して。
- ルートベースのコード分割を導入
- 重いライブラリ（chart.js、moment等）を遅延読み込みに
- Suspenseでローディング状態を統一
- バンドル分析して改善レポートを出して

代码分割的详细信息请参阅React官方文档。Claude Code的用法请参阅官方文档を确认吧。

总结

代码分割は用户体験に直結する性能优化です。让 Claude Code打包分析から实现まで一貫して依頼すれば、有效的分割ポイントを見つけて优化可以。