Turbopack で動的インポート・コード分割を行う

2025年7月2日

Turbopack

フロントエンド開発において、アプリケーションの初期読み込み時間を短縮し、ユーザー体験を向上させることは重要な課題です。特に大規模なアプリケーションでは、すべてのコードを一度に読み込むのではなく、必要な時に必要な分だけ読み込む「動的インポート」と「コード分割」が欠かせません。

Next.js の高速ビルドツールである Turbopack は、従来の Webpack よりも優れた動的インポート機能とコード分割最適化を提供しています。本記事では、2025 年 6 月現在の Turbopack における動的インポートの技術的実装方法と、効果的なコード分割戦略について詳しく解説いたします。実際のエラー対処法から最適化テクニックまで、実装に必要な知識を包括的にお伝えします。

動的インポートの基本概念とメリット

動的インポートとは

動的インポートは、JavaScript の import() 関数を使用して、実行時にモジュールを非同期で読み込む仕組みです。従来の静的インポート（import 文）とは異なり、条件に応じてモジュールを読み込むことができます。

typescript// 静的インポート（従来の方法）
import { heavyLibrary } from './heavy-library';

// 動的インポート（実行時読み込み）
const heavyLibrary = await import('./heavy-library');

この技術により、アプリケーションの初期バンドルサイズを大幅に削減できます。

Turbopack での動的インポートの優位性

Turbopack は Rust で実装されているため、動的インポートの処理速度が従来の Webpack と比較して大幅に向上しています。

パフォーマンス比較表

項目	Webpack 5	Turbopack	改善率
動的チャンク生成速度	2.3 秒	0.12 秒	95% 向上
Hot Module Replacement	1.8 秒	0.08 秒	96% 向上
初回コード分割	4.1 秒	0.31 秒	92% 向上
チャンクサイズ最適化	3.2 秒	0.19 秒	94% 向上

主要なメリット

初期読み込み時間の短縮 不要なコードを後から読み込むため、First Contentful Paint（FCP）と Largest Contentful Paint（LCP）が大幅に改善されます。

メモリ使用量の最適化 使用されていない機能のコードはメモリに展開されないため、特にモバイルデバイスでのパフォーマンスが向上します。

ネットワーク効率の向上 必要な分だけダウンロードするため、帯域幅の節約と読み込み速度の向上を同時に実現できます。

Turbopack での動的インポート実装

基本的な動的インポート実装

Turbopack では、標準的な ES2020 動的インポート構文がそのまま使用できます。

typescript// components/DynamicComponent.tsx
import { useState, Suspense } from 'react';
import dynamic from 'next/dynamic';

// 動的インポートでコンポーネントを読み込み
const HeavyChart = dynamic(() => import('./HeavyChart'), {
  loading: () => <div>チャートを読み込み中...</div>,
  ssr: false, // サーバーサイドレンダリングを無効化
});

export default function DynamicComponent() {
  const [showChart, setShowChart] = useState(false);

  return (
    <div>
      <button onClick={() => setShowChart(true)}>
        チャートを表示
      </button>
      {showChart && (
        <Suspense fallback={<div>読み込み中...</div>}>
          <HeavyChart />
        </Suspense>
      )}
    </div>
  );
}

条件付き動的インポート

特定の条件下でのみモジュールを読み込む実装例です。

typescript// utils/conditionalImport.ts
export async function loadFeatureModule(
  featureName: string
) {
  try {
    switch (featureName) {
      case 'analytics':
        const analytics = await import('./analytics');
        return analytics.default;

      case 'payments':
        const payments = await import('./payments');
        return payments.default;

      case 'admin':
        // 管理者権限チェック後に読み込み
        const { checkAdminPermission } = await import(
          './auth'
        );
        if (await checkAdminPermission()) {
          const admin = await import('./admin');
          return admin.default;
        }
        throw new Error('ADMIN_PERMISSION_DENIED');

      default:
        throw new Error(`UNKNOWN_FEATURE: ${featureName}`);
    }
  } catch (error) {
    console.error(`動的インポートエラー: ${error.message}`);
    throw error;
  }
}

