JavaScript 动态导入怎么实现路由懒加载-js教程-PHP中文网

使用动态导入实现路由懒加载的核心做法是调用 import() 函数，并将返回的 promise 对象直接作为路由配置中 component 字段的值。这样做可以让浏览器在用户访问特定路由时才下载对应的 javascript 代码块，从而显著减小初始包体积并加快首屏加载速度。

JavaScript 动态导入怎么实现路由懒加载

Vue Router 中如何配置异步组件

在 Vue Router 中，只需将路由定义里的 component 属性替换为返回 Promise 的箭头函数即可触发懒加载机制。该函数内部执行 import() 并指向具体的 Vue 单文件组件路径，路由器会在导航发生时自动等待模块加载完成。

JavaScript 动态导入怎么实现路由懒加载

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/home',
      component: () => import('./views/Home.vue')
    },
    {
      path: '/about',
      component: () => import('./views/About.vue')
    }
  ]
});

export default router;

预期结果：当首次访问 /home 时，浏览器会发起对 Home.vue 编译后 JS 文件的请求；若直接访问 /about，则不会加载 Home.vue 的代码。

React Router 中如何实现按需加载

在 React Router 中，通常结合 React.lazy 和 Suspense 来实现路由级别的懒加载。React.lazy 接收一个包含 import() 调用的函数，将其包裹的路由组件会在渲染前进行代码分割。配合 Suspense 可以展示加载状态，避免页面空白。

javascript-typescript-typescript-scaffold

你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型

下载

JavaScript 动态导入怎么实现路由懒加载

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

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

function App() {
  return (
    <router><suspense fallback="{<div">Loading...}>
        <routes><route path="/home" element="{<Home"></route>} />
          <route path="/about" element="{<About"></route>} />
        </routes></suspense><router>
  );
}

export default App;</router></router>

预期结果：点击链接进入 /home 时，Home 组件的代码块才会被下载并执行；Suspense 中的 fallback 内容会在加载期间显示。

动态导入失败时的错误处理策略

当网络异常或模块路径错误导致 import() 拒绝 Promise 时，应用需要捕获该错误以防止白屏。在 Vue 中可以通过路由守卫的 catch 方法或在组件加载逻辑中处理；在 React 中可以使用 Error Boundary 来捕获 React.lazy 抛出的异常，并提供重试或降级界面。