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.本期的分享到了这里就结束啦,但愿对你有所帮助,让咱们一块儿努力走向巅峰。