Vue按需載入的具體實現，vue需載入

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

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。