Vue按需加載的具體實(shí)現(xiàn)

更新時(shí)間：2017年12月02日 08:59:13 作者：miko

本篇文章主要介紹了Vue按需加載的具體實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

概念（懶加載）

當(dāng)打包構(gòu)建應(yīng)用時(shí)，JavaScript包會(huì)變得非常大，影響頁面加載。如果我們能把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問的時(shí)候才加載對(duì)應(yīng)組件，嗯，這樣就更加高效了。

場景

xxx項(xiàng)目作為一個(gè)單頁面應(yīng)用，采用組件化的開發(fā)模式，每次啟動(dòng)首頁都會(huì)加載全部組件，但此時(shí)只是訪問了首頁而已，就造成了大量組件污染加載的情況。

目的

只在訪問當(dāng)前頁面時(shí)加載對(duì)應(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)用。加載的模塊會(huì)以參數(shù)形式傳入該函數(shù)，從而在回調(diào)函數(shù)內(nèi)部使用這些模塊。

示例代碼中使用了異步的方式加載組件，其中require函數(shù)負(fù)責(zé)異步引入將要渲染的組件，而resolve則負(fù)責(zé)異步回調(diào)渲染組件。

babel-polyfill：對(duì)Promise進(jìn)行轉(zhuǎn)碼編譯；

npm install --save babel-polyfill

es6-promise-polyfill 解決Promise兼容性問題。關(guān)于不太了解Promise的同學(xué)請(qǐng)移步這里

npm install --save es6-promise-polyfill

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue多布局模式實(shí)現(xiàn)方法詳細(xì)講解
這篇文章主要介紹了Vue多布局模式實(shí)現(xiàn)方法，多布局模式可以根據(jù)用戶角色所在場景切換頁面布局，是非常常見的基礎(chǔ)功能，感興趣的同學(xué)可以參考下文
2023-05-05
Vue中 Runtime + Compiler 和 Runtime-o
這篇文章主要介紹了Vue中 Runtime + Compiler 和 Runtime-only 兩種模式含義和區(qū)別,結(jié)合實(shí)例形式詳細(xì)分析了Vue中 Runtime + Compiler 和 Runtime-only 兩種模式基本功能、原理、區(qū)別與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2023-06-06
Ubuntu22.04使用nginx部署vue前端項(xiàng)目的詳細(xì)教程
這篇文章主要給大家介紹了關(guān)于Ubuntu22.04使用nginx部署vue前端項(xiàng)目的詳細(xì)教程,使用nginx部署前端項(xiàng)目是一篇非常詳細(xì)的教程,旨在幫助初學(xué)者使用Nginx來部署前端項(xiàng)目,需要的朋友可以參考下
2024-03-03
在vue中獲取wangeditor的html和text的操作
這篇文章主要介紹了在vue中獲取wangeditor的html和text的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
淺談Vue.js 關(guān)于頁面加載完成后執(zhí)行一個(gè)方法的問題
這篇文章主要介紹了Vue.js 關(guān)于頁面加載完成后執(zhí)行一個(gè)方法的問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
vue+axios 前端實(shí)現(xiàn)的常用攔截的代碼示例
這篇文章主要介紹了vue+axios 前端實(shí)現(xiàn)的常用攔截的代碼示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-08-08
關(guān)于elementUi表格合并行數(shù)據(jù)并展示序號(hào)
這篇文章主要介紹了關(guān)于elementUi表格合并行數(shù)據(jù)并展示序號(hào),通過給table傳入span-method方法可以實(shí)現(xiàn)合并行或列，方法的參數(shù)是一個(gè)對(duì)象,感興趣的朋友可以學(xué)習(xí)一下
2023-04-04
vue項(xiàng)目history模式刷新404問題解決辦法
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目history模式刷新404問題的解決辦法,需要的朋友可以參考下
2023-11-11
關(guān)于Vue-cli3煩人的eslint問題
這篇文章主要介紹了關(guān)于Vue-cli3煩人的eslint問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
Vue3子組件實(shí)現(xiàn)v-model用法的示例代碼
在Vue 3中,實(shí)現(xiàn)自定義的input組件并支持v-model綁定,涉及到對(duì)modelValue這個(gè)默認(rèn)prop的處理和對(duì)應(yīng)的update:modelValue事件的觸發(fā),本文給大家介紹了Vue3子組件實(shí)現(xiàn)v-model用法的示例,需要的朋友可以參考下
2024-04-04