vue的route懶加載

為什么用懶加載

? 像vue這種單頁面應用，如果沒有應用懶加載，運用webpack打包后的文件將會異常的大，造成進入首頁時，用戶會將這個打包后的js代碼加載進來，需要加載的內容過多，時間過長，會出啊先長時間的白屏，即使做了loading也是不利于用戶體驗。

? 而運用懶加載則可以將頁面進行劃分，需要的時候加載頁面，可以有效的分擔首頁所承擔的加載壓力，減少首頁加載用時。使得頁面變得流暢，讓用戶體驗增加。

1.沒有route懶加載

當我們使用webpack打包，webpack會將我們寫的項目中的js代碼打包成下面類似的三個文件：

• dist\js\chunk-vendors.xxx.js
• dist\js\app.xxx.js
• dist\js\about.xxx.js

其中app開頭的js文件是我們編寫的業務邏輯代碼。

有vendors字段的js文件是第三方提供商的代碼庫（第三方庫）。

剩下的文件就是做底層代碼支撐的js文件。有時候這個文件會叫做manifest.xxx.js或者about.xxx.js

導致結果

這樣打包的js文件會很大，當我們的客戶去加載這些首頁時，造成進入首頁時，需要加載的內容過多，時間過長，會出啊先長時間的白屏，即使做了loading也是不利于用戶體驗。要加載整個js文件就要浪費很多時間了，打開首頁這么慢用戶當然不滿意的啦！！！

如何解決呢？

說到如何解決，其實是很簡單的事情，我們只需要把我們的業務邏輯代碼分成很多塊，當用戶查看哪個組件，那么就加載下載哪個對應組件的js業務邏輯代碼，這樣做進入首頁不用一次加載過多資源造成用時過長！！！而且也減輕服務器負載（不用將整個代碼傳送），用戶的體驗也會得到很好的提升（看哪部分，就加載哪部分，速度很快）。

2.使用route懶加載

route懶加載寫法很簡單，打包后的app.xxx.js 文件下的目錄會多出很多個js文件，如：0.xxx.js，1.xxx.js等，這些JS文件就對應vue的組件啦，當用戶查看頁面時，需要這些渲染組件時，將會向服務器請求這些對應組件的代碼。

import VueRouter from 'Vue-router' import Vue from 'vue'//懶加載（懶加載有很多種寫法，這里是最簡單的一種） //不在是直接導入，而是加載時才import const Foo = () => import('./Foo.vue') const Bar = () => import('./Bar.vue') const Baz = () => import('./Baz.vue')Vue.use(VueRouter) const routes = [{ path:'/Foo',component:Foo},{ path:'/Bar',component:Bar},{ path:'/Baz',component:Baz}] const router = new VueRouter({routes}) export default router;

總結

以上是生活随笔為你收集整理的vue的route懒加载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。