Vue代码优化

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>