vue-路由懒加载的应用

最新推荐文章于 2023-08-12 10:11:18 发布

zyhzyh1120

最新推荐文章于 2023-08-12 10:11:18 发布

阅读量272

点赞数

分类专栏： vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/zyhzyh1120/article/details/122075422

版权

这篇博客主要记录了Vue中实现路由懒加载的实践，通过Vue异步组件的方式，提高应用的加载效率。

摘要由CSDN通过智能技术生成

使用的简单记录，备忘。

vue作为单页面应用, 如果不采用按需加载的方式, 首屏加载是非常慢的,即使做了loading也是严重影响用户体验，所以按需加载路由是一个项目的基础构建。(首屏加载优化...后续会记录)

目前常用的方法

Vue异步组件

// 一个组件生成一个js文件
{
   
  path: '/',
  name: 'Index',
  component: resolve => require(['&#

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zyhzyh1120

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue-router懒加载速度缓慢问题及解决方法

10-17

Vue-router作为Vue.js的核心插件，用于构建单页面应用（SPA），其路由懒加载技术是Vue.js开发中经常会用到的优化手段。本文将详细介绍Vue-router中懒加载速度缓慢问题及其解决方案。首先，需要理解什么是懒加载。...

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

10-14

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

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

vue路由懒加载

shuo的博客

03-15

317

一、懒加载：也叫延迟加载，就是在需要的时候进行加载，随用随载。二、适用场景：用vue构建单页面应用，打包的时候，JavaScript包会变得非常大，进入页面需要加载的内容太多，延时过长，不利于用户体验，而使用懒加载可以将页面划分，需要的时候再去加载页面，这样就更加高效了三、懒加载写法：...

懒加载在图片，路由和组件上的应用

qq_45775962的博客

05-24

154

懒加载 懒加载是什么样的一种技术？也叫延迟加载，简单理解就是用户滚动到它们之前，可视范围外的内容会先不加载引入：一些电商平台或者是现在的一些新闻网页，当我们需要看到看后面的新闻，我们会做一个下滑的操作，这时候会有一个加载内容的操作结论：我们把这种后面用上才加载的技术叫做懒加载 懒加载起到一个什么样的作用？不使用懒加载技术会如何？一般vue项目由webpack打包后文件会非常大，这会造成进入首页时需要加载的内容过多，延时过长，白屏的时间过长【白屏时间和浏览器机制有关，后面会有文章讲讲这方面】

vue2实现懒加载

juse__we的博客

07-25

2374

参考https://www.cnblogs.com/zhanyishu/p/6587571.html 五、配置异步组件实现懒加载的问题分析　　1、多次进出同一个异步加载页面是否会造成多次加载组件？　　答：否，首次需要用到组件时浏览器会发送请求加载组件，加载完将会缓存起来，以供之后再次用到该组件时调用　　2、在多个地方使用同一个异步组件时是否造成多次加载组件？如： 1 ...

项目优化策略之——vue路由懒加载

撑起自己半边天

05-20

253

当打包构建项目时，JavaScript包会变得非常大，从而影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问时才加载对应组件，这样就会使得项目运行变得更加高效了。

路由懒加载（一般用于外层路由）

w18789476022的博客

04-09

197

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

10-18

对于Vue项目而言，利用vue-router实现路由的懒加载可以按需加载各个路由组件，从而避免了应用启动时一次性加载全部页面和组件的资源。当用户访问某个路由时，才会去加载对应模块的代码，这极大提高了应用的性能和...

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

12-09

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

vue-router【详解】路由懒加载

朝阳39的博客

05-10

467

目录 路由懒加载的定义 路由懒加载的使用场景 路由懒加载的实现方式一：【推荐】使用import 方式二：使用require 方式三：【不推荐，已过时】使用webpack提供的require.ensure() 传统写法——未使用路由懒加载 参考资料 路由懒加载的定义当路由被访问时才加载对应的组件，即路由懒加载。 路由懒加载的使用场景未使用路由懒加载时，访问任一路由，都需要加载整个项目的所有js文件，会耗费大量的时间，严重影响页面加载速度，为了提升页面渲染性能（缩短.

vue路由的使用

qq407949480的博客

11-07

156

如果使用vue-cli脚手架工具的话，默认会给你安装路由的提示选项，根据自己需要选择安装与否，这里仅仅是了解其原理。 1、首先是安装vue-router插件 cnpm（npm） install --save vue-router 2、然后新建在src目录下新建一个router文件夹，然后新建一个index.js的文件，紧接着自定义路由组件，许多描述在注释中 import Vue fro...

vue首屏加载优化（路由懒加载）

Flying____fish的博客

03-27

1594

vue首屏加载过慢问题首屏加载过慢原因： vue进行的是单页面开发，第一次加载页面时会一次性几乎把所有的组件数据下载完毕，导致加载时间过长，出现白屏停留时间过长的情况，也就是首屏加载过慢问题。解决办法： 路由懒加载 ui 框架按需加载 gzip 压缩一、路由懒加载 官方描述：当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加

vue 进页面一次就加载一次

weixin_55648290的博客

01-07

4684

vue 进页面一次就加载一次

路由懒加载

weixin_58032613的博客

03-29

1348

懒加载解决的问题：避免进入首页就加载全部的前端资源造成用户等待时间过长的问题。就好比，访问 login 页面，你返回的 js 路由不仅有渲染 login 页面的，还有渲染 production 页面以及其他页面的功能。而这些代码量太大了，文件也大。js 文件有个特征，下载完全了才会运行，导致页面首屏速度太慢了，也就是白屏时间太长。这个问题，早就有人发现，于是解决方案就是路由懒加载，这只是一个技术名词。 Vue路由懒加载原理说明我们一开始用ES6的写法，在路由文件router/index.js中引入所

Vue 路由懒加载

热门推荐

weixin_42464106的博客

07-26

1万+

什么是路由懒加载？--延迟加载，在需要的时候才会进行加载。实现路由懒加载的方法，vue-router,Vue异步组件 ES6的import() webpack的require.ensure()

Vue 项目中为什么要用路由懒加载？怎么使用路由懒加载？路由懒加载，组件懒加载

鸡血博客

10-25

986

https://blog.csdn.net/sally18/article/details/96476406

Vue项目中使用懒加载 vue-lazy

最爱喝怡宝的博客

12-29

2736

1.首先准备好需要的图片，放在：src\common\image目录下 default.jpg default.png 懒加载使用的图片的目的：当你页面中的素材图片没有显示出来的时候，先让懒加载的图片显示出来。 2.在你的Vue项目中下载vue-lazyload cnpm install vue-lazyload --save-dev 然后，到你的配置文件package.json中查看是否下载成功。 "vue-lazyload": "^1.3.3", 3.在入口文件 main.js 中

vue-cli3 路由懒加载

05-01

Vue-cli3 路由懒加载是一种将 Vue 应用的路由分离成小型代码块的技术，以实现更快的加载速度和更好的用户体验。在 Vue-cli3 中，使用路由懒加载需要借助webpack的动态导入技术。在应用中使用路由懒加载，需要将路由组件按需导入，使其成为 webpack 动态导入的一个组成部分。这样在使用路由时，当需要加载某个路由时，浏览器只会加载该路由对应的组件，而不会将整个应用的代码一次性加载。使用Vue-cli3进行路由懒加载，需要对路由组件进行分割处理，在相应的路由配置中加入import，如下所示： const Foo = () => import('./Foo.vue') const Bar = () => import('./Bar.vue') Router({ routes: [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] }) 以上代码中的import函数用于实现路由组件的懒加载，只有当该路由被匹配时才会加载相应的组件。这种动态加载的方式大大减少了应用的首次加载时间，提高了应用的性能和用户体验。总之，Vue-cli3 路由懒加载有利于提高应用的性能和用户体验。只有在需要时才会加载相应的代码，而不是提前一次性加载整个应用。使用 import 函数以动态导入方式，实现路由组件的懒加载，进一步优化 Vue 应用的性能。