VUE项目路由懒加载

最新推荐文章于 2025-11-06 10:04:23 发布

原创最新推荐文章于 2025-11-06 10:04:23 发布 · 768 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#路由懒加载 #VUE项目路由懒加载

VUE 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一种通过改变模块引入方式实现路由懒加载的方法，以减少首次加载时间，提高用户体验。通过将所有JS文件按需打包成多个小文件，而非整合为几个大文件，实现了资源的有效利用。

路由懒加载

我们一般情况下都是在router下面的index.js文件中,使用下面的代码方式来引入模块

import User from '@/components/user/user'

然后,等项目开发完成,需要打包上线,我们在打包时候会发现下面的界面:
在这里插入图片描述
然后打包完成的dist文件夹下面按照上图的路径可以找到这两个文件:

有这些可以看出来,我们是将所有的js文件全部整合到这几个以.js为结尾的文件了,所以导致文件特别大,第一次打开系统时候加载比较慢;那又没有什么好的解决办法呢? 答案当然是肯定的啦~
那就是路由懒加载
其实实现起来很简单,就是要把模块引入方式改变一下

// import User from '@/components/user/user' 通常写法
const User = resolve => require(['@/components/user/user'], resolve) // 路由懒加载写法

修改完之后我们再次进行打包,然后你发现界面就这样的:
在这里插入图片描述
出现好多js文件,它是把每个模块的JS分别打包一个JS文件,然后按需引入.这样就能保证系统在第一次加载时快了.
想要知道路由懒加载的原理还要从webpack打包工具了解了,想深入学习的小伙伴后续会更新哦~

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Calla_Lj

关注关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue实现路由懒加载的3种方法示例

10-14

Vue 路由懒加载是优化前端应用性能的关键技术之一，它允许我们在用户实际访问某个路由对应的组件时才进行加载，而不是一次性加载所有资源。这样可以显著提高初始加载速度，尤其是对于大型应用而言，可以避免首页加载...

vue2笔记 — vue-router路由懒加载的实现

12-09

在Vue.js开发的单页面应用（SPA）中，Vue Router 提供了路由懒加载的功能，以解决由于大型项目导致的打包文件过大的问题。 Vue Router 是 Vue.js 的官方路由库，用于管理SPA中的各个视图组件。在默认情况下，所有...

参与评论您还未登录，请先登录后发表或查看评论

vue 实现懒加载

When you can't win by being better, you can win by being different.

04-23

6983

懒加载，也称为延迟加载，是一种将资源（如图片、组件、代码等）推迟到需要的时候再加载的策略。在 Vue 中，懒加载通常涉及到组件和图片的加载。

vue-router路由懒加载的实现（解决vue项目首次加载慢）

12-11

在Web应用程序中，系统的瓶颈常在于系统的响应速度。如果系统响应速度过慢，用户就会出现埋怨情绪，系统的价值也因此会大打折扣。因此，提高系统响应速度，是非常重要的。 懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。也叫延迟加载，即在需要的时候进行加载，随用随载。为什么需要懒加载？像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loa

Vue2 首屏加载慢打包优化的详细记录

热门推荐

qq_42805569的博客

12-11

1万+

路由懒加载：整个网页默认是刚打开就去加载所有页面，路由懒加载就是只加载你当前点击的那个模块。按需去加载路由对应的资源，提高首屏加载速度（tip:首页不用设置懒加载，而且一个页面加载过后再次访问不会重复加载）。实现原理：将路由相关的组件，不再直接导入了，而是改写成异步组件的写法，只有当函数被调用的时候，才去加载对应的组件内容。传统路由配置： import Vue from 'vue' import VueRouter from 'vue-router' import Login fro

Vue路由懒加载（两种写法）

qq_44977477的博客

09-10

428

懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。 routes: [ { path: '/', name: 'HelloWorld', component: () => import('@/page/Vue

vue懒加载

zybijiso666的博客

08-03

317

Vue的懒加载是一种优化技术，用于延迟加载页面中的组件或路由。它可以帮助减少初始页面加载时间，提升用户体验。在Vue中，你可以使用动态导入（Dynamic Import）来实现懒加载。通过将组件或路由包装在。函数中，并在需要时动态加载，可以将组件的加载推迟到实际需要使用它们的时候。

Vue路由懒加载

weixin_55803498的博客

05-31

2565

路由懒加载的主要原理就是原本的Vue模块是全部导入在一起的打包文件，运行后用户查看相关模块显示的内容时会将整个打包的文件引入而后在其中查找对应的模块然后才将其呈现给用户。这样会使得在打包文件中查找对应模块时在浏览器中可能会出现短暂的空白页，从而降低用户体验。而路由懒加载是将各个模块分开打包，在用户查看下相关模块内容时就直接引入相关模块的打包文件然后进行显示，从而有效的解决了浏览器可能出现短暂时间空白页的情况。具体操作如下为例 //原本将所有模块全部导入 // import home ...

vue 路由懒加载

yinmeizhuang的博客

06-30

143

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。首先，可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身)： const Foo = () => Promise.resolve({ /* 组件定...

Vue Webpack 打包优化——路由懒加载（按需加载）原理讲解及使用方法

Jay的博客

05-26

1万+

因为Vue 是SPA，所以首页第一次加载时会把所有的组件以及组件相关的资源全都加载了。这样就会导致首页加载时加载了许多首页用不上的资源，造成网站首页打开速度变慢，降低用户体验。为了解决上面问题，我们需要对Vue实现组件懒加载。本文将对懒加载的实现原理以及使用进行讲解。

vue2路由懒加载

09-24

<think> 我们正在讨论Vue2路由懒加载的实现方法和原理。根据之前的引用，我们可以总结如下：路由懒加载的核心思想是将不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件的代码块。这样可以减少初始加载时的资源体积，加快首屏渲染速度，提升用户体验。在Vue2中，实现路由懒加载的主要方式有两种： 1. 使用ES6的动态导入（`import()`）语法（推荐） 2. 使用Webpack的`require.ensure`（旧写法） ### 一、实现方法 #### 方法1：ES6动态导入（推荐）在定义路由时，使用`import()`函数来指定组件。Webpack会将动态导入的模块分割成单独的chunk，在路由被访问时加载。 ```javascript const router = new VueRouter({ routes: [ { path: '/home', component: () => import('../views/Home.vue') // 懒加载Home组件 }, { path: '/about', component: () => import('../views/About.vue') // 懒加载About组件 } ] }) ``` #### 方法2：使用`require.ensure`（Webpack特定语法）这是Webpack提供的方法，现在已经被动态导入取代，但在一些旧项目中可能还会看到。 ```javascript const router = new VueRouter({ routes: [ { path: '/home', component: resolve => require.ensure([], () => resolve(require('../views/Home.vue')), 'home') }, { path: '/about', component: resolve => require.ensure([], () => resolve(require('../views/About.vue')), 'about') } ] }) ``` 或者使用`require`的异步形式（引用[4]中的写法）： ```javascript { path: '/login', name: 'Login', component: resolve => require(["@/view/system/login/Login"], resolve), meta: { keepAlive: true } } ``` ### 二、路由懒加载的原理 1. **代码分割**：在Webpack等打包工具中，使用动态导入语法（如`import()`）会被识别为代码分割点。打包工具（Webpack）会自动将动态导入的模块分割成单独的chunk（代码块），而不是打包到主包中。 2. **按需加载**：当应用运行时，初始加载只加载主包（包含核心逻辑和路由配置）。当用户访问某个路由时，Vue Router会动态加载该路由对应的chunk，然后渲染对应的组件。 3. **实现机制**： - Vue Router在内部使用了一个异步组件工厂函数来解析动态导入的组件。 - 当路由被匹配时，Vue Router会触发加载该路由对应的chunk（JavaScript文件），加载完成后，将组件渲染出来。 4. **异步组件**：路由懒加载本质上是Vue的异步组件在路由中的一种应用。Vue允许将一个组件定义为一个返回Promise的工厂函数，该Promise解析为组件的定义对象。动态导入`import()`返回的就是一个Promise。 ### 三、优点与注意事项 **优点**: - 减少首屏加载的资源体积，加快首屏加载速度。 - 将不同路由的代码分离，提高页面加载效率。 - 当打包构建应用时，JavaScript包会变得非常大，影响页面加载。使用路由懒加载后，每个路由生成一个独立的chunk文件，按需加载。 **注意事项**： - 如果懒加载的模块过多，可能会产生大量的HTTP请求（Webpack可以通过配置合并小文件）。 - 可以使用Webpack的魔法注释（Magic Comments）来指定chunk的名称，便于管理和预加载： ```javascript component: () => import(/* webpackChunkName: "group-home" */ './Home.vue') ``` - 在Vue CLI创建的项目中，已经默认配置了Webpack的代码分割功能。 ### 四、动态导入与静态导入的区别 - **静态导入**：`import Home from './Home.vue'` 这种方式会在应用启动时就将该模块加载进来，如果模块很大，会影响首屏加载速度。 - **动态导入**：`() => import('./Home.vue')` 这种方式会将该模块单独打包，等到需要的时候再加载，实现了懒加载。 ### 五、总结 Vue2中路由懒加载通过动态导入语法（或Webpack的`require.ensure`）将路由组件分割成独立的代码块，在路由被访问时才加载这些代码块。其原理是利用了Webpack的代码分割功能和Vue的异步组件机制。这样可以有效减少首屏加载时间，提升用户体验。 [^1] [^2] [^3] [^4] [^5] §§相关问题§§ 1. Vue2中如何实现路由组件的预加载？ 2. 路由懒加载对Vue应用的性能优化还有哪些帮助？ 3. 在Vue2中，如何处理路由懒加载时的错误（例如加载失败）？ </think> ### Vue2 路由懒加载的实现方法与原理 #### 一、路由懒加载的核心概念路由懒加载（Lazy Loading）是一种优化技术，通过**延迟加载路由组件**来减少初始页面加载时间。在 Vue2 SPA 应用中，若不使用懒加载，所有路由组件会被打包到同一个 JavaScript 文件中，导致： 1. 首屏加载时间过长（可能造成白屏） 2. 不必要的资源浪费（用户可能不会访问某些页面） 3. 整体包体积过大（引用[2][^2]） #### 二、实现方法（3种主流方式） 1. **ES6 动态导入（推荐）** 使用 `import()` 语法动态加载组件： ```javascript const Home = () => import("../views/Home.vue"); const User = () => import("../views/User.vue"); ``` - **原理**：Webpack 会将 `import()` 识别为代码分割点，生成独立 chunk 文件 - **优势**：符合 ECMA 标准，支持 Webpack 魔法注释命名 chunk ```javascript const Admin = () => import(/* webpackChunkName: "admin" */ "./Admin.vue") ``` 2. **Webpack 的 require.ensure** 适用于需要兼容旧浏览器的项目： ```javascript { path: "/login", component: resolve => require.ensure( [], () => resolve(require("@/views/Login.vue")), "auth" // chunk 名称 ) } ``` - **适用场景**：需兼容不支持 Promise 的环境（引用[4][^4]） 3. **Vue 异步组件 + require** 结合 Vue 的异步组件机制： ```javascript { path: "/dashboard", component: resolve => require(["@/views/Dashboard.vue"], resolve) } ``` #### 三、底层原理 1. **代码分割机制**： - Webpack 将 `import()` 或 `require.ensure` 标记为**分割点** - 每个路由组件生成独立 JS 文件（如 `0.js`, `1.js`） - 初始只加载主 chunk `app.js` 2. **按需加载流程**： ```mermaid graph LR A[用户访问路由] --> B[Vue Router 匹配路径] B --> C{组件是否已加载?} C -->|否| D[发起网络请求获取对应chunk] D --> E[加载完成后渲染组件] C -->|是| F[直接渲染组件] ``` 3. **浏览器行为**： - 路由切换时发起异步 JS 请求 - 加载完成后执行组件初始化 - Vue 将组件注入当前渲染树（引用[3][^3]） #### 四、性能优化建议 1. **预加载策略**：使用 Webpack 的 `webpackPrefetch` 预加载非关键路由： ```javascript const Settings = () => import( /* webpackPrefetch: true */ "./views/Settings.vue" ); ``` 2. **分组加载**：将关联路由合并到同一 chunk： ```javascript // 将用户相关路由打包到 user-chunk.js const UserProfile = () => import(/* webpackChunkName: "user" */ "./Profile.vue"); const UserSettings = () => import(/* webpackChunkName: "user" */ "./Settings.vue"); ``` 3. **错误处理**：添加加载状态和错误处理： ```javascript const Product = () => ({ component: import("./Product.vue"), loading: LoadingComponent, // 加载中显示的组件 error: ErrorComponent, // 加载失败显示的组件 timeout: 3000 // 超时时间(ms) }); ``` #### 五、实际效果对比 | 方式 | 首屏体积 | 加载速度 | 开发体验 | |------------------|----------|----------|----------| | 非懒加载 | 2MB+ | 慢 ❌ | 简单 ✅ | | 路由懒加载 | 200KB ✅ | 快 ✅ | 中等 ⚠️ | | 懒加载+预加载 | 200KB ✅ | 极快 ✅ | 复杂 ⚠️ | > **最佳实践**：中型以上项目必用路由懒加载，可提升首屏加载速度 40%-70%（引用[2][^2]） [^2][^3][^4][^5]