vue-router中,require代替import解决vue项目首页加载时间过久的问题
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项目首页加载时间过久的问题的更多相关文章
- 彻底搞清楚javascript中的require、import和export(js模块加载规范的前世今生)
为什么有模块概念 理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. 但是,Javascript不是一种模块化编程语言,在es6以前,它是不支持”类”(class),所以也 ...
- vue router的其他属性、 值的传递 、 懒加载
路由的router-link标签有几个其他属性: 路由可以传递值(一般用作条目的id传递,之后用这个id从axios获取页面显示的数据 第一步: 定义路由以及值的属性名称(之后在跳转路由后页面里面获取 ...
- 解决一个项目里面加载两个同名不同版本的DLL的问题
在config里面这样配置,可以加载不同版本的dll <runtime> <assemblyBinding xmlns="urn:schemas-microsoft-com ...
- Vue router中携带参数与获取参数
Vue router中携带参数与获取参数 携带参数 query方式,就是?+&结构,例如/login?id=1 <router-link :to="{ name:'login' ...
- vue-router路由懒加载(解决vue项目首次加载慢)
懒加载:----------------------------------------------------? 也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载? 像vue这种单 ...
- Vue 网站首页加载优化
Vue 网站首页加载优化 本篇主要讲解 Vue项目打包后 vendor.js 文件很大 如何对它进行优化 以及开启Vue的压缩 和 nginx gzip 压缩的使用, 其他就是对接口优化等 1. v ...
- 如何对vue项目进行优化,加快首页加载速度
上个月上线了一个vue小项目,刚做完项目,打包上线之后,传到服务器上发现首页加载巨慢. 由于开发时间比较紧,我想着怎么快怎么来,因而在开发过程中没考虑过优化性能问题,酿成最后在带宽5M的情况下页面加载 ...
- vue第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期)
第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期) #课程目标 掌握安装 vue-cli 命令行工具的方法,掌握使用命令行在本地搭建开发环境,使用命令行 ...
- Prism框架中加载类库中时其中第三方类dll提示无法加载程序集
Prism框架是采用一种依赖注入的方式动态加载程序集,能够在程序需要加载的时候将程序集注入到里面去,实现程序的热插拔效果,而且采用这种框架能够让我们进行一个大项目的独立开发,在最近的一个项目中在独立开 ...
随机推荐
- python面向对象的多态-类相关内置函数-类内置魔法函数-迭代器协议-上下文管理-04
多态 一种事物具备不同的形态 例如:水 --> 固态.液态.气态 多态:# 多个不同对象可以相应同一个对象,产生不同的结果 首先强调,多态不是一种特殊的语法,而是一种状态,特性(多个不同对象可以 ...
- 模块之re模块 正则表达式
正则表达式,正则表达式在处理字符串上有先天的优势,尤其大数量的字符串.先来记一个网站,此网站功能就是关于正则表达式方面的应用http://tool.chinaz.com/regex/ 单纯的正则表达式 ...
- Codeforces 1228D. Complete Tripartite
传送门 不妨设 $1$ 号点在集合 $1$ 里 那么对于其他点,有且只有所有和 $1$ 没有边的点都在集合 $1$ 里 考虑不在集合 $1$ 的任意一个点 $x$ ,不妨设它在集合 $2$ 里 那么所 ...
- JS基础_js编写位置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue中map组件
分享一个比较好用的基于百度地图的vue组件.也有react版本的,可以自行选择. 分享链接:点击
- 工作中apache 403的一个小问题
最近在虚拟机上安装hadoop, 需要设备本地的网络源,所以启用了apache. 由于需要,首先修改了家目录的位置 指向/opt/www 然后修改家目录的配置文件 修改完成之后重启服务,访问目录 ...
- C++ Concurrency In Action 一些重点
全部来自于gitbook C++并发编程(中文版) 需要对一个还未销毁的std::thread对象使用join()或detach().如果想要分离一个线程,可以在线程启动后,直接使用detach() ...
- shell 获取结果中的第n列,第n行
ls -l | awk '{print $5}' | sed -n '2p' awk 是很实用的文本处理命令,print 到后带的是你要获取第几列,sed -n 是指定第几行.
- 个人总结的J2EE目前知道的涵盖面,从大方向入手,多写单元测试,加强基础
JEE Development process: java SE 普通语法,,异常处理,数据结构,循环,面向对象,泛型, 属性,反射,多线程,线程池,锁, lambada,异步编程,并发 框架spri ...
- 变分推断到变分自编码器(VAE)
EM算法 EM算法是含隐变量图模型的常用参数估计方法,通过迭代的方法来最大化边际似然. 带隐变量的贝叶斯网络 给定N 个训练样本D={x(n)},其对数似然函数为: 通过最大化整个训练集的对数边际似然 ...