エラーハンドリングの実装

動的インポートでは、ネットワークエラーやモジュール不存在エラーなどの処理が重要です。

typescript// hooks/useDynamicImport.ts
import { useState, useCallback } from 'react';

interface ImportState<T> {
  data: T | null;
  loading: boolean;
  error: string | null;
}

export function useDynamicImport<T>() {
  const [state, setState] = useState<ImportState<T>>({
    data: null,
    loading: false,
    error: null,
  });

  const dynamicImport = useCallback(
    async (importFn: () => Promise<T>) => {
      setState({ data: null, loading: true, error: null });

      try {
        const result = await importFn();
        setState({
          data: result,
          loading: false,
          error: null,
        });
        return result;
      } catch (error) {
        let errorMessage = '不明なエラーが発生しました';

        if (error instanceof Error) {
          // よくあるエラーパターンの処理
          switch (error.message) {
            case 'Loading chunk 0 failed.':
              errorMessage =
                'チャンクの読み込みに失敗しました。ページを再読み込みしてください。';
              break;
            case 'Loading CSS chunk 0 failed.':
              errorMessage =
                'スタイルシートの読み込みに失敗しました。';
              break;
            case 'Network error':
              errorMessage =
                'ネットワークエラーが発生しました。接続を確認してください。';
              break;
            default:
              errorMessage = error.message;
          }
        }

        setState({
          data: null,
          loading: false,
          error: errorMessage,
        });
        throw error;
      }
    },
    []
  );

  return { ...state, dynamicImport };
}

コード分割戦略の設計

ルートベースコード分割

Next.js App Router と Turbopack を組み合わせた効果的なルートベース分割の実装例です。

typescript// app/dashboard/page.tsx
import { Suspense } from 'react';
import dynamic from 'next/dynamic';

// 各セクションを動的に分割
const UserAnalytics = dynamic(
  () => import('./components/UserAnalytics'),
  {
    loading: () => <AnalyticsSkeleton />,
  }
);

const SalesChart = dynamic(
  () => import('./components/SalesChart'),
  {
    loading: () => <ChartSkeleton />,
  }
);

const RecentOrders = dynamic(
  () => import('./components/RecentOrders'),
  {
    loading: () => <OrdersSkeleton />,
  }
);

export default function DashboardPage() {
  return (
    <div className='dashboard-grid'>
      <Suspense
        fallback={<div>ダッシュボードを読み込み中...</div>}
      >
        <section className='analytics-section'>
          <UserAnalytics />
        </section>

        <section className='sales-section'>
          <SalesChart />
        </section>

        <section className='orders-section'>
          <RecentOrders />
        </section>
      </Suspense>
    </div>
  );
}

機能ベースコード分割

機能ごとにモジュールを分割し、必要な時だけ読み込む戦略です。

typescript// features/featureLoader.ts
interface FeatureModule {
  component: React.ComponentType;
  styles?: string;
  dependencies?: string[];
}

class FeatureLoader {
  private loadedFeatures = new Map<string, FeatureModule>();
  private loadingPromises = new Map<
    string,
    Promise<FeatureModule>
  >();

  async loadFeature(
    featureName: string
  ): Promise<FeatureModule> {
    // キャッシュされている場合は即座に返す
    if (this.loadedFeatures.has(featureName)) {
      return this.loadedFeatures.get(featureName)!;
    }

    // 既に読み込み中の場合は同じPromiseを返す
    if (this.loadingPromises.has(featureName)) {
      return this.loadingPromises.get(featureName)!;
    }

    const loadPromise = this.loadFeatureModule(featureName);
    this.loadingPromises.set(featureName, loadPromise);

    try {
      const module = await loadPromise;
      this.loadedFeatures.set(featureName, module);
      this.loadingPromises.delete(featureName);
      return module;
    } catch (error) {
      this.loadingPromises.delete(featureName);
      throw error;
    }
  }

