懶載入：也叫延遲載入，即在需要的時候進行載入，隨用隨載

在單頁應用中，如果沒有應用懶載入，運用webpack打包後的檔案將會異常的大，造成進入首頁時，需要載入的內容過多，延時過長，不利於使用者體驗，而運用懶載入則可以將頁面進行劃分，需要的時候載入頁面，可以有效的分擔首頁所承擔的載入壓力，減少首頁載入用時。

一、與webpack配合實現元件懶載入

1、在webpack配置檔案中的output路徑配置chunkFilename屬性

    output: {
        path: resolve(__dirname, 'dist'),
        filename: options.dev ? '[name].js' : '[name].js?[chunkhash]',
        chunkFilename: 'chunk[id].js?[chunkhash]',
        publicPath: options.dev ? '/assets/' : publicPath

    }

2、配合webpack支援的非同步載入方法

     resolve => require([URL], resolve), 支援性好

     () => system.import(URL) , webpack2官網上已經宣告將逐漸廢除, 不推薦使用
    

     () => import(URL), webpack2官網推薦使用, 屬於es7範疇, 需要配合babel的syntax-dynamic-import外掛使用, 具體使用方法如下：（使用vue-cli腳手架忽略安裝）

    npm install --save-dev babel-core babel-loader babel-plugin-syntax-dynamic-import babel-preset-es2015
      
      use: [{
          loader: 'babel-loader',
          options: {
            presets: [['es2015', {modules: false}]],
            plugins: ['syntax-dynamic-import']
          }

        }]

二、具體例項中實現懶載入

1、路由中配置非同步元件

export default new Router({
    routes: [
        {
            mode: 'history',
            path: '/my',
            name: 'my',
            component:  resolve => require(['../page/my/my.vue'], resolve),//懶載入
},
    ]
})

2、例項中配置非同步元件

components: {
    historyTab: resolve => {require(['../../component/historyTab/historyTab.vue'], resolve)},//懶載入
 
//historyTab: () => import('../../component/historyTab/historyTab.vue')
}

3、全域性註冊非同步元件

Vue.component('mideaHeader', () => {
    System.import('./component/header/header.vue')
})

三、配置非同步元件實現懶載入的問題分析

1、多次進出同一個非同步載入頁面是否會造成多次載入元件？

首次需要用到元件時瀏覽器會發送請求載入元件，載入完將會快取起來，以供之後再次用到該元件時呼叫

2、在多個地方使用同一個非同步元件時是否造成多次載入元件？ 如：

//a頁面
export default {
    components: {
        historyTab: resolve => {require(['../../component/historyTab/historyTab.vue'], resolve)},//懶載入
},
}
 
//b頁面
export default {
    components: {
        historyTab: resolve => {require(['../../component/historyTab/historyTab.vue'], resolve)},//懶載入
},
}

答案：否

3、如果在兩個非同步載入的頁面中分別同步與非同步載入同一個元件時是否會造成資源重用？ 如：

//a頁面
import historyTab from '../../component/historyTab/historyTab.vue';
export default {
    components: {
        historyTab
    },
}

//b頁面
export default {
    components: {
        historyTab: resolve => {require(['../../component/historyTab/historyTab.vue'], resolve)},//懶載入
},
}

 解決方案： 元件開發時， 如果根頁面沒有匯入元件的情況下，而是在其他非同步載入頁面中同時用到元件， 那麼為實現資源的最大利用，在協同開發的時候全部人都使用非同步載入元件

4、在非同步載入頁面中載嵌入非同步載入的元件時對頁面是否會有渲染延時影響？

 答：會， 非同步載入的元件將會比頁面中其他元素滯後出現， 頁面會有瞬間閃跳影響；

解決方案：因為在首次載入元件的時候會有載入時間， 出現頁面滯後， 所以需要合理的進行頁面結構設計， 避免首次出現跳閃現象；

四、 懶載入的最終實現方案

1、路由頁面以及路由頁面中的元件全都使用懶載入

 優點：（1）最大化的實現隨用隨載

            （2）團隊開發不會因為溝通問題造成資源的重複浪費

 缺點：（1）當一個頁面中巢狀多個元件時將傳送多次的http請求，可能會造成網頁顯示過慢且渲染參差不齊的問題

2、路由頁面使用懶載入， 而路由頁面中的元件按需進行懶載入, 即如果元件不大且使用不太頻繁, 直接在路由頁面中匯入元件, 如果元件使用較為頻繁使用懶載入

優點：（1）能夠減少頁面中的http請求，頁面顯示效果好

缺點：（2）需要團隊事先交流， 在框架中分別建立懶載入元件與非懶載入元件資料夾

3、路由頁面使用懶載入，在不特別影響首頁顯示延遲的情況下，根頁面合理匯入複用元件，再結合方案2

優點：（1）合理解決首頁延遲顯示問題

          （2）能夠最大化的減少http請求， 且做其他他路由介面的顯示效果最佳

缺點：（1）還是需要團隊交流，建立合理區分各種載入方式的元件資料夾