vue異步組件(高級異步組件)使用場景及實踐

背景介紹：
隨着項目愈來愈大，性能問題已經成爲了困擾業務發展的重要因素。
功能不停地累加後，核心頁面已經不堪重負，訪問速度越來越慢。
業務發展、用戶體驗都很是迫切的須要釋放頁面的負載，提升頁面加載速度。

一直在尋找一個優雅的實現前端模塊化、並能按權重的優先級順序異步加載的實現方案。忽然瞭解到vue的異步組件，因而便專門研究實踐了一下。

---

首先看一下官網對異步組件的介紹：

嗯，比較簡單的介紹，不過這個特性確實是我眼前一亮，接下來就上代碼，看看效果如何：
webpack簡單設置以及工程結構

簡單的webpack+vue配置

var webpack = require('webpack');
module.exports = {
watch: true,    //監聽變化自動編譯
entry: {
    'index': './src/index.js',
},
output: {
    path: './dist/',
    filename: '[name].min.js',
    publicPath:'./dist/'
},
module: {
    loaders: [
        {
            test: /\.vue$/, //解析vue模板
            loader: "vue-loader"
        },
        {
            test: /\.js$/, //js轉換
            exclude: /(node_modules)/,
            loader: "babel-loader",
            query: {
                presets: ['es2015']
            }
        },
        {
            test: /\.css$/, //css轉換
            loader: 'vue-style!css'
        }
    ]
},
vue: {
    loaders: {
        css: 'vue-style!css',
    }
}
};

入口js文件：

import Vue from 'vue';
import Frame from './index.vue';
let app = new Vue({
    el: '#app',
    render: h => h(Frame),
});

框架文件：

<template>
<div>
    異步組件測試
    點擊按鈕後
    第一個延遲300毫秒，從服務器加載
    第二個不延遲從服務器加載
    <template v-if="show">
        <later></later>
        <later2></later2>
    </template>
    <button @click="toggle">加載</button>
</div>
</template>
<script>
import Vue from 'vue';
const later = Vue.component('later', function (resolve) {
    setTimeout(function () {
        require(['./later.vue'], resolve)
    }, 3000);
});
const later2 = Vue.component('later2', function (resolve) {
    require(['./later2.vue'], resolve)
});
export default{
    data: function () {
        return {
            show: false
        };
    },
    components: {
        later,
        later2,
    },
    created: function () {

    },
    mounted: function () {
    },
    computed: {},
    methods: {
        toggle:function () {
            this.show = !this.show;
        }
    },
}
</script>
<style>
</style>

服務器異步組件1：

<template>
<div>
    load me later 11111
</div>
</template>
<script>
export default{
    data: function () {
        return {};
    },
    components: {},
    created: function () {
    },
    mounted: function () {
    },
    computed: {},
    methods: {},
}
</script>
<style>
</style>

服務器異步組件2：

<template>
<div>
    load me later 22222
</div>
</template>
<script>
export default{
    data: function () {
        return {};
    },
    components: {},
    created: function () {
    },
    mounted: function () {
    },
    computed: {},
    methods: {},
}
</script>
<style>
</style>

---

好，咱們跑起來看看效果！！！

一、刷新頁面，加載框架

二、點擊加載，此時異步組件2，馬上從服務器加載下來，渲染出來

三、點擊加載後，3000毫秒，此時異步組件1被觸發從服務器加載，渲染

利用此特性，咱們便能作不少針對前端的優化。
好比：將頁面核心功能（音、視頻播放、文章、商品等等）打包成一個核心模塊，經過框架優先加載。
其餘的一些周邊功能打包後，經過服務器異步加載，從而解決業務需求愈來愈多致使的系統難維護、訪問慢問題。

---

此時，聰明的小夥伴們確定在想了，既然是異步加載，就會存在加載過程（正在加載中）、以及加載失敗等異常狀況。
這時候怎麼辦呢，一個個狀態去維護嗎？No！

咱們看看官網另外一個特性：

相信通過上面的使用教程之後，高級異步組件你們一眼就能看懂並會使用，是否是很完美!!!

再稍做研究，就準備將它用到實際生產啦。