  private async loadFeatureModule(
    featureName: string
  ): Promise<FeatureModule> {
    switch (featureName) {
      case 'user-profile':
        const userProfile = await import(
          '../features/userProfile'
        );
        return {
          component: userProfile.UserProfileComponent,
          dependencies: [
            '@/api/users',
            '@/utils/validation',
          ],
        };

      case 'payment-flow':
        const payment = await import('../features/payment');
        await this.loadDependencies([
          'stripe',
          'payment-icons',
        ]);
        return {
          component: payment.PaymentFlowComponent,
          dependencies: ['stripe', 'payment-icons'],
        };

      case 'admin-panel':
        // 権限チェック
        const { hasAdminAccess } = await import(
          '../auth/permissions'
        );
        if (!(await hasAdminAccess())) {
          throw new Error('ADMIN_ACCESS_DENIED');
        }

        const admin = await import('../features/admin');
        return {
          component: admin.AdminPanelComponent,
          dependencies: [
            '@/api/admin',
            '@/charts/advanced',
          ],
        };

      default:
        throw new Error(`UNKNOWN_FEATURE: ${featureName}`);
    }
  }

  private async loadDependencies(
    dependencies: string[]
  ): Promise<void> {
    await Promise.all(
      dependencies.map((dep) =>
        import(dep).catch(console.error)
      )
    );
  }
}

export const featureLoader = new FeatureLoader();

ライブラリベースコード分割

大きなライブラリを必要な時だけ読み込む実装例です。

typescript// utils/libraryLoader.ts
interface LibraryConfig {
  name: string;
  version: string;
  size: string;
  loadTimeEstimate: number;
}

const LIBRARY_CONFIGS: Record<string, LibraryConfig> = {
  'chart-js': {
    name: 'Chart.js',
    version: '4.4.0',
    size: '234KB',
    loadTimeEstimate: 500,
  },
  'three-js': {
    name: 'Three.js',
    version: '0.158.0',
    size: '1.2MB',
    loadTimeEstimate: 1200,
  },
  'moment-js': {
    name: 'Moment.js',
    version: '2.29.4',
    size: '67KB',
    loadTimeEstimate: 200,
  },
};

export async function loadChartLibrary() {
  try {
    console.log('Chart.js を読み込み中...');

    const [chartModule, dateAdapter] = await Promise.all([
      import('chart.js/auto'),
      import('chartjs-adapter-date-fns'),
    ]);

    console.log('Chart.js の読み込み完了');
    return {
      Chart: chartModule.Chart,
      adapters: dateAdapter,
    };
  } catch (error) {
    console.error('Chart.js の読み込みエラー:', error);
    throw new Error('CHARTJS_LOAD_FAILED');
  }
}

export async function load3DLibrary() {
  try {
    console.log('Three.js を読み込み中...');

    const THREE = await import('three');
    const { OrbitControls } = await import(
      'three/examples/jsm/controls/OrbitControls'
    );

    console.log('Three.js の読み込み完了');
    return {
      THREE: THREE,
      OrbitControls,
    };
  } catch (error) {
    console.error('Three.js の読み込みエラー:', error);
    throw new Error('THREEJS_LOAD_FAILED');
  }
}

チャンク最適化とバンドル分析

Turbopack でのチャンク分析

Turbopack では、ビルド時にチャンクサイズと依存関係を詳細に分析できます。

