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