JavaScript代码分割_路由懒加载方案-js教程-PHP中文网

JavaScript代码分割_路由懒加载方案

betcha

发布： 2025-11-25 13:53:26

原创

473人浏览过

路由懒加载通过动态import按需加载页面组件，避免打包成单一文件，提升首屏加载速度。React中使用React.lazy与Suspense配合实现，Vue中在Vue Router配置时采用动态import，均由Webpack自动分割代码生成独立chunk，建议添加loading提示、合理拆分并可结合预加载优化体验。

javascript代码分割_路由懒加载方案

在现代前端应用中，JavaScript 的代码分割（Code Spliting）是提升性能的关键手段之一。通过将代码拆分成更小的块，按需加载，可以显著减少首屏加载时间。其中，路由懒加载是一种常见且高效的实现方式，特别适用于使用 React、Vue 等框架的单页应用（SPA）。

什么是路由懒加载？

路由懒加载指的是：只有当用户跳转到某个路由时，才动态加载该路由对应的组件和相关代码。这避免了将所有页面打包进一个巨大的 bundle.js 文件中，从而优化初始加载速度。

其核心原理是利用 JavaScript 的动态 import() 语法，配合打包工具（如 Webpack、Vite）自动实现代码分割。

React 中的路由懒加载实现

在 React 项目中，结合 React.lazy 和 Suspense 可轻松实现路由级懒加载。

立即学习“Java免费学习笔记（深入）”；

爱克网络企业网站建设系统 No.090730

系统特点：功能简洁实用。目前互联网上最简洁的企业网站建设系统！原创程序代码。非网络一般下载后修改的代码。更安全。速度快！界面模版分离。原创的分离思路，完全不同于其他方式，不一样的简单感受！搜索引擎优化。做了基础的seo优化。对搜索引擎更友好系统功能关于我们：介绍企业介绍类信息，可自由添加多个介绍栏目！资讯中心：公司或行业资讯类内容展示。可自由添加多个资讯内容！产品展示：支持类别设置，可添加产品图片

查看详情

示例代码：

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

// 懒加载组件
const Home = React.lazy(() => import('./pages/Home'));
const About = React.lazy(() => import('./pages/About'));
const User = React.lazy(() => import('./pages/User'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/user/:id" element={<User />} />
          <Route path="*" element={<Navigate to="/" />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

export default App;

登录后复制

Webpack 会自动将每个 import() 拆分为独立的 chunk 文件，例如：Home.chunk.js，访问对应路由时才会加载。

Vue 中的路由懒加载配置

在 Vue 项目中，使用 Vue Router 时，可通过动态 import() 实现组件的懒加载。

示例代码：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  },
  {
    path: '/user',
    name: 'User',
    component: () => import('../views/User.vue')
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

登录后复制

这种写法会让 Webpack 自动进行代码分割，每个页面组件生成单独的 JS 文件，访问时异步加载。