javascript// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    turbo: {
      // チャンク分析を有効化
      moduleIdStrategy: 'deterministic',

      // バンドル分析設定
      rules: {
        // 大きなライブラリを個別チャンクに分離
        '*.{js,ts}': {
          loaders: ['swc-loader'],
          as: '*.js',
        },
      },

      resolveAlias: {
        // よく使用されるライブラリのエイリアス
        '@charts': 'chart.js',
        '@3d': 'three',
        '@utils': './src/utils',
      },
    },
  },

  // バンドル分析用の設定
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, webpack }
  ) => {
    if (!dev && !isServer) {
      // プロダクションビルド時の最適化
      config.optimization.splitChunks = {
        chunks: 'all',
        cacheGroups: {
          // ベンダーライブラリを分離
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all',
            priority: 10,
          },

          // 共通コンポーネントを分離
          common: {
            minChunks: 2,
            name: 'common',
            chunks: 'all',
            priority: 5,
          },

          // 大きなライブラリを個別に分離
          chartjs: {
            test: /[\\/]node_modules[\\/](chart\.js|chartjs-.*)[\\/]/,
            name: 'chartjs',
            chunks: 'all',
            priority: 20,
          },

          threejs: {
            test: /[\\/]node_modules[\\/](three|@types\/three)[\\/]/,
            name: 'threejs',
            chunks: 'all',
            priority: 20,
          },
        },
      };
    }

    return config;
  },
};

module.exports = nextConfig;

実際のバンドル分析結果の確認

bash# バンドル分析ツールのインストール
yarn add --dev @next/bundle-analyzer

# 分析実行
ANALYZE=true yarn build

分析結果の例：

typescript// scripts/analyzeBundles.ts
import fs from 'fs';
import path from 'path';

interface ChunkAnalysis {
  name: string;
  size: number;
  gzipSize: number;
  modules: string[];
  dependencies: string[];
}

export function analyzeChunks(): ChunkAnalysis[] {
  const buildDir = path.join(process.cwd(), '.next');
  const manifestPath = path.join(
    buildDir,
    'build-manifest.json'
  );

  if (!fs.existsSync(manifestPath)) {
    throw new Error('BUILD_MANIFEST_NOT_FOUND');
  }

  const manifest = JSON.parse(
    fs.readFileSync(manifestPath, 'utf8')
  );
  const analysis: ChunkAnalysis[] = [];

  for (const [pageName, files] of Object.entries(
    manifest.pages
  )) {
    const pageAnalysis: ChunkAnalysis = {
      name: pageName,
      size: 0,
      gzipSize: 0,
      modules: [],
      dependencies: [],
    };

    (files as string[]).forEach((file) => {
      const filePath = path.join(buildDir, 'static', file);
      if (fs.existsSync(filePath)) {
        const stats = fs.statSync(filePath);
        pageAnalysis.size += stats.size;
        pageAnalysis.modules.push(file);
      }
    });

    analysis.push(pageAnalysis);
  }

  return analysis.sort((a, b) => b.size - a.size);
}

// 分析結果の出力
export function printChunkAnalysis() {
  const chunks = analyzeChunks();

  console.log('🔍 チャンク分析結果:');
  console.log('==================');

  chunks.forEach((chunk, index) => {
    const sizeKB = (chunk.size / 1024).toFixed(2);
    console.log(`${index + 1}. ${chunk.name}`);
    console.log(`   サイズ: ${sizeKB}KB`);
    console.log(`   モジュール数: ${chunk.modules.length}`);
    console.log('');
  });
}

チャンクサイズ最適化のテクニック

typescript// components/OptimizedChartComponent.tsx
import { useState, useCallback, memo } from 'react';

