vue的路由懶加載和組件的按需加載

「懶加載也叫延遲加載，即在須要的時候進行加載，隨用隨載。在單頁應用中，若是沒有應用懶加載，運用webpack打包後的文件將會異常的大，形成進入首頁時，須要加載的內容過多，延時過長，不利於用戶體驗，而運用懶加載則能夠將頁面進行劃分，須要的時候加載頁面，能夠有效的分擔首頁所承擔的加載壓力，減小首頁加載用時。」

一、vue路由的懶加載

• 按需加載的寫法

require(["src/xx/xxx/xx.vue"], resolve);
            }

• 效果

按需加載會在頁面第一次請求的時候，把相關路由組件塊的js添加上；非按需加載則會把全部的路由組件塊的js包打在一塊兒。當業務包很大的時候建議用路由的按需加載（懶加載）。

二、vue組件的異步加載和同步加載

• 組件的寫法

// aview: function(resolve) {
       //     require(["./a.vue"], resolve);
       // },
       // bview: function(resolve) {
       //     require(["./b.vue"], resolve);
       // }
       aview:require("./a.vue"),
       bview:require("./b.vue"),

• 效果
  異步組件頁面渲染的時候會跳動；可是同步書寫不會

三、vue組件的按需加載（2種方式）

一、動態組件方式

• 書寫方式

組件裏面：
 components: {
        aview: function(resolve) {
            require(["./a.vue"], resolve);
        },
        bview: function(resolve) {
            require(["./b.vue"], resolve);
        }
    },
 模板裏面：
<component :is="current" :data="myData" ></component>
 data: function() {
        return {
            current: "",
            myData:"",
            show:false
        }
    },
    methods: {
        changeComponents:function(view)
        {
            if(view=='aview')
            {
                this.myData='a1000';
            }
            else
            {
                this.myData='b1000';
            }
            this.current=view;
        }
    }

*效果（會觸發組件的生命週期）

二、v-if方式(強制建立和結束生命週期)

• 書寫方式

模板：
<aview v-if="show"></aview>
組件：
components: {
        aview:require("./a.vue")
    },

• 效果

詳細的路由懶加載

更需資料github