vue?組件異步加載方式(按需加載)
更新時間：2022年04月11日 14:41:10 作者：朽木·露琪亞
這篇文章主要介紹了vue?組件異步加載方式(按需加載)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
組件異步加載(按需加載)
有時候打包出來的js文件過大，嚴重影響訪問速度，這個時候我們就不得不考慮相關(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.什么是異步組件
即只在組件需要渲染的時候進行加載渲染并緩存。
2.為什么需要異步加載組件
當項目功能越來越多，所包含的子組件也越來越多，導致頁面加載，訪問速度過慢，所以需要優(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實現(xiàn)預覽文件(Word/Excel/PDF)功能的示例代碼
這篇文章主要為大家詳細介紹了如何通過Vue實現(xiàn)預覽文件(Word/Excel/PDF)的功能，文中的實現(xiàn)步驟講解詳細，需要的小伙伴可以參考一下2023-03-03
在Vue中,有兩種常用的CSS選擇器,用于修改組件樣式：scoped?和?/deep/（或?::v-deep）,它們都是為了實現(xiàn)樣式的作用域,本文小編就來分別給大家介紹一下這兩種選擇器的原理,需要的朋友可以參考下2023-08-08
vue+ElementPlus框架Container 布局容器不能鋪滿整個屏幕的解決方案
這篇文章主要介紹了vue+ElementPlus框架Container 布局容器不能鋪滿整個屏幕的解決方案,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
vue 使用 v-model 雙向綁定父子組件的值遇見的問題及解決方案
這篇文章主要介紹了vue 使用 v-model 雙向綁定父子組件的值遇見的問題及解決方案，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-03-03
本文主要介紹了記錄一個Vue3簡易微信右滑邏輯的思路實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
Vue3利用vue-plugin-hiprint插件實現(xiàn)無預覽打印功能
在MES管理系統(tǒng)中需要實現(xiàn)條碼數(shù)據(jù)從接口返回后,直接調(diào)用打印機進行打印,跳過瀏覽器的預覽確定那一步,在嘗試很多JS的方式和插件后,都無法實現(xiàn)該功能,所以本文介紹了Vue3如何利用vue-plugin-hiprint插件實現(xiàn)無預覽打印功能,需要的朋友可以參考下2025-04-04
html-webpack-plugin修改頁面的title的方法
這篇文章主要介紹了html-webpack-plugin修改頁面的title的方法 ，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
這篇文章主要介紹了vue父子組件slot插槽的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教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ù)的使用方法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03