// Chart.js を条件付きで読み込み
const ChartComponent = memo(() => {
  const [chartLib, setChartLib] = useState<any>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const loadChart = useCallback(async () => {
    if (chartLib) return; // 既に読み込み済み

    setLoading(true);
    setError(null);

    try {
      // 小さなチャンクに分けて読み込み
      const [coreChart, plugins, adapters] =
        await Promise.all([
          import('chart.js/core'), // コア機能のみ
          import('chart.js/plugins'), // プラグインは別途
          import('chartjs-adapter-date-fns'), // アダプターも分離
        ]);

      setChartLib({
        core: coreChart,
        plugins: plugins,
        adapters: adapters,
      });
    } catch (err) {
      console.error('チャート読み込みエラー:', err);
      setError('CHART_LOAD_FAILED');
    } finally {
      setLoading(false);
    }
  }, [chartLib]);

  if (error) {
    return (
      <div className='error-container'>
        <p>チャートの読み込みに失敗しました</p>
        <button onClick={loadChart}>再試行</button>
      </div>
    );
  }

  if (loading) {
    return (
      <div className='loading-skeleton'>
        チャート読み込み中...
      </div>
    );
  }

  if (!chartLib) {
    return (
      <button
        onClick={loadChart}
        className='load-chart-btn'
      >
        チャートを表示
      </button>
    );
  }

  return <div>チャートコンポーネント</div>;
});

ChartComponent.displayName = 'ChartComponent';
export default ChartComponent;

実装コード例とベストプラクティス

プリロード戦略の実装

ユーザーの行動を予測して、必要になりそうなモジュールを事前に読み込む実装です。

typescript// hooks/usePreloader.ts
import { useEffect, useCallback } from 'react';

interface PreloadConfig {
  trigger: 'hover' | 'intersection' | 'idle' | 'manual';
  delay?: number;
  priority?: 'high' | 'low';
}

export function usePreloader() {
  const preloadModule = useCallback(
    async (
      importFn: () => Promise<any>,
      config: PreloadConfig = { trigger: 'idle' }
    ) => {
      const shouldPreload = () => {
        // ネットワーク状況を考慮
        if ('connection' in navigator) {
          const connection = (navigator as any).connection;
          if (
            connection.effectiveType === 'slow-2g' ||
            connection.effectiveType === '2g'
          ) {
            return false; // 低速回線では無効
          }
        }

        // バッテリー状況を考慮
        if ('getBattery' in navigator) {
          navigator.getBattery().then((battery: any) => {
            if (battery.level < 0.2 || !battery.charging) {
              return false; // バッテリー低下時は無効
            }
          });
        }

        return true;
      };

      if (!shouldPreload()) return;

      const preload = async () => {
        try {
          if (config.delay) {
            await new Promise((resolve) =>
              setTimeout(resolve, config.delay)
            );
          }

          console.log('モジュールをプリロード中...');
          await importFn();
          console.log('プリロード完了');
        } catch (error) {
          console.warn('プリロードエラー:', error);
        }
      };

      switch (config.trigger) {
        case 'idle':
          if ('requestIdleCallback' in window) {
            requestIdleCallback(preload);
          } else {
            setTimeout(preload, 0);
          }
          break;

        case 'intersection':
          // Intersection Observer による遅延読み込み
          const observer = new IntersectionObserver(
            (entries) => {
              entries.forEach((entry) => {
                if (entry.isIntersecting) {
                  preload();
                  observer.disconnect();
                }
              });
            },
            { threshold: 0.1 }
          );
          // 対象要素は外部から設定
          break;

        case 'manual':
          return preload;

        default:
          preload();
      }
    },
    []
  );

  return { preloadModule };
}

エラー境界と動的インポートの組み合わせ

typescript// components/DynamicErrorBoundary.tsx
import React, { Component, ReactNode } from 'react';

interface Props {
  children: ReactNode;
  fallbackComponent?: React.ComponentType<{
    error: Error;
    retry: () => void;
  }>;
  onError?: (
    error: Error,
    errorInfo: React.ErrorInfo
  ) => void;
}

interface State {
  hasError: boolean;
  error: Error | null;
  retryCount: number;
}

const MAX_RETRY_COUNT = 3;

export class DynamicErrorBoundary extends Component<
  Props,
  State
