1. 路由异步加载
常规路由写法:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//常规引入组件TestA
import TestA from '@/components/TestA'
import TestB from '@/components/TestB'
Vue.use(Router)
export default new Router({
routes:[
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},{
path: '/a',
name: 'TestA',
component: TestA
},{
path: '/b',
name: 'TestB',
component: TestB
}
]
})
优化异步加载路由写法:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 懒加载引入组件,减小首页js文件的大小
const TestA = () => import(/* webpackChunkName:"TestA" */'@/components/TestA')
const TestB = () => import(/* webpackChunkName:"TestB" */'@/components/TestB')
Vue.use(Router)
export default new Router({
routes:[
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},{
path: '/a',
name: 'TestA',
component: TestA
},{
path: '/b',
name: 'TestB',
component: TestB
}
]
})
2. 组件异步加载
常规引入组件:
<template>
<div id="app">
<Comp-a></Comp-a>
</div>
</template>
<script type="text/javascript">
import CompA from '@/components/CompA'
export default {
name: 'app',
components : {
CompA
}
}
</script>
优化后写法(打包后文件个数比常规方法多一个js文件):
<template>
<div id="app">
<Comp-a></Comp-a>
</div>
</template>
<script type="text/javascript">
export default {
name: 'app',
components : {
// 方法一:
// CompA: function(resolve){
// require(['@/components/CompA'],resolve)
// }
// 方法二:
CompA: () => import(/* webpackChunkName:"TestA" */'@/components/TestA')
}
}
</script>