一、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. Windows 10设置桌面图标间距、窗口的背景颜色、选中文字的背景颜色

    Windows 10取消了“高级外观设置”(或者叫“窗口颜色和外观”设置),想调整一些参数只能进注册表了. 修改后可能需要注销或重启才能生效. 按Win+R,然后输入regedit进入注册表编辑器. ...

  2. HTTP协议 keep-alive连接 与 BS(firefox-thttpd)实验

    什么是 keep-alive 连接 https://en.wikipedia.org/wiki/HTTP_persistent_connection HTTP persistent connectio ...

  3. C# JSON 序列化和反序列化——JavaScriptSerializer实现

    一. JavaScriptSerializer 类由异步通信层内部使用,用于序列化和反序列化在浏览器和 Web 服务器之间传递的数据.您无法访问序列化程序的此实例.但是,此类公开了公共 API.因此, ...

  4. OpenJudge 2979 陪审团的人选 / Poj 1015 Jury Compromise

    1.链接地址: http://bailian.openjudge.cn/practice/2979 http://poj.org/problem?id=1015 2.题目: 总Time Limit: ...

  5. Python第二十六天 python装饰器

    Python第二十六天 python装饰器 装饰器Python 2.4 开始提供了装饰器( decorator ),装饰器作为修改函数的一种便捷方式,为工程师编写程序提供了便利性和灵活性装饰器本质上就 ...

  6. JSP内置对象page/pageContext/Config/Exception

    Config对象 config对象实是在一个Servlet初始化时,JSP引擎向它传递信息用的,此信息包括Servlet初始化时所要用到的参数(通过属性名和属性值构成)以及服务器的有关信息(通过传递一 ...

  7. Qt & VS2013 报错:There's no Qt version assigned to this project for platform Win32

    如果你想了解关于Qt与VS2013开发环境搭建,可以至此翻页. 这里主要分享环境已搭建成功,在构建项目时遇到的报错解决方案. [1]Qt 与 VS2013开发环境构建时报错 报错界面如下: 注意:对话 ...

  8. c# 之 System.Type.GetType()与Object.GetType()与typeof比较

    Object.GetType()与typeof的区别 //运算符,获得某一类型的 System.Type 对象. Type t = typeof(int); //方法,获取当前实例的类型. ; Con ...

  9. CentOS7系列--2.2CentOS7中配置SSH服务

    CentOS7配置SSH服务 1. SSH配置 1.1. 使用SSH服务更加安全 [root@centos7 ~]# vi /etc/ssh/sshd_config 设置如下 PermitRootLo ...

  10. vs2013+python+ cocos2d-x-3.3rc0环境搭建

    1.vs2013安装一路next,安装即可,时间1~2个小时 2.解压cocos2d-x-3.3rc0   build文件夹里会有名为  cocos2d-win32.vc2012的sln文件  打开  ...