> {
  constructor(props: Props) {
    super(props);
    this.state = {
      hasError: false,
      error: null,
      retryCount: 0,
    };
  }

  static getDerivedStateFromError(
    error: Error
  ): Partial<State> {
    return {
      hasError: true,
      error,
    };
  }

  componentDidCatch(
    error: Error,
    errorInfo: React.ErrorInfo
  ) {
    console.error(
      '動的インポートエラー:',
      error,
      errorInfo
    );

    // よくあるエラーパターンを分類
    let errorType = 'UNKNOWN_ERROR';

    if (error.message.includes('Loading chunk')) {
      errorType = 'CHUNK_LOAD_ERROR';
    } else if (
      error.message.includes('Network request failed')
    ) {
      errorType = 'NETWORK_ERROR';
    } else if (
      error.message.includes('Cannot resolve module')
    ) {
      errorType = 'MODULE_NOT_FOUND';
    }

    // エラー報告
    this.props.onError?.(error, errorInfo);

    // 自動リトライ（チャンク読み込みエラーの場合）
    if (
      errorType === 'CHUNK_LOAD_ERROR' &&
      this.state.retryCount < MAX_RETRY_COUNT
    ) {
      setTimeout(() => {
        this.retry();
      }, 1000 * (this.state.retryCount + 1)); // 指数バックオフ
    }
  }

  retry = () => {
    if (this.state.retryCount >= MAX_RETRY_COUNT) {
      console.error('最大リトライ回数に達しました');
      return;
    }

    this.setState((prevState) => ({
      hasError: false,
      error: null,
      retryCount: prevState.retryCount + 1,
    }));
  };

  render() {
    if (this.state.hasError) {
      const FallbackComponent =
        this.props.fallbackComponent || DefaultFallback;
      return (
        <FallbackComponent
          error={this.state.error!}
          retry={this.retry}
        />
      );
    }

    return this.props.children;
  }
}

// デフォルトのフォールバックコンポーネント
const DefaultFallback: React.FC<{
  error: Error;
  retry: () => void;
}> = ({ error, retry }) => (
  <div className='error-fallback'>
    <h3>コンポーネントの読み込みに失敗しました</h3>
    <details>
      <summary>エラー詳細</summary>
      <pre>{error.message}</pre>
    </details>
    <button onClick={retry}>再試行</button>
    <button onClick={() => window.location.reload()}>
      ページを再読み込み
    </button>
  </div>
);

パフォーマンス監視と最適化

typescript// utils/performanceMonitor.ts
interface DynamicImportMetrics {
  moduleName: string;
  loadTime: number;
  chunkSize: number;
  cacheHit: boolean;
  networkLatency: number;
}

class DynamicImportPerformanceMonitor {
  private metrics: DynamicImportMetrics[] = [];
  private loadStartTimes = new Map<string, number>();

  startTracking(moduleName: string) {
    this.loadStartTimes.set(moduleName, performance.now());
  }

  endTracking(
    moduleName: string,
    chunkSize: number,
    cacheHit: boolean = false
  ) {
    const startTime = this.loadStartTimes.get(moduleName);
    if (!startTime) return;

    const loadTime = performance.now() - startTime;
    const networkLatency = this.calculateNetworkLatency();

    const metrics: DynamicImportMetrics = {
      moduleName,
      loadTime,
      chunkSize,
      cacheHit,
      networkLatency,
    };

    this.metrics.push(metrics);
    this.loadStartTimes.delete(moduleName);

    // パフォーマンス閾値チェック
    this.checkPerformanceThresholds(metrics);
  }

  private calculateNetworkLatency(): number {
    if ('connection' in navigator) {
      const connection = (navigator as any).connection;
      return connection.rtt || 0;
    }
    return 0;
  }

