一、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 组件异步加载(懒加载)的更多相关文章

  1. vue(组件、路由)懒加载

    const Login = resolve => require(['@/components/Login'], resolve) //就不用import了 Vue.use(Router) le ...

  2. vue路由的异步加载(懒加载)方法

    vue路由的异步加载(懒加载)方法. javascriptvue.jsvue-router  阅读约 2 分钟 vue本身不多介绍.直接说问题,因为vue的所有路由都是加载在一个app.js里的,如果 ...

  3. vue学习指南:第十二篇(详细) - Vue的 路由 第二篇 ( 路由按需加载(懒加载))

    各位朋友 因 最近工作繁忙,小编停更了一段时间,快过年了,小编祝愿 大家 事业有成 学业有成 快乐健康 2020开心过好每一天.从今天开始 我会抽时间把 Vue 的知识点补充完整,以及后期会带给大家更 ...

  4. vue(18)路由懒加载

    什么是路由懒加载 官方的解释: 当打包构建应用时,JavaScript 包会变得非常大,影响页面加载. 如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更 ...

  5. keep-alive vue组件缓存避免多次加载相应的组件

    keep-alive vue组件缓存避免多次加载相应的组件

  6. 《前端之路》之 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏

    目录 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & 骨架屏 09: 前端图片 类型 & 优化 & 预加载 & 懒加载 & ...

  7. vue+webpack2实现路由的懒加载

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

  8. Vue.js笔记 — vue-router路由懒加载

    用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效,实现代码如下 ...

  9. 使用 vant 的 v-lazy 实现图片 vue 在移动端的懒加载

    官方文档:https://youzan.github.io/vant/#/zh-CN/lazyload 引入 Lazyload 是 Vue 指令,使用前需要对指令进行注册 import Vue fro ...

随机推荐

  1. 利用反射和JDBC元数据实现更加通用的查询方法

    package com.at221.jdbc; import java.io.IOException; import java.io.InputStream; import java.sql.*; i ...

  2. Nginx 配置文件优化

    user www www; #用户&组 worker_processes auto; #通常是CPU核的数量存储数据的硬盘数量及负载模式,不确定时将其设置为可用的CPU内核数(设置为“auto ...

  3. SQL实现如何计算项目进度总共天数情况、已经施工天数情况、以及施工进度百分比

    SELECT DATEDIFF(DAY,e.StartDate,e.EndDate)as totaldays, (SELECT COUNT(TaskID) from ConstructionManag ...

  4. socket的原理和实验

    1.socket原理 根据连接启动的方式以及本地套接字要连接的目标,套接字之间的连接过程可以分为三个步骤:服务器监听,客户端请求,连接确认. (1)服务器监听:是服务器端套接字并不定位具体的客户端套接 ...

  5. Java多线程编程的常见陷阱

    .在构造函数中启动线程 我在很多代码中都看到这样的问题,在构造函数中启动一个线程,类似这样: public class A{ public A(){ ; ; this.thread=new MyThr ...

  6. Rsync使用方法

    Rsync是一款开源.快速.多功能.可实现全量及增量的本地或者远程数据同步的优秀工具.并且支持多系统平台运行.Rsync具有本地与远程两台主机之间的数据快速复制同步镜像.远程备份等功能,该功能类似sc ...

  7. Spark大型电商项目实战-及其改良(4) 单独运行程序发现的问题

    之前的运行结果比对发现,有1个函数的作用在2个job里面是相同的,但是对应的计算时间却差太远 于是把4个job分开运行.虽说使用的数据不同,但是生成数据的生成器是相同的,数据排布差距不大,数据量也是相 ...

  8. ORA-28002密码失效问题解决

    问题:提示ORA-28002解决: 第1种方法:数据库级别,需要重启查看过期时间: sql>SELECT * FROM dba_profiles WHERE profile='DEFAULT' ...

  9. 网易cetus数据库中间件安装-读写分离版本

    安装前提:1.数据库主从关系要做好:2.授权用户登录要做好:3.mysql最大连接数设置好,不然会报连接错误:4.版本最好是5.6以上. 1.安装依赖 yum install cmake gcc gl ...

  10. [c/c++] programming之路(26)、结构体

    一.初始化字符串 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> #include&l ...