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>