vue?組件異步加載方式(按需加載)
組件異步加載(按需加載)
有時(shí)候打包出來的js文件過大，嚴(yán)重影響訪問速度，這個(gè)時(shí)候我們就不得不考慮相關(guān)方法來提速，畢竟這可是會(huì)影響瀏覽量的。
如果只是針對(duì)這個(gè)問題的話，我們可以考慮以下兩方面：
- nignx開啟gzip、緩存。
- 文件再次拆分-異步加載
下面就主要說以下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)目功能越來越多，所包含的子組件也越來越多，導(dǎo)致頁(yè)面加載，訪問速度過慢，所以需要優(yōu)化頁(yè)面加載的性能。
3.異步加載組件方法
(1) 可以使用懶加載，即 () => import ( 地址)
關(guān)于路由懶加載：VUE：實(shí)現(xiàn)路由懶加載
(2) 使用require
代碼演示:
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- 解決vue動(dòng)態(tài)路由異步加載import組件,加載不到module的問題
- 詳解vue-router的Import異步加載模塊問題的解決方案
- vue+echarts實(shí)現(xiàn)動(dòng)態(tài)繪制圖表及異步加載數(shù)據(jù)的方法
- vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問題
- vue異步加載高德地圖的實(shí)現(xiàn)
- vue+webpack實(shí)現(xiàn)異步加載三種用法示例詳解
- 詳解Vue-Cli 異步加載數(shù)據(jù)的一些注意點(diǎn)
- Javascript vue.js表格分頁(yè)，ajax異步加載數(shù)據(jù)
- Vue?處理異步加載順序問題之如何在Konva中確保文本在圖片之上顯示
相關(guān)文章
Vue實(shí)現(xiàn)預(yù)覽文件(Word/Excel/PDF)功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何通過Vue實(shí)現(xiàn)預(yù)覽文件(Word/Excel/PDF)的功能，文中的實(shí)現(xiàn)步驟講解詳細(xì)，需要的小伙伴可以參考一下2023-03-03
在Vue中,有兩種常用的CSS選擇器,用于修改組件樣式：scoped?和?/deep/（或?::v-deep）,它們都是為了實(shí)現(xiàn)樣式的作用域,本文小編就來分別給大家介紹一下這兩種選擇器的原理,需要的朋友可以參考下2023-08-08
vue+ElementPlus框架Container 布局容器不能鋪滿整個(gè)屏幕的解決方案
這篇文章主要介紹了vue+ElementPlus框架Container 布局容器不能鋪滿整個(gè)屏幕的解決方案,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
vue 使用 v-model 雙向綁定父子組件的值遇見的問題及解決方案
這篇文章主要介紹了vue 使用 v-model 雙向綁定父子組件的值遇見的問題及解決方案，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
記錄一個(gè)Vue3簡(jiǎn)易微信右滑刪除邏輯的思路實(shí)現(xiàn)
本文主要介紹了記錄一個(gè)Vue3簡(jiǎn)易微信右滑邏輯的思路實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
Vue3利用vue-plugin-hiprint插件實(shí)現(xiàn)無預(yù)覽打印功能
在MES管理系統(tǒng)中需要實(shí)現(xiàn)條碼數(shù)據(jù)從接口返回后,直接調(diào)用打印機(jī)進(jìn)行打印,跳過瀏覽器的預(yù)覽確定那一步,在嘗試很多JS的方式和插件后,都無法實(shí)現(xiàn)該功能,所以本文介紹了Vue3如何利用vue-plugin-hiprint插件實(shí)現(xiàn)無預(yù)覽打印功能,需要的朋友可以參考下2025-04-04
html-webpack-plugin修改頁(yè)面的title的方法
這篇文章主要介紹了html-webpack-plugin修改頁(yè)面的title的方法 ，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要介紹了vue父子組件slot插槽的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
淺析Vue中defineProps的解構(gòu)和不解構(gòu)
defineProps?是?Vue?3?Composition?API?中用來聲明組件接收的?props?的方法,本文主要為大家介紹了defineProps的解構(gòu)和不解構(gòu),感興趣的可以了解下2025-02-02
vue iview組件表格 render函數(shù)的使用方法詳解
下面小編就為大家分享一篇vue iview組件表格 render函數(shù)的使用方法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03