學(xué)習(xí)Vue的時(shí)候，各類(lèi)教程都會(huì)告訴我們：Vue 的特點(diǎn)是SPA——Single Page Application（單頁(yè)應(yīng)用程序）。
它有著諸如：“只有第一次會(huì)加載頁(yè)面, 以后的每次頁(yè)面切換，只需要進(jìn)行組件替換；減少了請(qǐng)求體積，加快頁(yè)面響應(yīng)速度，降低了對(duì)服務(wù)器的壓力” 等等優(yōu)點(diǎn)。
但是呢！因?yàn)閂ue 是SPA，所以首頁(yè)第一次加載時(shí)會(huì)把所有的組件以及組件相關(guān)的資源全都加載了。
這樣就會(huì)導(dǎo)致首頁(yè)加載時(shí)加載了許多首頁(yè)用不上的資源，造成網(wǎng)站首頁(yè)打開(kāi)速度變慢的問(wèn)題，降低用戶(hù)體驗(yàn)。
為了解決上面問(wèn)題，我們需要對(duì)Vue實(shí)現(xiàn)組件懶加載（按需加載）。

而vue中的路由懶加載其實(shí)是利用了webpack的異步加載的方法。

我們都知道webpack會(huì)整合所有的資源，將其打入一個(gè)包內(nèi)。但是要實(shí)現(xiàn)懶加載，我們肯定不能讓子組件被整合進(jìn)一個(gè)包里頭。所以需要解決的問(wèn)題就是如何將子組件單獨(dú)打包成一個(gè)文件，在我們需要用到他的時(shí)候去加載。

首先解決第一個(gè)問(wèn)題，如何將子組件打包成一個(gè)單獨(dú)的文件。

在webpack中提供了一個(gè)import方法給我們，注意是方法，而不是我們經(jīng)常使用的那個(gè)import。

正常的引入文件我們會(huì)這樣做

import {sum} from './js/count'  //同步加載

而這樣的寫(xiě)法就是大家所說(shuō)的同步引入，他是會(huì)被打進(jìn)一個(gè)文件內(nèi)的。
使用import方法，就可以做到異步引入，從而使被引入的文件單獨(dú)被打包

import(/* webpackChunkName: "count" */  './js/count')

這樣就會(huì)使這個(gè)count.js被單獨(dú)打包成一個(gè)文件了

image.png

被單獨(dú)打包的文件默認(rèn)會(huì)使用文件的路徑作為文件名。

/* webpackChunkName: "count" */這一行注釋就是為了修改打包出來(lái)的文件名的 count就是文件名。
在webpack配置中我們還需要這樣寫(xiě)

    output: {
        //所有文件的輸出路徑
        //__dirname: nodejs的變量，代表當(dāng)前文件的文件夾目錄
        path: path.resolve(__dirname, "dist"),//絕對(duì)路徑
        //文件名
        filename: "bundle.js",
        //代碼塊的文件名
        chunkFilename:"[name].chunk.js",  這里的name就是上面的webpackChunkName
        clean:true //自動(dòng)刪除上次打包的結(jié)果
    },

這樣我們就實(shí)現(xiàn)了一個(gè)將文件單獨(dú)打包的功能。

當(dāng)然離懶加載還差一點(diǎn)。
雖然上文中我們做到了異步加載，并且也將文件單獨(dú)打包了，但是如果單純這樣做的話資源還是會(huì)被一起加載。細(xì)心的同學(xué)可能已經(jīng)發(fā)現(xiàn)了，在vue中我們通常會(huì)給需要懶加載的路由這樣寫(xiě)

() => import(/* webpackChunkName: "con" */ './xxx.vue')

沒(méi)錯(cuò)，這里就是利用了函數(shù)只有被調(diào)用才會(huì)執(zhí)行的特性。將組件的component屬性賦值一個(gè)函數(shù)，在函數(shù)中去異步引入組件。這樣才是一個(gè)完整的路由懶加載方案。

了解了這個(gè)之后其實(shí)就可以利用懶加載去對(duì)項(xiàng)目做很多優(yōu)化了。