vue.js 异步组件

2024年1月14日 227次阅读 来源: 1000copy

运用时才装入须要的组件，能够有用的进步初次装入页面的速率。比如在路由切换时

异步组件的完成

Vue.js许可将组件定义为一个工场函数，动态地剖析组件的定义。工场函数吸收一个resolve回调，胜利猎取组件定义时挪用。也能够挪用reject(reason)指导失利。

假定我们有两个组件Home、About。Home组件和首页同步加载，而About组件则按需加载。案例的代码有首页index.html，组件代码about.js组成。

起首是about.js代码：

Vue.component('about', {
  template: '<div>About page</div>'
});

接下来是index.html代码：

<html>
<head>
  <title>Async Component test</title>
</head>
<body>

  <div id="app">
    <router-link to="/home">/home</router-link>
    <router-link to="/about">/about</router-link>
    <router-view></router-view>
  </div>

  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <script>
    function load(componentName, path) {
      return new Promise(function(resolve, reject) {
        var script = document.createElement('script');
        script.src = path;
        script.async = true;
        script.onload = function() {
          var component = Vue.component(componentName);
          if (component) {
            resolve(component);
          } else {
            reject();
          }
        };
        script.onerror = reject;
        document.body.appendChild(script);
      });
    }
    var router = new VueRouter({
      routes: [
        {
          path: '/',
          redirect:'/home'
        },
        {
          path: '/home',
          component: {
            template: '<div>Home page</div>'
          },
        },
        {
          path: '/about',
          component: function(resolve, reject) {
            load('about', 'about.js').then(resolve, reject);
          }
        }
      ]
    });
    var app = new Vue({
      el: '#app',
      router: router,
    });
  </script>

</body>
</html>

为了加载在服务器的js文件，我们须要一个HTTP服务器。能够运用node.js的http-server完成。装置并启动一个服务器的要领：

npm install http-server -g
http-server

接见：

http://127.0.0.1:8080

我们即可在首页看到home和about的链接，点击home能够显现home组件，点击about，假如还没有加载过，就加载about组件。

对index.html内的代码稍作诠释:

  1. 组件定义为function(resolve, reject) {}函数，其内挪用load函数，胜利后resolve，不然reject

  2. 函数load内经由过程建立标签script加载指定文件，并经由过程onload事宜当加载完成后，经由过程Vue.component考证组件，存在就resolve,不然reject

异步组件的webpack计划

假如运用webpack脚手架的体式格局，加载异步组件将会越发直观。本节会用一样的案例，运用webpack做一次演示。

起首建立脚手架，并装置依靠

vue init webpack vuetest
cd vuetest
npm i
npm run dev

接见localhost:8080，能够看到Vue的默许页面。然后替代main.js文件为：

import Vue from 'vue'
import App from './App'

import VueRouter from 'vue-router'
import About from './components/about'
Vue.use(VueRouter)

const Home = { template: '<div>home page</div>' }
// const About = { template: '<div>about page</div>' }
const router = new VueRouter({
  routes :[
    { path: '/home', component: Home },
    { path: '/about', component: function (resolve) {
        require(['./components/about'], resolve)
        } 
    },
    { path: '/', redirect: '/home' }
  ]
})
new Vue({
  el: '#app',
  template: '<App/>',
  router: router,
  components: { App }
})

并增加组件about到src/components/about.vue:

<template>
  <div>about page</div>
</template>

再次接见localhost:8080，能够看到Home组件和about组件的链接，点击链接尝尝，能够看到组件home和about都是能够加载的。

这里特别要诠释的是代码：

component: function (resolve) {
    require(['./components/about'], resolve)
    } 
}

Vue.js支撑component定义为一个函数：function (resolve) {}，在函数内，能够运用相似node.js的库引入形式

require([‘./components/about’], resolve)

从而大大的简化了异步组件的开辟。固然，价值是你须要运用脚手架代码。这个特别的require语法通知webpack自动将编译后的代码分割成差别的块，这些块将经由过程按需自动下载。

关于

作者：刘传君

建立过产物，创过业。好念书，求甚解。
能够经由过程 1000copy#gmail.com 联络到我

出品

bootstrap小书 https://www.gitbook.com/book/…
http小书 http://www.ituring.com.cn/boo…
Git小书 http://www.ituring.com.cn/boo…

    原文作者：1000copy
    原文地址: https://segmentfault.com/a/1190000008127586
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