// 靜態(tài)導(dǎo)入 - 應(yīng)用啟動(dòng)時(shí)立即加載
import { heavyFunction } from './heavyModule';

// 動(dòng)態(tài)導(dǎo)入 - 按需加載
button.addEventListener('click', async () => {
  const { heavyFunction } = await import('./heavyModule');
  heavyFunction();
});

// 路由級(jí)別的代碼分割
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Contact = lazy(() => import('./pages/Contact'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Suspense>
  );
}

// React Router v6 示例
import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./Dashboard'));
const Settings = lazy(() => import('./Settings'));
const Profile = lazy(() => import('./Profile'));

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

import { lazy, useState } from 'react';

const HeavyModal = lazy(() => import('./HeavyModal'));

function App() {
  const [showModal, setShowModal] = useState(false);

  return (
    <div>
      <button onClick={() => setShowModal(true)}>
        打開(kāi)復(fù)雜模態(tài)框
      </button>
      {showModal && (
        <Suspense fallback={<div>加載中...</div>}>
          <HeavyModal onClose={() => setShowModal(false)} />
        </Suspense>
      )}
    </div>
  );
}

class RichTextEditor {
  async initialize() {
    if (!this.editor) {
      // 動(dòng)態(tài)加載富文本編輯器
      const { default: Editor } = await import('quill');
      this.editor = new Editor(this.container, {
        theme: 'snow'
      });
 });
  }
}

// 鼠標(biāo)懸停時(shí)預(yù)加載
const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  const [shouldLoad, setShouldLoad] = useState(false);

  return (
    <div>
      <button 
        onMouseEnter={() => setShouldLoad(true)}
        onClick={() => setShouldLoad(true)}
      >
        加載組件
      </button>
      {shouldLoad && (
        <Suspense fallback={<div>加載中...</div>}>
          <LazyComponent />
        </Suspense>
      )}
    </div>
  );
}

import { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => 
  import('./LazyComponent').catch(() => ({
    default: () => <div>組件加載失敗</div>
  }))
);

function App() {
  return (
    <Suspense fallback={<div>加載中...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

// 高優(yōu)先級(jí)預(yù)加載
import(/* webpackPrefetch: true */ './importantModule');

// 低優(yōu)先級(jí)預(yù)加載
import(/* webpackPreload: true */ './lowPriorityModule');

// 監(jiān)控動(dòng)態(tài)導(dǎo)入性能
async function trackDynamicImport(modulePath) {
  const startTime = performance.now();
  
  try {
    const module = await import(modulePath);
    const loadTime = performance.now() - startTime;
    
    // 發(fā)送監(jiān)控?cái)?shù)據(jù)
    analytics.track('dynamic_import_loaded', {
      module: modulePath,
      loadTime,
      size: module.__webpack_chunk_size__
    });
    
    return module;
  } catch (error) {
    analytics.track('dynamic_import_failed', {
      module: modulePath,
      error: error.message
    });
    throw error;
  }
}