vue?組件異步加載方式(按需加載)
更新時間：2022年04月11日 14:41:10 作者：朽木·露琪亞
這篇文章主要介紹了vue?組件異步加載方式(按需加載)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
組件異步加載(按需加載)
有時候打包出來的js文件過大，嚴(yán)重影響訪問速度，這個時候我們就不得不考慮相關(guān)方法來提速，畢竟這可是會影響瀏覽量的。
如果只是針對這個問題的話，我們可以考慮以下兩方面：
- nignx開啟gzip、緩存。
- 文件再次拆分-異步加載
下面就主要說以下vue組件異步加載的方法：（測試所用的webpack：^4.12.0）
1.使用() => import()
代碼：
打包：
界面效果：
2.使用resolve => require([’./_account’], resolve)
代碼：
3. 使用Webpack 的內(nèi)置語句：import(*)
代碼：在tabs的change事件中按需加載
4. require.ensure：
require.ensure(['./tab0.vue'], () => { resolve(require('./tab0.vue')) }, ‘tab0')怎么實現(xiàn)組件異步加載
1.什么是異步組件
即只在組件需要渲染的時候進(jìn)行加載渲染并緩存。
2.為什么需要異步加載組件
當(dāng)項目功能越來越多，所包含的子組件也越來越多，導(dǎo)致頁面加載，訪問速度過慢，所以需要優(yōu)化頁面加載的性能。
3.異步加載組件方法
(1) 可以使用懶加載，即 () => import ( 地址)
關(guān)于路由懶加載：VUE：實現(xiàn)路由懶加載
(2) 使用require
代碼演示:
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 解決vue動態(tài)路由異步加載import組件,加載不到module的問題
- 詳解vue-router的Import異步加載模塊問題的解決方案
- vue+echarts實現(xiàn)動態(tài)繪制圖表及異步加載數(shù)據(jù)的方法
- vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問題
- vue異步加載高德地圖的實現(xiàn)
- vue+webpack實現(xiàn)異步加載三種用法示例詳解
- 詳解Vue-Cli 異步加載數(shù)據(jù)的一些注意點
- Javascript vue.js表格分頁，ajax異步加載數(shù)據(jù)
- Vue 處理異步加載順序問題之如何在Konva中確保文本在圖片之上顯示
相關(guān)文章
這篇文章主要介紹了Vue+Django項目部署詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue會盡可能高效地渲染元素,通常會復(fù)用已有元素而不是從頭開始渲染。這么做會使Vue變得非常快,下面這篇文章主要給大家介紹了Vue基礎(chǔ)教程之條件渲染和列表渲染的相關(guān)資料,需要的朋友可以參考下2021-11-11
解決vue項目中出現(xiàn)Invalid Host header的問題
這篇文章主要介紹了解決vue項目中出現(xiàn)"Invalid Host header"的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue el-checkbox實現(xiàn)全選單選方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
本篇文章主要介紹了基于vue.js 2.x的虛擬滾動條的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要為大家分享了Map.vue基于百度地圖組件重構(gòu)筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
el-input限制輸入正整數(shù)的兩種實現(xiàn)方式
el-input框是Element UI庫中的一個輸入框組件，用于接收用戶的輸入，這篇文章主要介紹了el-input限制輸入正整數(shù),需要的朋友可以參考下2024-02-02
Vue中的v-model，v-bind，v-on的區(qū)別解析
vue.js是一套構(gòu)建用戶界面的框架，只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合，vue.js有配套的第三方類庫，可以整合起來做大型項目的開發(fā)，這篇文章主要介紹了v-model，v-bind，v-on的區(qū)別,需要的朋友可以參考下2022-12-12
VUE3.2項目使用Echarts5.4詳細(xì)步驟總結(jié)
Vue3.2是一款非常流行的JavaScript框架,它讓在前端領(lǐng)域開發(fā)變得更加的便捷,下面這篇文章主要給大家介紹了關(guān)于VUE3.2項目使用Echarts5.4的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
vue動態(tài)路由實現(xiàn)多級嵌套面包屑的思路與方法
在實際項目中我們會碰到多層嵌套的組件組合而成，比如我們常見的面包屑導(dǎo)航，下面這篇文章就來給大家介紹關(guān)于vue實現(xiàn)動態(tài)路由多級嵌套面包屑的思路與方法，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08