vue路由加懒加载的方式

女爷i 2021-12-07 09:55 314阅读 0赞

1、当一个vue项目很大的时候，对于一些“暂时”用不到的组件，我们可以不进行加载，等到用到次组件时再加载。这样可以优化spa应用首次加载白屏情况，也给用户更好的体验。这样就是vue路由懒加载。

2、常用的懒加载方式有两种：即使用 ES中的import  和 vue异步组件

2.1 未使用懒加载

import HelloWorld from '@/components/HelloWorld'
     
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component:HelloWorld
        }
      ]
    })
    2.2  使用ES中的import进行懒加载  (推荐使用，也是最常用的)
    
    const HelloWorld = () => import("@/components/HelloWorld");
    export default new Router({
      routes: [{
        path: '/',
        name: 'HelloWorld',
        component: HelloWorld
      }]
    })

/\*或者\*/

export default new Router({
      routes: [{
        path: '/',
        name: 'HelloWorld',
        component: () => import("@/components/HelloWorld")
      }]
    })
    2.3  使用VUE中的异步组件进行懒加载
    
    export default new Router({
      routes: [{
        path: '/',
        name: 'HelloWorld',
        component: resolve => { require(['@/components/HelloWorld'],resovle); }
      }]
    })

发表评论取消回复

表情：

评论列表（有 0 条评论，314人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue路由懒加载

*一、当打包构建应用时，Javascript包会变得很大，影响页面加载。** **二、懒加载就是将不同路由对应的组件分隔成不同的代码块，然后当路由被访问时，才加载对应...

偏执的太偏执、/ 2024年04月17日 14:31/ 0 赞/ 83 阅读

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

[https://blog.csdn.net/sally18/article/details/96476406][https_blog.csdn.net_sally18_art

骑猪看日落/ 2023年06月10日 03:23/ 0 赞/ 30 阅读

相关 Vue 路由懒加载

路由和组件的常用两种懒加载方式： 1、vue异步组件实现路由懒加载　　component：resolve=>(\['需要加载的路由的地址'，resolve\]) 2、e

浅浅的花香味﹌/ 2023年06月04日 02:40/ 0 赞/ 2 阅读

相关 Vue 路由懒加载和动态加载

什么是路由懒加载？不同组件有不同的 js 文件，当访问相应组件的时候才会加载其相应的js文件，而不是在首页统一加载，这样就优化了首页渲染的时间，提高页面首次渲染时间；

迷南。/ 2022年12月31日 02:29/ 0 赞/ 243 阅读

相关 vue 路由懒加载

vue路由懒加载resolve方式与import方式路由懒加载使用路由懒加载是为了更好的用户体验，首屏组件加载的速度快一点，解决了白屏的问题懒加载就是延迟加

末蓝、/ 2022年11月10日 05:37/ 0 赞/ 191 阅读

相关 vue-router路由懒加载

vue-router路由懒加载：打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候

骑猪看日落/ 2022年05月19日 03:43/ 0 赞/ 234 阅读

相关 vue路由懒加载，vue router 导入方式

一：直接导入 import Hello from '@/components/Hello' @是在webpack.base.conf.js 配置： ![复制代码

一时失言乱红尘/ 2022年01月22日 01:25/ 0 赞/ 387 阅读

相关 Vue路由懒加载

当vue打包过大时可以用路由懒加载来减小包的体积路由懒加载是通过es6的一种写法没有懒加载是这样的 ![watermark_type_ZmFuZ3p

超、凢脫俗/ 2022年01月12日 07:09/ 0 赞/ 493 阅读

相关 vue路由加懒加载的方式

1、当一个vue项目很大的时候，对于一些“暂时”用不到的组件，我们可以不进行加载，等到用到次组件时再加载。这样可以优化spa应用首次加载白屏情况，也给用户更好的体验。这样就是v

女爷i/ 2021年12月07日 09:55/ 0 赞/ 315 阅读

相关 Vue路由懒加载

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

谁践踏了优雅/ 2021年09月29日 02:26/ 0 赞/ 450 阅读