vue路由懒加载

1.开发环境 vue
2.电脑系统 windows10专业版
3.为什么需要使用懒加载?

在开发的过程中随着项目的业务越来越多,需求越来越多,体积越来越来,像vue这种单页面应用,如果没有使用懒加载,运行打包之后的文件会很大,进入首页时,需要加载内容很多,时间过长,可能会出现短暂白屏的情况,即使做了loading也不利于用户体验,而运用懒加载可以将页面进行划分,需要的时候再加载页面。下面我来分享三种懒加载的使用方法。

4.方法一:vue异步组件技术(异步加载)

vue-royer配置路由,使用vue的异步组件技术,可以实现按需加载,但是这种情况下,一个组件生成一个js文件

{
    path: '/my',
    name: 'my',
    component: resolve => require(['../views/my.vue'], resolve)
  }

5.方法二:组件懒加载(使用import)

const 组件名=()=>import('组件路径');

//没有指定 webpackChunkName,每个组件打包成一个js文件
const Home=()=>import('../views/home.vue')

//指定了相同的webpackChunkName,会合并打包成一个js文件

//按组件划分
const Home=()=>import(/* webpackChunkName: "home" */ '../views/home.vue')

const About=()=>import(/* webpackChunkName: "home" */ '../views/home.vue')

const My=()=>import(/* webpackChunkName: "home" */ '../views/home.vue')

{ path: '/about', component: About }, { path: '/my', component: My }, { path: '/home', component: Home }

6.方法三:webpack提供的require.ensure()

vue-router配置路由,使用webpack的require.ensure技术,也可以实现按需加载。这种情况下,多个路由指定相同的chunkName,会合并打包成一个js文件

{ path: '/home', name: 'home', component: r => require.ensure([], () => r(require('../views/home.vue')), 'home') },

{ path: '/index', name: 'Index', component: r => require.ensure([], () => r(require('../views/index.vue')), 'home') },

{ path: '/about', name: 'about', component: r => require.ensure([], () => r(require('@/views/about.vue')), 'about') }

// r就是resolve
const list = r => require.ensure([], () => r(require('../views/list.vue')), 'list');

//这种是官方推荐的写的 按模块划分懒加载 

7.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。