vue?組件異步加載方式(按需加載)

更新時(shí)間：2022年04月11日 14:41:10 作者：朽木·露琪亞

這篇文章主要介紹了vue?組件異步加載方式(按需加載)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

組件異步加載(按需加載)

有時(shí)候打包出來(lái)的js文件過(guò)大，嚴(yán)重影響訪問(wèn)速度，這個(gè)時(shí)候我們就不得不考慮相關(guān)方法來(lái)提速，畢竟這可是會(huì)影響瀏覽量的。

如果只是針對(duì)這個(gè)問(wèn)題的話，我們可以考慮以下兩方面：

nignx開(kāi)啟gzip、緩存。
文件再次拆分-異步加載

下面就主要說(shuō)以下vue組件異步加載的方法：（測(cè)試所用的webpack：^4.12.0）

1.使用() => import()

代碼：

在這里插入圖片描述

打包：

在這里插入圖片描述

界面效果：

在這里插入圖片描述

2.使用resolve => require([’./_account’], resolve)

代碼：

在這里插入圖片描述

3. 使用Webpack 的內(nèi)置語(yǔ)句：import(*)

代碼：在tabs的change事件中按需加載

在這里插入圖片描述

4. require.ensure：

require.ensure(['./tab0.vue'], () => { resolve(require('./tab0.vue')) }, ‘tab0')

怎么實(shí)現(xiàn)組件異步加載

1.什么是異步組件

即只在組件需要渲染的時(shí)候進(jìn)行加載渲染并緩存。

2.為什么需要異步加載組件

當(dāng)項(xiàng)目功能越來(lái)越多，所包含的子組件也越來(lái)越多，導(dǎo)致頁(yè)面加載，訪問(wèn)速度過(guò)慢，所以需要優(yōu)化頁(yè)面加載的性能。

3.異步加載組件方法

(1) 可以使用懶加載，即 () => import ( 地址)

關(guān)于路由懶加載：VUE：實(shí)現(xiàn)路由懶加載

(2) 使用require

代碼演示:

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue+Django項(xiàng)目部署詳解
這篇文章主要介紹了Vue+Django項(xiàng)目部署詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
Vue基礎(chǔ)教程之條件渲染和列表渲染
Vue會(huì)盡可能高效地渲染元素,通常會(huì)復(fù)用已有元素而不是從頭開(kāi)始渲染。這么做會(huì)使Vue變得非?？?下面這篇文章主要給大家介紹了Vue基礎(chǔ)教程之條件渲染和列表渲染的相關(guān)資料,需要的朋友可以參考下
2021-11-11
解決vue項(xiàng)目中出現(xiàn)Invalid Host header的問(wèn)題
這篇文章主要介紹了解決vue項(xiàng)目中出現(xiàn)"Invalid Host header"的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
vue el-checkbox實(shí)現(xiàn)全選單選方式
這篇文章主要介紹了vue el-checkbox實(shí)現(xiàn)全選單選方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
基于vue.js 2.x的虛擬滾動(dòng)條的示例代碼
本篇文章主要介紹了基于vue.js 2.x的虛擬滾動(dòng)條的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
Map.vue基于百度地圖組件重構(gòu)筆記分享
這篇文章主要為大家分享了Map.vue基于百度地圖組件重構(gòu)筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
el-input限制輸入正整數(shù)的兩種實(shí)現(xiàn)方式
el-input框是Element UI庫(kù)中的一個(gè)輸入框組件，用于接收用戶的輸入，這篇文章主要介紹了el-input限制輸入正整數(shù),需要的朋友可以參考下
2024-02-02
Vue中的v-model，v-bind，v-on的區(qū)別解析
vue.js是一套構(gòu)建用戶界面的框架，只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合，vue.js有配套的第三方類庫(kù)，可以整合起來(lái)做大型項(xiàng)目的開(kāi)發(fā)，這篇文章主要介紹了v-model，v-bind，v-on的區(qū)別,需要的朋友可以參考下
2022-12-12
VUE3.2項(xiàng)目使用Echarts5.4詳細(xì)步驟總結(jié)
Vue3.2是一款非常流行的JavaScript框架,它讓在前端領(lǐng)域開(kāi)發(fā)變得更加的便捷,下面這篇文章主要給大家介紹了關(guān)于VUE3.2項(xiàng)目使用Echarts5.4的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06
vue動(dòng)態(tài)路由實(shí)現(xiàn)多級(jí)嵌套面包屑的思路與方法
在實(shí)際項(xiàng)目中我們會(huì)碰到多層嵌套的組件組合而成，比如我們常見(jiàn)的面包屑導(dǎo)航，下面這篇文章就來(lái)給大家介紹關(guān)于vue實(shí)現(xiàn)動(dòng)態(tài)路由多級(jí)嵌套面包屑的思路與方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-08-08