vue--按需加载的3种方式(解决网页首次加载速度慢的问题)
一、vue的异步组件加载
使用异步组件加载,打包的时候会将每个组件分开打包到不同的js文件中:
{path: '/index', name: 'index',
meta:{
title:'首页',
requireAuth:true
},
/*这是异步加载组件,当你访问时 ,才会加载 ,vue-router中,require代替import解决vue项目首页加载时间过久的问题*/
component: resolve => {
clearTimeout(_pageTimer);
//这里是设置定时器,超过时间,如果没有被停止,则输出“网络加载超时”
_pageTimer = setTimeout(function () {
tipsCallback();//作用输出字符串提示
},timeout);
require(['@/page/index/index.vue'], function (component) {
//在组件加载完后,如果定时器存在,则清除定时器。
if(_pageTimer){clearTimeout(_pageTimer);}
resolve(component)
})
}},
二、ES新提案:import()——动态加载ES模块
官方推荐使用这种方式,注意如果你希望在Vue router 的路由组件中使用这种语法的话,你必须使用 Vue Router 2.4.0+ 版本。
{
path: '/index',
component: () => import('@/page/index/index'),
name: '首页'
},
三、webpack提供的require.ensure()
语法:require.ensure(dependencies: String[], callback: function(require), chunkName: String)
1、dependencies:依赖
这是一个字符串数组,通过这个参数,在所有的回调函数的代码被执行前,我们可以将所有需要用到的模块进行声明。
2、callback:回调
当所有的依赖都加载完成后,webpack会执行这个回调函数。require 对象的一个实现会作为一个参数传递给这个回调函数。因此,我们可以进一步 require()
依赖和其它模块提供下一步的执行。
3、chunkName:chunk名称
chunkName 是提供给这个特定的 require.ensure()
的 chunk 的名称。通过提供 require.ensure()
不同执行点相同的名称,我们可以保证所有的依赖都会一起放进相同的 文件束(bundle)。
{ path: '/index', component: r => require.ensure([], () => r(require('@/pages/index/index')), 'index'), meta: { title: '首页' } }
这里只是做记录使用。
vue--按需加载的3种方式(解决网页首次加载速度慢的问题)的更多相关文章
- route按需加载的3种方式:vue异步组件、es提案的import()、webpack的require.ensure()
1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件.举例如下: { path: '/promisedemo' ...
- HBase协处理器加载的三种方式
本文主要给大家罗列了HBase协处理器加载的三种方式:Shell加载(动态).Api加载(动态).配置文件加载(静态).其中静态加载方式需要重启HBase. 我们假设我们已经有一个现成的需要加载的协处 ...
- 点评js异步加载的4种方式
主要介绍了点评js异步加载的4种方式,帮助大家更全面的了解js异步加载方式,感兴趣的小伙伴们可以参考一下 js异步加载的4种方式,点评开始. <!DOCTYPE html> <htm ...
- vue动态绑定class的最常用几种方式
vue动态绑定class的最常用几种方式: 第一种:(最简单的绑定) 1.绑定单个class html部分: <div :class="{'active':isActive}&quo ...
- vue安装及创建项目的几种方式
原文地址:https://www.wjcms.net/archives/vue安装及创建项目的几种方式 VUE安装的方式 直接用 script标签 引入 对于制作原型或学习,你可以这样使用最新版本: ...
- vue 动态路由按需加载的三种方式
在Vue项目中,一般使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hell ...
- vuex存取token,http简单封装、模拟登入权限校验操作、路由懒加载的几种方式、vue单页设置title
1.config index.js下面的跨域代理设置: proxyTable: { '/api': { target: 'http://xxxx', //要访问的后端接口 changeOrigin: ...
- JS异步加载的三种方式
js加载的缺点:加载工具方法没必要阻塞文档,过得js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载,. 默认正常 ...
- cocos2d-x的lua脚本加载CocostudioUI两种方式
前言 当前版本使用的是quick cocos2dx lua 3.3.UI使用cocostudio编辑器1.6.0.我们在程序里面可以使用两种方式进行解析UI.开始的时候用的是quick的方法, 结果遇 ...
随机推荐
- 关于笨蛋式病毒创作(CMD式)C++
对于病毒创作,有好多种原因:有想装逼的,想盗取信息的...... 任何理由千奇百出,有的在下面评论出来. 对于病毒创作,我可是既会有不会,只会乱写,回头一看,全错了. 我今天写的这篇博客就是面向于 ...
- static关键字的一些使用
百度百科定义static关键字 通常情况下,类成员必须通过它的类的对象访问,但是可以创建这样一个成员,它能够被它自己使用,而不必引用特定的实例.在成员的声明前面加上关键字static(静态的)就能创建 ...
- Typora + picgo + Chevereto 优雅地上传图片
需求:由于经常使用typora写文章,但是配合picgo使用的sm.ms图床,github图床等,速度不稳定,因此我们想要利用自己的服务器搭建自己的图床,将自己文章的图片上传到自己的服务器中,优雅地写 ...
- Elasticsearch (1) 文档操作
本文介绍如何在Elasticsearch中对文档进行操作. 1.检查Elasticsearch及Kibana运行是否正常 在浏览器输入192.168.6.16:9200,有如下输出则说明Elastic ...
- ApacheCN 深度学习译文集 20201229 更新
新增了七个教程: TensorFlow 和 Keras 应用开发入门 零.前言 一.神经网络和深度学习简介 二.模型架构 三.模型评估和优化 四.产品化 TensorFlow 图像深度学习实用指南 零 ...
- 「CTSC2010」产品销售
「CTSC2010」产品销售 30pts的费用流都会吧... 100pts只要模拟费用流就行了,是不是很简单呀( 咕咕咕 令\(M_i\)表示\(i-1\to i\)的正向边,\(M_i^{'}\)表 ...
- Net6 DI源码分析Part5 在Kestrel内Di Scope生命周期是如何根据请求走的?
Net6 DI源码分析Part5 在Kestrel内Di Scope生命周期是如何根据请求走的? 在asp.net core中的DI生命周期有一个Scoped是根据请求走的,也就是说在处理一次请求时, ...
- (DDS)正弦波形发生器——幅值、频率、相位可调(一)
(DDS)正弦波形发生器--幅值.频率.相位可调 一.项目任务: 设计一个幅值.频率.相位均可调的正弦波发生器. 频率每次增加1kHz. 相位每次增加 2*PI/256 幅值每次增加两倍 二.文章内容 ...
- Sublime Text4 安装与配置记录
Sublime Text作为一款优质的Code编辑器,已更新至第4个版本,本文记录关于Sublime Text 4[版本4126]的安装.汉化,以及常用配置方法. 安装 访问官网下载安装包:https ...
- 微服务中的CAP原则
CAP原则:指的是在一个分布式系统中,Consistency(一致性). Availability(可用性).Partition tolerance(分区容错性),三个要素最多同时实现两点不可能同时实 ...