延遲加載

在Vue項(xiàng)目中，所有以import方式導(dǎo)入的組件的html+css+js等都會(huì)編譯到app.js文件中所以這個(gè)文件會(huì)很大，但是這個(gè)文件必然在首屏加載的時(shí)候下載。 這就導(dǎo)致了首屏加載慢。這時(shí)候可以使用延遲加載解決問題，其中延遲加載又分為異步延遲加載和徹底延遲加載。

異步延遲加載

//第一步注釋import導(dǎo)入的文件
//import  About from '../components/About.vue';
//第二步將引入組件的方式以箭頭函數(shù)的方式異步引入
const routes = [
   {
     path: '/about'，
     component: () => import( /* webpackChunkName: 'about' */ '../components/About.vue' )
   }
]
注意：import中  /* webpackChunkName: 'about' */ 這個(gè)注釋必須有，這個(gè)為將來打包命名

結(jié)果：最后打包工具打包不會(huì)將 About.vue組件中的內(nèi)容打包進(jìn)app.js中，
它會(huì)單獨(dú)打包成一個(gè)新的about.js文件，并在頁面加載完成后異步加載，從而達(dá)到懶加載效果
缺點(diǎn)就是，如果客戶不想看About頁面，但是還是會(huì)下載數(shù)據(jù)，導(dǎo)致----偷跑流量

徹底懶加載

第一步： 這種方式基于異步延遲加載方式上，也就是先實(shí)現(xiàn)異步延遲加載后
 第二步： 跟目錄創(chuàng)建文件： vue.config.js    
 第三步： 文件添加以下代碼：
 module.exports={
     chainWebpack:config=>{
        config.plugins.delete("prefetch") //取消預(yù)加載
    }
}

異步懶加載適用于PC端；徹底懶加載是基于異步懶加載完成的，適用于移動(dòng)端