vue 组件按需引用,vue-router懒加载,vue打包优化,加载动画
当打包构建应用时,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打包优化,加载动画的更多相关文章
- 浅谈 vue实例 和 vue组件
vue实例: import Vue from 'vue'; import app from './app'; import myRouter from './routers'; new Vue({ e ...
- Vue总结第五天:vue-router (使用模块化(创建Vue组件)机制编程)、router-link 标签的属性、路由代码跳转、懒加载、路由嵌套(子路由)、路由传递数据、导航守卫)
Vue总结第五天:vue-router ✿ 路由(器)目录: □ vue中路由作用 □ vue-router基本使用 □ vue-router嵌套路由 □ vue-router参数传递 □ ...
- day 83 Vue学习三之vue组件
本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给大家介绍一下组件(componen ...
- day 82 Vue学习三之vue组件
Vue学习三之vue组件 本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...
- vue组件推荐
Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...
- Laravel 项目中编写第一个 Vue 组件
和 CSS 框架一样,Laravel 不强制你使用什么 JavaScript 客户端框架,但是开箱对 Vue.js 提供了良好的支持,如果你更熟悉 React 的话,也可以将默认的脚手架代码替换成 R ...
- 黑马vue---56-58、vue组件创建的三种方式
黑马vue---56-58.vue组件创建的三种方式 一.总结 一句话总结: 不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素 1.使用 Vu ...
- vue学习【二】vue结合axios动态引用echarts
大家好,我是一叶,本篇是vue学习的第二篇,本篇将要讲述vue结合axios动态引用echarts. 在vue中,异步刷新使用的是axios,类似于大家常用的ajax,其实axios已经是vue的第二 ...
- Vue组件的继承用法
Vue组件的继承用法 点击打开视频讲解 vue组件的继承适用于UI几乎一样,只是数据不一样的情况下,但是这种情况通过统一封装组件也是能实现的,小功能建议用封装,大功能建议用组件继承,因为大功能在结合搜 ...
随机推荐
- gradle入门(1-8)gradle 的依赖查看、依赖排除和指定版本(需要验证!)
一.依赖查看 gradle dependencies 在gradle dependencies输出会有如下几种标记: 1.版本 : 唯一的依赖. 2.版本():还存在该库其他版本的依赖或者间接依赖,并 ...
- 复习HTML+CSS(3)
n 超级链接 l 语法格式:<a 属性 = "值">---</a> l 常用属性: n Href:目标文件的地址URL,该URL可以是相对地址,也可 ...
- python打包压缩文件夹zip+组装文件夹
无意间想到的一个需求,然后就顺手写了写,留下来,方便以后用 列表版:(基本没用,仅提供思路,字典版稍微改动可以直接用) 大体需求: 把重复的文件名进行改名,达到浏览器下载相同文件的效果 下载完成后再把 ...
- 数据库“行专列”操作---使用row_number()over(partition by 分组字段 [order by 排序字段])
测试样例: create table test(rsrp string,rsrq string,tkey string,distan string); '); '); '); '); select * ...
- Menu-右键弹出菜单
#右键弹出菜单 from tkinter import * root=Tk() def callback(): print('我被调用了') menubar =Menu(root) menubar.a ...
- 【机器学习】Iris Data Set(鸢尾属植物数据集)
注:数据是机器学习模型的原材料,当下机器学习的热潮离不开大数据的支撑.在机器学习领域,有大量的公开数据集可以使用,从几百个样本到几十万个样本的数据集都有.有些数据集被用来教学,有些被当做机器学习模型性 ...
- C#之Message(转)
一.消息概述 Windows下应用程序的执行是通过消息驱动的.消息是整个应用程序的工作引擎,我们需要理解掌握我们使用的编程语言是如何封装消息的原理. 什么是消息(Message) 消息就是通知和命令. ...
- Python 装饰器示例
#!/usr/bin/env python # _*_ coding: UTF-8 _*_ # Author:taoke def applePrice(func): def otherfunc(): ...
- cogs 619. [金陵中学2007] 传话
提交地址:http://cojs.tk/cogs/problem/problem.php?pid=619 619. [金陵中学2007] 传话 ★☆ 输入文件:messagez.in 输出文件 ...
- [HNOI 2018]排列
Description 题库链接 给定 \(n\) 个整数 \(a_1, a_2, \dots, a_n, 0 \le ai \le n\) ,以及 \(n\) 个整数 \(w_1, w_2, \do ...