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