网站首页 » 前端开发 » Vue » Vue 组件懒加载
上一篇:
下一篇:

Vue 组件懒加载

前言

相信你之前已经听说过图片懒加载,对其中的实现原理也可能已经略知一二,如果是的话,那么本文所说的 vue 组件懒加载中的懒加载也是差不多的原理,只不过触发的条件和要显示的东西有区别罢了。图片懒加载:当图片滚动到页面中时才会被加载,vue 组件懒加载:当路由被访问时,对应的组件才会被加载。

vue 组件懒加载之旅

旧写法

要想做到 vue 组件的懒加载非常地简单,只需要在路由配置中添加一些代码即可。比如像下面这样:

import Vue from 'vue'
import Router from 'vue-router'

let Home = (resolve) => {
  return require.ensure([], () => {
    resolve(require("@/components/Home"));
  })
}

let Angular = (resolve) => {
  return require.ensure([], () => {
    resolve(require("@/components/Angular"));
  })
}

let Html5 = (resolve) => {
  return require.ensure([], () => {
    resolve(require("@/components/Html5"));
  })
}

let About = (resolve) => {
  return require.ensure([], () => {
    resolve(require("@/components/About"));
  })
}

Vue.use(Router)
let router = new Router({
  linkActiveClass: 'active',
  routes: [{
      path: '/',
      name: 'Home',
      component: Home,
      meta: {
        menuName: '主页',
        index: 1
      }
    },
    {
      path: '/angular',
      name: 'Angular',
      component: Angular,
      meta: {
        menuName: 'ANGULAR',
        index: 2,
        login: true
      }
    },
    {
      path: '/html5',
      name: 'Html5',
      component: Html5,
      meta: {
        menuName: 'HTML5',
        index: 3
      }
    }, {
      path: '/about',
      name: 'About',
      component: About,
      meta: {
        menuName: '关于',
        index: 4
      }
    }
  ]
})

export default router;

在路由配置中,我们除了可以是组件名外,还可以是回调函数。回调函数中接收一个参数 resolve 。

require.ensure() 方法是 webpack 的的代码分割函数,方法中的第一个参数是数组,为所依赖的组件。如果没有,则留空。第二个参数是回调函数,在回调函数中我们再使用 require(“@/components/Home”) 把组件引入进来。

像上面的写法,如果你不喜欢使用中间变量的方式来组件代码的话,你也可以去掉中间变量,直接把回调函数写到路由配置中的 component 的后面,比如像下面这样:

......
{
  path: '/',
  name: 'Home',
  component: (resolve) => {
    return require.ensure([], () => {
      resolve(require("@/components/Home"));
    })
  },
  meta: {
    menuName: '主页',
    index: 1
  }
},
......

但有时候我们想把一些组件都归到一个文件中,而某些组件就要单独一个文件。那么要怎么写呢?

require.ensure() 方法给我们提供了第三个参数。我们可以通过第三个参数实现上面的需求。

......
let Home = (resolve) => {
  return require.ensure([], () => {
    resolve(require("@/components/Home"));
  })
}

let Angular = (resolve) => {
  return require.ensure([], () => {
    resolve(require("@/components/Angular"));
  })
}

let Html5 = (resolve) => {
  return require.ensure([], () => {
    resolve(require("@/components/Html5"));
  }, "yunkus")
}

let About = (resolve) => {
  return require.ensure([], () => {
    resolve(require("@/components/About"));
  }, "yunkus")
}
......

上面传入的 yunkus 字符串相当于一个标识,告诉 webpack 在代码切块时,有这个 yunkus 字符串标识的就把它们打包到一个文件中。其它没有配置这个参数的就一个组件单独打包到一个文件中。

上面的代码我们可以从下面的演示中看到:

vue 组件懒加载

一进来页面,第一次先加载了 3.js,也就是我们首页对应的组件代码。然后当你点了其它菜单的时候就会再把对应的组件加载进来,注意后面两个(html5 和 关于),只加载了一个 2.js 文件。因为我们在路由配置中就已经告诉了webpack 要把它们两个打包到一起。

使用组件懒加载也不用担心它们分割的文件会多次请求,因为它们只会被请求一次。第二次就不会再身服务器请求了,而是直接用缓存里的。

新写法

更写法就更简单一些,我们就 About 路由配置作为例子,上面的 About 路由配置代码可以改成下面这样:

let About = () => {
  return import ("@/components/About");
}

但是使用新写法会带来一个问题,也就是上面我们说的合并组件打包到一个 .js 文件功能,使用新写法是实现不了这个功能的。所以如果你在项目中需要合并组件打包到同一个文件的话,那么你还是得乖乖地使用老旧路。

具体情况具体分析,至于具体的使用场景得你自己云探索了,vue 组件懒加载就分享到这里。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/vue-component-lazy-loading/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END