当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

结合 Vue 的 异步组件 和 Webpack 的 code splitting feature, 轻松实现路由组件的懒加载。

我们要做的就是把路由对应的组件定义成异步组件

const Foo = resolve => {
// require.ensure 是 Webpack 的特殊语法,用来设置 code-split point
// (代码分块)
require.ensure(['./Foo.vue'], () => {
resolve(require('./Foo.vue'))
})
}

这里还有另一种代码分块的语法,使用 AMD 风格的 require,于是就更简单了:

const Foo = resolve => require(['./Foo.vue'], resolve) 

不需要改变任何路由配置,跟之前一样使用 Foo

const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo }
]
})

把组件按组分块

有时候我们想把某个路由下的所有组件都打包在同个异步 chunk 中。只需要 给 chunk 命名,提供 require.ensure 第三个参数作为 chunk 的名称:

const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')
const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo')
const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')

Webpack 将相同 chunk 下的所有异步模块打包到一个异步块里面 —— 这也意味着我们无须明确列出 require.ensure 的依赖(传空数组就行)。

如果你想在组件加载的时候可以有loading提示也同样的很简单

这里以mint-ui为例

import { Indicator } from 'mint-ui';
//前提是npm i mint-ui -S

然后你就只需要稍微加一点代码

const Foo = resolve => {
Indicator.open();
require.ensure(['./Foo.vue'], () => {
resolve(require('./Foo.vue'))
Indicator.close()
})
}
//这样就可以实现组件在异步加载的时候显示loading

效果如下

vue 组件按需引用,vue-router懒加载,vue打包优化,加载动画的更多相关文章

  1. 浅谈 vue实例 和 vue组件

    vue实例: import Vue from 'vue'; import app from './app'; import myRouter from './routers'; new Vue({ e ...

  2. Vue总结第五天:vue-router (使用模块化(创建Vue组件)机制编程)、router-link 标签的属性、路由代码跳转、懒加载、路由嵌套(子路由)、路由传递数据、导航守卫)

    Vue总结第五天:vue-router ✿ 路由(器)目录: □  vue中路由作用 □  vue-router基本使用 □  vue-router嵌套路由 □  vue-router参数传递 □  ...

  3. day 83 Vue学习三之vue组件

    本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给大家介绍一下组件(componen ...

  4. day 82 Vue学习三之vue组件

      Vue学习三之vue组件   本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...

  5. vue组件推荐

    Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...

  6. Laravel 项目中编写第一个 Vue 组件

    和 CSS 框架一样,Laravel 不强制你使用什么 JavaScript 客户端框架,但是开箱对 Vue.js 提供了良好的支持,如果你更熟悉 React 的话,也可以将默认的脚手架代码替换成 R ...

  7. 黑马vue---56-58、vue组件创建的三种方式

    黑马vue---56-58.vue组件创建的三种方式 一.总结 一句话总结: 不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素 1.使用 Vu ...

  8. vue学习【二】vue结合axios动态引用echarts

    大家好,我是一叶,本篇是vue学习的第二篇,本篇将要讲述vue结合axios动态引用echarts. 在vue中,异步刷新使用的是axios,类似于大家常用的ajax,其实axios已经是vue的第二 ...

  9. Vue组件的继承用法

    Vue组件的继承用法 点击打开视频讲解 vue组件的继承适用于UI几乎一样,只是数据不一样的情况下,但是这种情况通过统一封装组件也是能实现的,小功能建议用封装,大功能建议用组件继承,因为大功能在结合搜 ...

随机推荐

  1. gradle入门(1-8)gradle 的依赖查看、依赖排除和指定版本(需要验证!)

    一.依赖查看 gradle dependencies 在gradle dependencies输出会有如下几种标记: 1.版本 : 唯一的依赖. 2.版本():还存在该库其他版本的依赖或者间接依赖,并 ...

  2. 复习HTML+CSS(3)

    n  超级链接 l  语法格式:<a 属性 = "值">---</a> l  常用属性: n  Href:目标文件的地址URL,该URL可以是相对地址,也可 ...

  3. python打包压缩文件夹zip+组装文件夹

    无意间想到的一个需求,然后就顺手写了写,留下来,方便以后用 列表版:(基本没用,仅提供思路,字典版稍微改动可以直接用) 大体需求: 把重复的文件名进行改名,达到浏览器下载相同文件的效果 下载完成后再把 ...

  4. 数据库“行专列”操作---使用row_number()over(partition by 分组字段 [order by 排序字段])

    测试样例: create table test(rsrp string,rsrq string,tkey string,distan string); '); '); '); '); select * ...

  5. Menu-右键弹出菜单

    #右键弹出菜单 from tkinter import * root=Tk() def callback(): print('我被调用了') menubar =Menu(root) menubar.a ...

  6. 【机器学习】Iris Data Set(鸢尾属植物数据集)

    注:数据是机器学习模型的原材料,当下机器学习的热潮离不开大数据的支撑.在机器学习领域,有大量的公开数据集可以使用,从几百个样本到几十万个样本的数据集都有.有些数据集被用来教学,有些被当做机器学习模型性 ...

  7. C#之Message(转)

    一.消息概述 Windows下应用程序的执行是通过消息驱动的.消息是整个应用程序的工作引擎,我们需要理解掌握我们使用的编程语言是如何封装消息的原理. 什么是消息(Message) 消息就是通知和命令. ...

  8. Python 装饰器示例

    #!/usr/bin/env python # _*_ coding: UTF-8 _*_ # Author:taoke def applePrice(func): def otherfunc(): ...

  9. cogs 619. [金陵中学2007] 传话

    提交地址:http://cojs.tk/cogs/problem/problem.php?pid=619 619. [金陵中学2007] 传话 ★☆   输入文件:messagez.in   输出文件 ...

  10. [HNOI 2018]排列

    Description 题库链接 给定 \(n\) 个整数 \(a_1, a_2, \dots, a_n, 0 \le ai \le n\) ,以及 \(n\) 个整数 \(w_1, w_2, \do ...