Routing lazy loading: The
use of lazy loading can divide the page and load the page when needed, which can effectively share the loading pressure of the home page and reduce the loading time of the home page
For single-page applications like vue, if there is no lazy loading of the application, the files packaged with webpack will be abnormally large, causing too much content to be loaded when entering the homepage, and the time is too long, and a long white screen will appear. Even loading is not conducive to user experience
method:
- Vue asynchronous components
- import() of es proposal
- webpack's require.ensure()
1. ES6 writing
grammar:const 组件名=() => import('组件路径');
const Home = () => import('@/components/home')
const Index = () => import('@/components/index')
const About = () => import('@/components/about')
const router = new Router({
routes: [
{
path: '/home', component: Home},
{
path: '/index', component: Index},
{
path: '/about', component: About}
]
})
2. Vue asynchronous components (AMD wording)
const router = new Router({
routes: [
{
path: '/',
redirect: '/login'
},
{
path: '/',
component: resolve => require(['../components/common/Home.vue'], resolve),
meta: {
title: '自述文件' },
children:[
{
path: '/dashboard',
component: resolve => require(['../components/page/dashboard.vue'], resolve),
meta: {
title: '系统首页' }
},
{
path: '/cate',
component: resolve => require(['../components/page/cate.vue'], resolve),
meta: {
title: '分类管理' }
},
{
path: '/article',
component: resolve => require(['../components/page/article.vue'], resolve),
meta: {
title: '文章管理' }
},
{
path: '/info',
component: resolve => require(['../components/page/info.vue'], resolve),
meta: {
title: '博客信息管理' }
},
{
path: '/admin',
component: resolve => require(['../components/page/admin.vue'], resolve),
meta: {
title: '管理员管理' }
},
]
},
{
path: '/login',
component: resolve => require(['../components/page/login.vue'], resolve)
},
{
path: '*',
redirect: '/404'
}
]
})
3. require.ensure() provided by webpack
const router = new Router({
routers: [
{
path: '/login',
component: r => require.ensure([], () => r(require('@/components/login/Login')), 'login')
},
{
path: '/home',
component: r => require.ensure([], () => r(require('@/components/home/Home')), 'home')
},
]
})