vue路由加懒加载的方式

女爷i 2021-12-07 09:55 308阅读 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 条评论，308人围观）

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

相关阅读

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

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

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

相关 vue 路由懒加载

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

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

相关 Vue之路由懒加载

路由懒加载：把不同路由对应的组件分割称成不同的代码块，然后当路由被访问的时候才加载对应组件 Vue中实现路由懒加载的方法：结合Vue的异步组件和webpack的代码分割功能，

红太狼/ 2022年05月19日 07:06/ 0 赞/ 250 阅读

相关 vue webpack 路由懒加载

安装：https://www.npmjs.com/package/babel-plugin-syntax-dynamic-import 配置： ![70][] 路由文件：

浅浅的花香味﹌/ 2022年05月15日 05:37/ 0 赞/ 287 阅读

相关 Vue中路由懒加载

某个路由被展示的时候，才会加载该路由的资源，而不是一下子把所有需要的资源都通过网络加载出来写法：在router.js中引入路由的时候 ![watermark_type_Z

男娘i/ 2022年02月28日 03:48/ 0 赞/ 329 阅读

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

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

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

相关 Vue路由懒加载

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

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

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

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

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

相关 Vue路由懒加载

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

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

相关 Vue Router路由懒加载

官方写的很明白!!!!!!!!! 路由懒加载当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块

末蓝、/ 2021年09月18日 09:02/ 0 赞/ 458 阅读