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 ...
随机推荐
- 利用反射和JDBC元数据实现更加通用的查询方法
package com.at221.jdbc; import java.io.IOException; import java.io.InputStream; import java.sql.*; i ...
- Nginx 配置文件优化
user www www; #用户&组 worker_processes auto; #通常是CPU核的数量存储数据的硬盘数量及负载模式,不确定时将其设置为可用的CPU内核数(设置为“auto ...
- SQL实现如何计算项目进度总共天数情况、已经施工天数情况、以及施工进度百分比
SELECT DATEDIFF(DAY,e.StartDate,e.EndDate)as totaldays, (SELECT COUNT(TaskID) from ConstructionManag ...
- socket的原理和实验
1.socket原理 根据连接启动的方式以及本地套接字要连接的目标,套接字之间的连接过程可以分为三个步骤:服务器监听,客户端请求,连接确认. (1)服务器监听:是服务器端套接字并不定位具体的客户端套接 ...
- Java多线程编程的常见陷阱
.在构造函数中启动线程 我在很多代码中都看到这样的问题,在构造函数中启动一个线程,类似这样: public class A{ public A(){ ; ; this.thread=new MyThr ...
- Rsync使用方法
Rsync是一款开源.快速.多功能.可实现全量及增量的本地或者远程数据同步的优秀工具.并且支持多系统平台运行.Rsync具有本地与远程两台主机之间的数据快速复制同步镜像.远程备份等功能,该功能类似sc ...
- Spark大型电商项目实战-及其改良(4) 单独运行程序发现的问题
之前的运行结果比对发现,有1个函数的作用在2个job里面是相同的,但是对应的计算时间却差太远 于是把4个job分开运行.虽说使用的数据不同,但是生成数据的生成器是相同的,数据排布差距不大,数据量也是相 ...
- ORA-28002密码失效问题解决
问题:提示ORA-28002解决: 第1种方法:数据库级别,需要重启查看过期时间: sql>SELECT * FROM dba_profiles WHERE profile='DEFAULT' ...
- 网易cetus数据库中间件安装-读写分离版本
安装前提:1.数据库主从关系要做好:2.授权用户登录要做好:3.mysql最大连接数设置好,不然会报连接错误:4.版本最好是5.6以上. 1.安装依赖 yum install cmake gcc gl ...
- [c/c++] programming之路(26)、结构体
一.初始化字符串 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> #include&l ...