Frontend Academy · 课时

代码拆分与懒加载路由

使用动态 import() 在路由边界处拆分打包文件，懒加载 React 和 Vue 组件，并在构建输出中监控代码块大小。

第 4 / 4 课13 个步骤

代码拆分与懒加载路由 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

为什么要进行代码拆分

单体 JavaScript 代码包会迫使每位访客下载应用中的每一行代码——即使他们永远不会使用这些功能。代码拆分会将代码包拆成按需加载的代码块。

动态 import()

import('./module') 会返回一个 Promise，该 Promise 解析为对应的模块。打包工具（Vite、webpack）看到这种写法后，会生成一个在运行时加载的独立代码块。

// Without split — entire heavy lib in main bundle:
import { generateChart } from 'heavy-chart-lib';

// With split — loaded only when needed:
button.addEventListener('click', async () => {
  const { generateChart } = await import('heavy-chart-lib');
  generateChart(data);
});

React.lazy()——组件级拆分

React.lazy(() => import('./Heavy')) 会创建一个组件，只有在第一次渲染时才加载其代码。将它放在 <Suspense> 中，以便加载期间显示后备内容。

import { lazy, Suspense } from 'react';

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

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Dashboard />
    </Suspense>
  );
}

React Router 中基于路由的拆分

每个路由都会获得自己的代码块，用户只需下载他们访问的页面所需的代码。

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { lazy, Suspense } from 'react';

const Home    = lazy(() => import('./pages/Home'));
const Profile = lazy(() => import('./pages/Profile'));
const Admin   = lazy(() => import('./pages/Admin'));

const router = createBrowserRouter([
  { path: '/',        element: <Suspense fallback={<Spinner/>}><Home /></Suspense> },
  { path: '/profile', element: <Suspense fallback={<Spinner/>}><Profile /></Suspense> },
  { path: '/admin',   element: <Suspense fallback={<Spinner/>}><Admin /></Suspense> }
]);

Vue 3 异步组件

Vue 提供 defineAsyncComponent 来实现相同的模式。

import { defineAsyncComponent } from 'vue';

const Dashboard = defineAsyncComponent(() =>
  import('./Dashboard.vue')
);

// Use in template like a normal component

Vue Router 延迟路由

Vue Router 支持在路由定义中使用动态导入，因此每个路由都会生成独立的代码块。

const routes = [
  { path: '/',        component: () => import('./pages/Home.vue') },
  { path: '/profile', component: () => import('./pages/Profile.vue') },
  { path: '/admin',   component: () => import('./pages/Admin.vue') }
];

webpack 魔法注释

可以在 import 语句中通过 webpack 的“魔法注释”提示代码块名称和预获取行为。

const Profile = lazy(() =>
  import(/* webpackChunkName: "profile", webpackPrefetch: true */ './Profile')
);

// Vite supports a subset; @vite-ignore for special cases

预获取与预加载

prefetch：在空闲时间下载代码块，用于可能即将发生的导航。preload：以高优先级立即下载，用于当前路由的关键代码块。在链接悬停时使用 prefetch，在已知需求即将发生时使用 preload。

代码包分析器

使用 rollup-plugin-visualizer（Vite）或 webpack-bundle-analyzer 可视化代码块大小。重点查看：过大的代码块、重复的依赖，以及忘记进行树摇优化的库。

// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer';

export default {
  plugins: [visualizer({ open: true, gzipSize: true })]
};

供应商代码块拆分

将第三方库拆分到独立的供应商代码块中。它的变化频率低于应用代码，因此浏览器可以在多次部署之间保留其缓存。

// vite.config.ts
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-dom'],
          ui: ['@radix-ui/react-dialog', '@radix-ui/react-tooltip']
        }
      }
    }
  }
};

何时不应拆分

过小的代码块（低于 20KB）带来的弊大于利——HTTP 开销超过了代码包节省的体积。不要拆分每个组件；应在路由边界处，以及真正繁重的功能周围进行拆分。

快速检查

React 的 lazy() 包装器需要与什么搭配，才能正确渲染？

在交互式课程中回答

回顾：代码拆分

动态 import() 会生成独立的代码块。使用 React.lazy 和 Suspense 进行组件拆分。在 React Router / Vue Router 中使用延迟加载的路由组件。对可能即将访问的代码块使用 prefetch，对关键代码块使用 preload。代码包分析器可以发现浪费。拆分供应商库以提高缓存复用率。避免创建低于 20KB 的微型代码块。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 41
课程: 163

免费开始学习查看完整课程

常见问题解答

「代码拆分与懒加载路由」课时是免费的吗？

是的 — 「代码拆分与懒加载路由」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「代码拆分与懒加载路由」这节课中我会学到什么？

使用动态 import() 在路由边界处拆分打包文件，懒加载 React 和 Vue 组件，并在构建输出中监控代码块大小。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「代码拆分与懒加载路由」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy