Code Splitting
代码拆分

// 引擎层面：动态 import() 被编译器如何处理

// 1️⃣ 编译阶段 — Webpack 识别到 import() 表达式
const module = await import('./heavy-module')

// 2️⃣ Webpack 将其转换为运行时调用 (简化版)
const module = __webpack_require__.e(/* import() */ "heavy-module-chunk")
  .then(__webpack_require__.bind(null, './heavy-module'))

// 3️⃣ __webpack_require__.e 的核心逻辑
function ensure(chunkId) {
  return installedChunks[chunkId] = new Promise((resolve, reject) => {
    // 动态创建 <script> 标签
    var script = document.createElement('script');
    script.src = __webpack_require__.p + chunkId + ".chunk.js";
    // 注册回调，chunk 加载完毕后 resolve
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

// 📊 编译产物对比 — 同一项目，两种打包器

// Webpack 产物结构 (production)
dist/
├── main.4f2a8b1c.js          (89KB gzipped)   ← 入口 chunk
├── vendors.e5d7c3b2.js       (142KB gzipped)  ← node_modules
├── charts.7a9f1e4d.chunk.js  (67KB gzipped)   ← 按需加载的图表
├── dashboard.a1b2c3d4.chunk.js (23KB gzipped) ← 路由 chunk
└── 883.chunk.js               (12KB gzipped)   ← Webpack 自动命名

// Vite 产物结构 (production)
dist/
├── assets/main-bK4x2d.js         (82KB gzipped)  ← 入口 chunk
├── assets/vendor-react-P3x1.js   (45KB gzipped)  ← React 独立
├── assets/vendor-charts-mN7k.js  (64KB gzipped)  ← 图表独立
├── assets/dashboard-Qr8w.js     (21KB gzipped)  ← 路由 chunk
└── assets/vendor-utils-fL2p.js   (18KB gzipped)  ← 工具库

// 🔑 关键差异：
// 1. Webpack 默认用数字 ID 命名 chunk，Vite 用语义化命名
// 2. Vite 生产构建基于 Rollup，tree-shaking 通常更彻底
// 3. Webpack 的 splitChunks.cacheGroups 更灵活，Vite 用 manualChunks

// 🔮 预加载策略 — 在用户"快要"需要时提前加载

// 方案一：Hover 预加载（最常用）
function NavLink({ href, children }: { href: string; children: React.ReactNode }) {
  const router = useRouter();

  const handleMouseEnter = () => {
    // 鼠标悬停时预加载目标路由的 chunk
    router.prefetch(href);  // ← Next.js 内置
  };

  return (
    <a
      href={href}
      onMouseEnter={handleMouseEnter}
      className="hover:underline"
    >
      {children}
    </a>
  );
}

// 方案二：基于视口的预加载
function useViewportPreload(href: string) {
  const ref = useRef<HTMLElement>(null);
  const router = useRouter();

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          router.prefetch(href);  // ← 元素进入视口时预加载
          observer.disconnect();
        }
      },
      { rootMargin: '200px' }     // 提前 200px 开始加载
    );
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, [href, router]);

  return ref;
}

// 方案三：空闲时预加载（非关键路由）
function useIdlePreload(href: string) {
  const router = useRouter();
  useEffect(() => {
    if ('requestIdleCallback' in window) {
      requestIdleCallback(() => router.prefetch(href));  // ← 浏览器空闲时
    } else {
      setTimeout(() => router.prefetch(href), 2000);     // 降级方案
    }
  }, [href, router]);
}