正常引入方式:

// 导入Vue
import Vue from 'vue'
// 导入路由
import Router from 'vue-router'
// 导入登录组件
import Login from '@/components/login/Login'
// 导入Home组件
import Home from '@/components/home/Home'
// 安装路由插件
Vue.use(Router)
// 创建路由对象,配置路由规则
const router = new Router({
routers: [
{
path: '/login',
component: Login
},
{
path: '/home',
component: Home
},
]
})

1 vue异步组件技术

在大型应用中,我们可能需要将应用分割成小一些的代码块,并且只在需要的时候才从服务器加载一个模块。为了简化,Vue 允许你以一个工厂函数的方式定义你的组件,这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数,且会把结果缓存起来供未来重渲染

相关代码:

const router = new Router({
routers: [
{
path: '/login',
component: (resolve) => { require(['@/components/login/Login'], resolve)}
},
{
path: '/home',
component: (resolve) => { require(['@/components/home/Home'], resolve)}
}
]
})

2 路由懒加载(官方:把组件按组分块)

每个 () => import() 都会生成一个独立的JS文件
也就是说:只要使用这个语法,就是告诉 webpack 这就是一个代码分割点,这样生成一个独立的js文件,来实现按需加载的功能

相关代码:

// 无需import导入组件
const Login = () => import(/* webpackChunkName: 'login' */ '@/components/login/Login')
const Home = () => import(/* webpackChunkName: 'home' */ '@/components/home/Home')
// 创建路由对象,配置路由规则
const router = new Router({
routers: [
{
path: '/login',
component: Login
},
{
path: '/home',
component: Home
},
]
})

说明:webpackChunkName 相同,那么,这两个组件会被打包生产一个JS文件

const Goods = () => import(/* webpackChunkName: 'goods' */'@/components/goods')
const GoodsAdd = () => import(/* webpackChunkName: 'goods' */'@/components/goods-add')

3 webpack提供的require.ensure()

require.ensure()的语法:

require.ensure(dependencies:String [],callback:function(require),errorCallback:function(error),chunkName:String)

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')
},
]
})