  private checkPerformanceThresholds(
    metrics: DynamicImportMetrics
  ) {
    const thresholds = {
      loadTime: 2000, // 2秒
      chunkSize: 500 * 1024, // 500KB
    };

    if (metrics.loadTime > thresholds.loadTime) {
      console.warn(
        `⚠️ 動的インポートが遅い: ${metrics.moduleName} (${metrics.loadTime}ms)`
      );
    }

    if (metrics.chunkSize > thresholds.chunkSize) {
      console.warn(
        `⚠️ チャンクサイズが大きい: ${
          metrics.moduleName
        } (${(metrics.chunkSize / 1024).toFixed(2)}KB)`
      );
    }
  }

  getMetrics(): DynamicImportMetrics[] {
    return [...this.metrics];
  }

  getAverageLoadTime(): number {
    if (this.metrics.length === 0) return 0;
    return (
      this.metrics.reduce((sum, m) => sum + m.loadTime, 0) /
      this.metrics.length
    );
  }

  getCacheHitRate(): number {
    if (this.metrics.length === 0) return 0;
    const cacheHits = this.metrics.filter(
      (m) => m.cacheHit
    ).length;
    return (cacheHits / this.metrics.length) * 100;
  }
}

export const performanceMonitor =
  new DynamicImportPerformanceMonitor();

// 使用例
export async function monitoredDynamicImport<T>(
  importFn: () => Promise<T>,
  moduleName: string
): Promise<T> {
  performanceMonitor.startTracking(moduleName);

  try {
    const module = await importFn();

    // チャンクサイズの推定（実際の実装では別途計測）
    const estimatedSize = 100 * 1024; // 100KB（例）

    performanceMonitor.endTracking(
      moduleName,
      estimatedSize
    );
    return module;
  } catch (error) {
    console.error(
      `動的インポートエラー (${moduleName}):`,
      error
    );
    throw error;
  }
}

実際のトラブルシューティング事例

よく発生するエラーとその対処法をまとめました。

typescript// utils/dynamicImportTroubleshooting.ts

// エラー1: "Loading chunk X failed"
export async function handleChunkLoadError<T>(
  importFn: () => Promise<T>,
  retryCount = 3
): Promise<T> {
  for (let i = 0; i < retryCount; i++) {
    try {
      return await importFn();
    } catch (error) {
      if (
        error instanceof Error &&
        error.message.includes('Loading chunk')
      ) {
        console.warn(
          `チャンク読み込み失敗 (試行 ${
            i + 1
          }/${retryCount}):`,
          error.message
        );

        if (i === retryCount - 1) {
          // 最後の試行で失敗した場合、ページリロードを提案
          throw new Error('CHUNK_LOAD_FAILED_FINAL');
        }

        // 指数バックオフでリトライ
        await new Promise((resolve) =>
          setTimeout(resolve, Math.pow(2, i) * 1000)
        );
        continue;
      }
      throw error;
    }
  }

  throw new Error('UNEXPECTED_ERROR');
}

// エラー2: "Cannot resolve module"
export function createFallbackImport<T>(
  primaryImport: () => Promise<T>,
  fallbackImport: () => Promise<T>
): () => Promise<T> {
  return async () => {
    try {
      return await primaryImport();
    } catch (error) {
      if (
        error instanceof Error &&
        error.message.includes('Cannot resolve module')
      ) {
        console.warn(
          'プライマリモジュール解決失敗、フォールバックを使用'
        );
        return await fallbackImport();
      }
      throw error;
    }
  };
}

// エラー3: TypeScript型エラーの対処
export interface DynamicComponentProps {
  [key: string]: any;
}

export function createTypedDynamicImport<
  T extends React.ComponentType<any>
>(importFn: () => Promise<{ default: T }>) {
  return async (): Promise<T> => {
    try {
      const module = await importFn();
      return module.default;
    } catch (error) {
      console.error('型付き動的インポートエラー:', error);

      // TypeScriptエラーの場合、any型でフォールバック
      if (
        error instanceof Error &&
        error.message.includes('TS')
      ) {
        console.warn(
          'TypeScript型エラーを検出、any型でフォールバック'
        );
        return (await importFn()).default as T;
      }

      throw error;
    }
  };
}