在Vue中如何實現按需加載

本篇文章主要介紹了Vue按需載入的具體實現，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

概念（懶加載）

當打包建置應用程式時，JavaScript套件會變得非常大，影響頁面載入。如果我們能把不同路由對應的元件分割成不同的程式碼區塊，然後當路由被存取的時候才載入對應元件，嗯，這樣就更有效率了。

場景

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

目的

只在存取目前頁面時載入對應元件，避免頁面元件全部載入。 （按需載入）

實作

app.vue

<template>
  <p id="app">
    <router-view/>
  </p>
</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

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

在JS中有關函數節流和函數防手震（詳細教學）

在vue中如何將頁面公用的頭部組件化（詳細教學）

使用React.setState有哪些需要注意的地方

在vue中如何引入微信sdk介面

以上是在Vue中如何實現按需加載的詳細內容。更多資訊請關注PHP中文網其他相關文章！