Vue按需加載的具體實(shí)現(xiàn)
概念（懶加載）
當(dāng)打包構(gòu)建應(yīng)用時(shí)，JavaScript包會變得非常大，影響頁面加載。如果我們能把不同路由對應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問的時(shí)候才加載對應(yīng)組件，嗯，這樣就更加高效了。
場景
xxx項(xiàng)目作為一個(gè)單頁面應(yīng)用，采用組件化的開發(fā)模式，每次啟動首頁都會加載全部組件，但此時(shí)只是訪問了首頁而已，就造成了大量組件污染加載的情況。
目的
只在訪問當(dāng)前頁面時(shí)加載對應(yīng)組件，避免頁面組件全部加載。（按需加載）
實(shí)現(xiàn)
app.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import 'babel-polyfill'
import {Promise} from 'es6-promise-polyfill'
import App from '../components/app'
// 定義路由，每個(gè)路由映射一個(gè)組件。
const Routers = [
{
path: '/', // 路徑
component: resolve => require(['../components/member/index], resolve) // 異步加載組件
},
{
path: '/login',
component: resolve => require(['../components/member/login'], resolve)
}
]
const RouterConfig = {
routes: Routers
}
// 創(chuàng)建router實(shí)例，并傳遞路由配置。
const router = new VueRouter(RouterConfig);
// 創(chuàng)建并掛載根實(shí)例。
new Vue({
el:'#app',
router,
// 將h作為createElement的別名是一個(gè)通用慣例。
render: h =>(App)
})
注意：
require()函數(shù)接受兩個(gè)參數(shù)。第一個(gè)參數(shù)是一個(gè)數(shù)組，表示所依賴的模塊，例如['moduleA','moduleB']，第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，當(dāng)前面指定的模塊都加載成功后，它將被調(diào)用。加載的模塊會以參數(shù)形式傳入該函數(shù)，從而在回調(diào)函數(shù)內(nèi)部使用這些模塊。
示例代碼中使用了異步的方式加載組件，其中require函數(shù)負(fù)責(zé)異步引入將要渲染的組件，而resolve則負(fù)責(zé)異步回調(diào)渲染組件。
babel-polyfill：對Promise進(jìn)行轉(zhuǎn)碼編譯；
npm install --save babel-polyfill
es6-promise-polyfill 解決Promise兼容性問題。關(guān)于不太了解Promise的同學(xué)請移步這里
npm install --save es6-promise-polyfill
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue+element?DatePicker實(shí)現(xiàn)日期選擇器封裝
Vue?Element?DatePicker是一款基于Vue.js的日期選擇控件，它提供了豐富的日期選擇功能，支持日期范圍選擇、日期格式化、自定義日期格式、快捷選擇等功能，極大地提高了用戶的體驗(yàn)，是開發(fā)者必備的日期選擇控件。2023-02-02
Ant Design Vue table組件如何自定義分頁器
這篇文章主要介紹了Ant Design Vue table組件如何自定義分頁器問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)登陸功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue中實(shí)現(xiàn)過渡動畫效果實(shí)例詳解
最近在寫vue的一個(gè)項(xiàng)目要實(shí)現(xiàn)過渡的效果,雖然vue動畫不是強(qiáng)項(xiàng),庫也多,但是基本的坑還是得踩扎實(shí),下面這篇文章主要給大家介紹了關(guān)于Vue中實(shí)現(xiàn)過渡動畫效果的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動端圖片裁剪上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
Vue中如何進(jìn)行數(shù)據(jù)響應(yīng)式更新
Vue是一款流行的JavaScript框架，它提供了數(shù)據(jù)響應(yīng)式更新的能力，可以讓我們輕松地更新數(shù)據(jù)，并自動更新視圖，本文將介紹Vue中如何進(jìn)行數(shù)據(jù)響應(yīng)式更新，包括使用Vue的響應(yīng)式系統(tǒng)、使用計(jì)算屬性和使用Vue的watcher,需要的朋友可以參考下2023-06-06
本文是作者通過實(shí)際項(xiàng)目的優(yōu)化實(shí)踐進(jìn)行總結(jié)而來，希望讀者讀完本文，有一定的啟發(fā)思考，從而對自己的項(xiàng)目進(jìn)行優(yōu)化起到幫助2022-08-08
vue點(diǎn)擊input彈出帶搜索鍵盤并監(jiān)聽該元素的方法
今天小編就為大家分享一篇vue點(diǎn)擊input彈出帶搜索鍵盤并監(jiān)聽該元素的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
基于Element-Ui封裝公共表格組件的詳細(xì)圖文步驟
在平時(shí)開發(fā)的時(shí)候很多情況都會使用到表格和分頁功能,下面這篇文章主要給大家介紹了關(guān)于如何基于Element-Ui封裝公共表格組件的詳細(xì)圖文步驟,需要的朋友可以參考下2022-09-09
vue3中$attrs的變化與inheritAttrs的使用詳解
$attrs現(xiàn)在包括class和style屬性。?也就是說在vue3中$listeners不存在了，vue2中$listeners是單獨(dú)存在的，在vue3?$attrs包括class和style屬性,?vue2中?$attrs?不包含class和style屬性，這篇文章主要介紹了vue3中$attrs的變化與inheritAttrs的使用?,需要的朋友可以參考下2022-10-10