vue的路由配置文件(routers.js),一般使用import引入的写法,当项目打包时路由里的所有component都会打包在一个js中,在项目刚进入首页的时候,就会加载所有的组件,所以导致首页加载较慢,而用require会将component分别打包成不同的js,按需加载,访问此路由时才会加载这个js,所以就避免进入首页时加载内容过多。

require: 运行时调用,理论上可以运用在代码的任何地方,import:编译时调用,必须放在文件开头

示例:

import写法:

import userCenter from '@/page/usercenter/index.vue'
export default [
{
path: '/userCenter',
name: 'user-center',
component: userCenter
},
{
path: '/news/detail',
name: 'news-detail',
component: () => import('@/page/news/detail.vue')
}
]

require写法:

export default [
{
path: '/userCenter',
name: 'user-center',
component: resolve => require(['@/page/userCenter/index.vue'], resolve)
},
{
path: '/news/detail',
name: 'news-detail',
component: () => resolve => require(['@/page/news/detail.vue'], resolve)
}
]

vue-router中,require代替import解决vue项目首页加载时间过久的问题的更多相关文章

  1. 彻底搞清楚javascript中的require、import和export(js模块加载规范的前世今生)

    为什么有模块概念 理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. 但是,Javascript不是一种模块化编程语言,在es6以前,它是不支持”类”(class),所以也 ...

  2. vue router的其他属性、 值的传递 、 懒加载

    路由的router-link标签有几个其他属性: 路由可以传递值(一般用作条目的id传递,之后用这个id从axios获取页面显示的数据 第一步: 定义路由以及值的属性名称(之后在跳转路由后页面里面获取 ...

  3. 解决一个项目里面加载两个同名不同版本的DLL的问题

    在config里面这样配置,可以加载不同版本的dll <runtime> <assemblyBinding xmlns="urn:schemas-microsoft-com ...

  4. Vue router中携带参数与获取参数

    Vue router中携带参数与获取参数 携带参数 query方式,就是?+&结构,例如/login?id=1 <router-link :to="{ name:'login' ...

  5. vue-router路由懒加载(解决vue项目首次加载慢)

    懒加载:----------------------------------------------------? 也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载? 像vue这种单 ...

  6. Vue 网站首页加载优化

    Vue 网站首页加载优化 本篇主要讲解 Vue项目打包后 vendor.js 文件很大 如何对它进行优化 以及开启Vue的压缩 和 nginx gzip 压缩的使用, 其他就是对接口优化等  1. v ...

  7. 如何对vue项目进行优化,加快首页加载速度

    上个月上线了一个vue小项目,刚做完项目,打包上线之后,传到服务器上发现首页加载巨慢. 由于开发时间比较紧,我想着怎么快怎么来,因而在开发过程中没考虑过优化性能问题,酿成最后在带宽5M的情况下页面加载 ...

  8. vue第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期)

    第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期) #课程目标 掌握安装 vue-cli 命令行工具的方法,掌握使用命令行在本地搭建开发环境,使用命令行 ...

  9. Prism框架中加载类库中时其中第三方类dll提示无法加载程序集

    Prism框架是采用一种依赖注入的方式动态加载程序集,能够在程序需要加载的时候将程序集注入到里面去,实现程序的热插拔效果,而且采用这种框架能够让我们进行一个大项目的独立开发,在最近的一个项目中在独立开 ...

随机推荐

  1. spark算子篇-aggregate 系列

    aggregate aggregate 是比较常用的 行动 操作,不是很好懂,这里做个解释. aggregate(zeroValue, seqOp, combOp) zeroValue 是一个初始值, ...

  2. CentOS7 安装ffmpeg

    安装EPEL Release,因为安装需要使用其他的repo源,所以需要EPEL支持:yum install -y epel-release#如果出现缺少Code提示,可以: sudo rpm --i ...

  3. Adam作者大革新, 联合Hinton等人推出全新优化方法Lookahead

    Adam作者大革新, 联合Hinton等人推出全新优化方法Lookahead   参与:思源.路.泽南 快来试试 Lookahead 最优化方法啊,调参少.收敛好.速度还快,大牛用了都说好. 最优化方 ...

  4. java不同包中protected修饰的属性和方法调用方法

    protected修饰的静态属性和方法的调用方式1:直接类名调用 2:实例化父类对象进行调用 3:实例化子类对象进行调用 protected修饰的非静态属性和方法的调用方式:1:实例化子类对象进行调用 ...

  5. Windows账户管理

    windows账户管理 最近部署人员给我们提了一个需求,就是希望简化部署过程. 为了能够远程桌面控制终端电脑,他们需要为每台终端设置进行一些设置,例如创建用户名和密码,开启允许 远程桌面设置,以及开机 ...

  6. C# 面向对象8 值类型和引用类型

    值类型和引用类型 概念 示意图: 1.值类型,在栈中开辟一块空间,存储 2.引用类型,在堆中开辟一块空间,存储数据,然在栈中开辟一块空间存储堆中的数据的地址

  7. Docker国内Yum源和国内镜像仓库

    Docker国内Yum源和国内镜像仓库 2018年05月29日 :: nklinsirui 阅读数 6295更多 分类专栏: Docker 版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa ...

  8. 常用Java字段的正则校验

    正则表达式: 单个字符的匹配规则如下: 多个字符的匹配规则如下: 复杂匹配规则主要有: 常用正则表达式校验规则: 一.校验数字的表达式 1.数字:^[0-9]*$ 2.n位的数字:^\d{n}$ 3. ...

  9. O020、理解 Glance

    参考https://www.cnblogs.com/CloudMan6/p/5384923.html   OpenStack 由 Glance 提供 Image 服务.   理解 Glance    ...

  10. Flask与微信小程序登录(后端)

    开发微信小程序时,接入小程序的授权登录可以快速实现用户注册登录的步骤,是快速建立用户体系的重要一步.这篇文章将介绍 python + flask + 微信小程序实现用户快速注册登录方案(本文主要进行后 ...