摘要:懶加載也叫延遲加載,即在需要的時候進行加載,隨用隨載。路由的懶加載按需加載的寫法效果按需加載會在頁面第一次請求的時候,把相關路由組件塊的添加上非按需加載則會把所有的路由組件塊的包打在一起。當業務包很大的時候建議用路由的按需加載懶加載。
“懶加載也叫延遲加載,即在需要的時候進行加載,隨用隨載。在單頁應用中,如果沒有應用懶加載,運用webpack打包后的文件將會異常的大,造成進入首頁時,需要加載的內容過多,延時過長,不利于用戶體驗,而運用懶加載則可以將頁面進行劃分,需要的時候加載頁面,可以有效的分擔首頁所承擔的加載壓力,減少首頁加載用時?!?/p> 1、vue路由的懶加載
按需加載的寫法
require(["src/xx/xxx/xx.vue"], resolve); }
效果
按需加載會在頁面第一次請求的時候,把相關路由組件塊的js添加上;非按需加載則會把所有的路由組件塊的js包打在一起。當業務包很大的時候建議用路由的按需加載(懶加載)。
2、vue組件的異步加載和同步加載組件的寫法
// aview: function(resolve) { // require(["./a.vue"], resolve); // }, // bview: function(resolve) { // require(["./b.vue"], resolve); // } aview:require("./a.vue"), bview:require("./b.vue"),
效果
異步組件頁面渲染的時候會跳動;但是同步書寫不會
書寫方式
組件里面: components: { aview: function(resolve) { require(["./a.vue"], resolve); }, bview: function(resolve) { require(["./b.vue"], resolve); } }, 模板里面:data: function() { return { current: "", myData:"", show:false } }, methods: { changeComponents:function(view) { if(view=="aview") { this.myData="a1000"; } else { this.myData="b1000"; } this.current=view; } }
*效果(會觸發組件的生命周期)
2、v-if方式(強制創建和結束生命周期)書寫方式
模板:組件: components: { aview:require("./a.vue") },
效果
詳細的路由懶加載
更需資料github
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/88806.html
摘要:但是實際上,回款管理和開票管理的組件文件也是加載了。所以下面引用按需加載來處理。是不是小很多了,然后和是按需加載的,就是需要的時候才加載。 1.前言 上篇文章(webpack+vue項目實戰(二,開發管理系統主頁面)),實現了,側邊欄的一個操作,點擊側邊欄的一些操作,最重要的就是路由的切換??戳松弦黄幕锇橐膊浑y發現,除了點擊側邊欄‘首頁’之外,點擊其它的都是白色的一片。原因我想大家都...
摘要:最近在研究的按需加載,好奇怪,之前好像并沒有看到的官文里面有這一部分,是我看差了嗎尬笑其實只需要看官文就可以了,里面有懶加載的講解,并且附帶了詳細內容的連接。所以很大程度上優化了頁面的初始加載速度。只是為了測試按需加載隨便寫的而已。 最近在研究vue的按需加載,好奇怪,之前好像并沒有看到vue的官文里面有這一部分,是我看差了嗎hahaha~尬笑~ 其實只需要看vue-router官文就...
摘要:開發完了,并部署到服務器后,就遇到了一個非常明顯的問題。所以可以利用按需加載來進一步縮小文件的體積。另外圖片還可以去下面這個網上壓縮一下經過上述的幾步,首頁的加載速度已經比較快了,項目經理也比較滿意。初步結束了首頁加載慢的問題的研究。 本次開發的項目中使用了vue2.5.2和自帶的vue-cli生成了前端的基本架構。隨后在項目開發當中,添加了自己寫的UI組件,和復雜的業務邏輯。整個項目...
摘要:當一個的項目體積變得十分龐大的時候,使用的代碼分離功能將,或的代碼進行分離并按需加載,會極大的提高的首屏加載速度。如果我們使用函數在中返回模塊作為載荷,就實現了懶加載。 當一個Vue的項目體積變得十分龐大的時候,使用Webpack的代碼分離功能將Vue Components,routes或Vuex的代碼進行分離并按需加載,會極大的提高App的首屏加載速度。 showImg(https:...
閱讀 1295·2021-11-23 09:51
閱讀 3399·2021-09-06 15:00
閱讀 987·2021-08-16 10:57
閱讀 1370·2019-08-30 12:46
閱讀 933·2019-08-29 12:22
閱讀 1602·2019-08-29 11:07
閱讀 3146·2019-08-26 11:23
閱讀 2979·2019-08-23 15:14