Vue中怎么實現按需加載

本篇文章給大家分享的是有關Vue中怎么實現按需加載，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

概念（懶加載）

當打包構建應用時，JavaScript包會變得非常大，影響頁面加載。如果我們能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，嗯，這樣就更加高效了。

場景

xxx項目作為一個單頁面應用，采用組件化的開發模式，每次啟動首頁都會加載全部組件，但此時只是訪問了首頁而已，就造成了大量組件污染加載的情況。

目的

只在訪問當前頁面時加載對應組件，避免頁面組件全部加載。（按需加載）

實現

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
}
// 創建router實例，并傳遞路由配置。
const router = new VueRouter(RouterConfig);
// 創建并掛載根實例。
new Vue({
  el:'#app',
  router,
  // 將h作為createElement的別名是一個通用慣例。
  render: h =>(App) 
})

注意：

require()函數接受兩個參數。第一個參數是一個數組，表示所依賴的模塊，例如['moduleA','moduleB']，第二個參數是一個回調函數，當前面指定的模塊都加載成功后，它將被調用。加載的模塊會以參數形式傳入該函數，從而在回調函數內部使用這些模塊。

示例代碼中使用了異步的方式加載組件，其中require函數負責異步引入將要渲染的組件，而resolve則負責異步回調渲染組件。

babel-polyfill：對Promise進行轉碼編譯；

npm install --save babel-polyfill

es6-promise-polyfill 解決Promise兼容性問題。關于不太了解Promise的同學請移步這里

npm install --save es6-promise-polyfill

以上就是Vue中怎么實現按需加載，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。