為什么需要懶加載？

像vue這種單頁面應(yīng)用，如果沒有應(yīng)用懶加載，運用webpack打包后的文件將會異常的大，造成進入首頁時，需要加載的內(nèi)容過多，時間過長，會出啊先長時間的白屏，即使做了loading也是不利于用戶體驗，而運用懶加載則可以將頁面進行劃分，需要的時候加載頁面，可以有效的分擔首頁所承擔的加載壓力，減少首頁加載用時

未使用懶加載時,全部用 import ... from ...

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@components/HelloWorld';
// import .....
// import ......

Vue.use(Router);
export default new Router({
routes:[
    {path:'./',
    name:'HelloWorld',
    component:HelloWorld
    }
]
})

image.png

如果路由有上百個，那么要一次把上百個頁面import進來，耗時也太長了！

vue-router路由懶加載的實現(xiàn)（解決vue項目首次加載慢）

1、vue異步組件

component : resolve => { reuqire([‘需要加載的路由地址’]) , resolve )

import Vue from 'vue';
import Router from 'vue-router';
const HelloWorld = resolve=>{require(["@/components/HelloWorld"],resolve}
Vue.use(Router);
export default new Router({
routes:[
    {path:'./',
    name:'HelloWorld',
    component:HelloWorld
   // component: (resolve)=>{require(["@/components/HelloWorld"],resolve}
    }
]
})

2、ES6的import()

const 組件名=() => import('組件路徑');

import Vue from 'vue';
import Router from 'vue-router';
const  HelloWorld = ()=>import('@/components/HelloWorld');
Vue.use('Router')
export default new Router({
    routes:[{
    {path:'./',
    name:'HelloWorld',
    component:HelloWorld
    }
    }]
})

3、webpack的require.ensure()

require.ensure可實現(xiàn)按需加載資源，包括js,css等。他會給里面require的文件單獨打包，不會和主文件打包在一起。

第一個參數(shù)是數(shù)組，表明第二個參數(shù)里需要依賴的模塊，這些會提前加載。
第二個是回調(diào)函數(shù),在這個回調(diào)函數(shù)里面require的文件會被單獨打包成一個chunk,不會和主文件打包在一起，這樣就生成了兩個chunk,第一次加載時只加載主文件。
第三個參數(shù)是錯誤回調(diào)。
第四個參數(shù)是單獨打包的chunk的文件名

import Vue from 'vue';
import Router from 'vue-router';
const HelloWorld = resolve=>{
        require.ensure(['@/components/HelloWorld'],()=>{
            resolve(require('@/components/HelloWorld'))
        })
    }
Vue.use('Router')
export default new Router({
    routes:[{
    {path:'./',
    name:'HelloWorld',
    component:HelloWorld
    }
    }]
})

使用懶加載好處 為給客戶更好的客戶體驗 首屏組件加載速度更快一些

通俗得說 ，即在需要的時候的時候進行加載。

附：解決vue 首頁加載緩慢、白屏現(xiàn)象

web app 之所以打開慢，主要還是渲染的問題：DNS解析 – 服務(wù)器交互 – 瀏覽器頁面渲染
我們可以通過cdn引入、去除map文件、異步加載、按需引入、壓縮等等方法，這里我就不再闡述了，大家可以自行搜索 Vue項目優(yōu)化

1、路由懶加載

2、ui框架按需加載

3、webpack gzip壓縮

4、巨大的數(shù)組或?qū)ο笫褂肙bject.freeze 來凍結(jié)一個對象

其他改善首屏白屏的方法：
骨架屏，loading