Vue 组件异步加载(懒加载)
一、vue的编译模式
(1)路由配置信息
//eg1:
const MSite = resolve => require.ensure([], () =>resolve(require(['myComponent.vue'])) //eg2 需要syntax-dynamic-import插件
const MSite = () => import('../pages/MSite/MSite.vue') //异步加载
//import MSite from '../pages/MSite/MSite.vue' 同步加载 // 声明使用插件
Vue.use(VueRouter)
export default new VueRouter({
routes: [
{
path: '/msite',
// 返回路由组件的函数, 只有执行此函数才会加载路由组件, 这个函数在请求对应的路由路径时才会执行
component: MSite,
(2)组件或第三方库
A、懒加载组件
export default {
beforeCreate () {
import('dayjs').then(module => {
this.dayjs = module;
});
},
data () {
return {
dayjs: null
}
}
B、同步加载组件
import utiljs from 'utiljs'
export default {
data () {},
mounted () {}
}
Vue 组件异步加载(懒加载)的更多相关文章
- vue(组件、路由)懒加载
const Login = resolve => require(['@/components/Login'], resolve) //就不用import了 Vue.use(Router) le ...
- vue路由的异步加载(懒加载)方法
vue路由的异步加载(懒加载)方法. javascriptvue.jsvue-router 阅读约 2 分钟 vue本身不多介绍.直接说问题,因为vue的所有路由都是加载在一个app.js里的,如果 ...
- vue学习指南:第十二篇(详细) - Vue的 路由 第二篇 ( 路由按需加载(懒加载))
各位朋友 因 最近工作繁忙,小编停更了一段时间,快过年了,小编祝愿 大家 事业有成 学业有成 快乐健康 2020开心过好每一天.从今天开始 我会抽时间把 Vue 的知识点补充完整,以及后期会带给大家更 ...
- vue(18)路由懒加载
什么是路由懒加载 官方的解释: 当打包构建应用时,JavaScript 包会变得非常大,影响页面加载. 如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更 ...
- keep-alive vue组件缓存避免多次加载相应的组件
keep-alive vue组件缓存避免多次加载相应的组件
- 《前端之路》之 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏
目录 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & ...
- vue+webpack2实现路由的懒加载
当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 结合 Vue 的异步组 ...
- Vue.js笔记 — vue-router路由懒加载
用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效,实现代码如下 ...
- 使用 vant 的 v-lazy 实现图片 vue 在移动端的懒加载
官方文档:https://youzan.github.io/vant/#/zh-CN/lazyload 引入 Lazyload 是 Vue 指令,使用前需要对指令进行注册 import Vue fro ...
随机推荐
- 配置php环境的一个nginx.conf
文件:nginx.conf 内容: #user nobody;worker_processes 1; #error_log logs/error.log;#error_log logs/err ...
- Python生成器的原理及使用
'''1,什么是生成器? 函数内但凡有一个yield关键字, 再调用函数就不会执行函数代码,得到的返回值就是一个生成器对象 生成器本身就是一种迭代器 next(g)过程: 会触发生成器g所对应的函数的 ...
- 文件 "c:\Program Files\Microsoft SQL Server\MSSQL10.SQLEXPRESS\MSSQL\DATA\ttt.mdf" 已压缩,但未驻留在只读数据库或文件组中。必须将此文件解压缩。 CREATE DATABASE 失败。无法创建列出的某些文件名。请查看相关错误。 (.Net SqlClient Data Provider)
问题: 文件 "c:\Program Files\Microsoft SQL Server\MSSQL10.SQLEXPRESS\MSSQL\DATA\ttt.mdf" 已压缩,但 ...
- 从Redis到Codis移植实践
一. 背景 随着业务的发展,线上Redis的数据越来越多,所以必须考虑扩容的事情了.对于redis的扩容,目前可选的方案有三种:1.client自己做sharding,一般是按key的hash值 ...
- (Review cs231n) Spatial Localization and Detection(classification and localization)
重在图像的定位和检测的内容. 一张图片中只有一种给定类别标签的对象,定位则是图像中有对象框:再这些类中,每一个训练目标都有一个类和许多的图像内部对应类的位置选框. 猜想的仅是类标签,不如说它们是位置 ...
- 从centos镜像创建maven仓库
创建镜像 1. 使用centos7作为基础镜像2. 将jdk1.8(官方要求1.8)和nexus3解压后的两个文件放进cp进去3. export环境变量后启动一下试一试4. docker commit ...
- IIS + FastCGI+php(从5.2升级到5.3)
由于PHP5.3 的改进,原有的IIS 通过isapi 方式解析PHP脚本已经不被支持,PHP从5.3.0 以后的版本开始使用微软的 fastcgi 模式,这是一个更先进的方式,运行速度更快,更稳定. ...
- Oracle免安装绿色版-PLSQL连接报12154
在环境变量添加 TNS_ADMIN 值是你的免安装客户端中sqlnet.ora tnsnames.ora 所在的目录 参考地址:https://blog.csdn.net/feng_na/art ...
- CCF CSP 201809-1 卖菜
题目链接:http://118.190.20.162/view.page?gpid=T79 问题描述 试题编号: 201809-1 试题名称: 卖菜 时间限制: 1.0s 内存限制: 256.0MB ...
- mysql语法之case when then与列转行
mysql语法中case when then与列转行的使用场景非常丰富. case语句类似java中条件分支语句的作用,可以类比java中的switch语句或者if语句来学习. 其语法如下: case ...