vue-router懒加载的3种方式汇总

2024-12-20 00:56:24

未使用懒加载

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@components/HelloWorld';
Vue.use(Router);
export default new Router({
routes:[
	{path:'./',
	name:'HelloWorld',
	component:HelloWorld
	}
]
})

vue异步组件

component:resolve=>{reuqire([‘需要加载的路由地址']),resolve)

import Vue from 'vue';
import Router from 'vue-router';
const HelloWorld=resolve=>{require(["@/components/HelloWorld"],resolve}
Vue.use(Router);
export default new Router({
routes:[
	{path:'./',
	name:'HelloWorld',
	component:HelloWorld
	}
]
})

ES6的import()

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld=()=>import('@/components/HelloWorld');
Vue.use('Router')
export default new Router({
	routes:[{
	{path:'./',
	name:'HelloWorld',
	component:HelloWorld
	}
	}]
})

webpack的require.ensure()

require.ensure可实现按需加载资源，包括js,css等。他会给里面require的文件单独打包，不会和主文件打包在一起。

第一个参数是数组，表明第二个参数里需要依赖的模块，这些会提前加载。

第二个是回调函数,在这个回调函数里面require的文件会被单独打包成一个chunk,不会和主文件打包在一起，这样就生成了两个chunk,第一次加载时只加载主文件。

第三个参数是错误回调。

第四个参数是单独打包的chunk的文件名

import Vue from 'vue';
import Router from 'vue-router';
const HelloWorld=resolve=>{
		require.ensure(['@/components/HelloWorld'],()=>{
			resolve(require('@/components/HelloWorld'))
		})
	}
Vue.use('Router')
export default new Router({
	routes:[{
	{path:'./',
	name:'HelloWorld',
	component:HelloWorld
	}
	}]
})

总结

到此这篇关于vue-router懒加载的3种方式的文章就介绍到这了,更多相关vue-router懒加载内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue2笔记 — vue-router路由懒加载的实现

在Web应用程序中,系统的瓶颈常在于系统的响应速度.如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也因此会大打折扣.因此,提高系统响应速度,是非常重要的. 懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用. 用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某
vue-router路由懒加载和权限控制详解

vue-router路由懒加载和权限控制,今天刚好搞了一个基于node token验证的小demo 所以下面介绍下,路由懒加载 1.为什么要使用路由懒加载呢用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效 2.用法 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) e
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题

用过vue-router都知道它可以实现模块js的懒加载,即只有当需要时才去加载对应模块的js脚本文件,以加速主页的显示.比如只有第一次用户点击某个"用户信息"按钮或菜单时,才下载"用户信息"这个模块的js组件. 懒加载的实现,依赖与webpack下AMD模式require函数的功能.webpack会将异步require的文件生成一个独立的js文件,调用时异步下载这个js且在完成后再执行它.开发项目中实现的关键代码是: const basicInfo = { pat
vue-router路由懒加载的实现（解决vue项目首次加载慢）

在Web应用程序中,系统的瓶颈常在于系统的响应速度.如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也因此会大打折扣.因此,提高系统响应速度,是非常重要的. 懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用. 也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载? 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的
vue-router懒加载速度缓慢问题及解决方法

懒加载:也叫延迟加载,即在需要的时候进行加载,随用随载. 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时. 简单的说就是:进入首页不用一次加载过多资源造成用时过长!!! 懒加载的方式: import Vue from 'vue' import
详解vue2路由vue-router配置（懒加载）

vue路由配置以及按需加载模块配置 1.首先在component文件目录下写俩组件: First.vue: <template> <div>我是第一个页面</div> </template> <script> export default { name: 'first', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <!-- Add &
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题

懒加载:也叫延迟加载,即在需要的时候进行加载,随用随载. 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时. 简单的说就是:进入首页不用一次加载过多资源造成用时过长!!! 懒加载的方式: import Vue from 'vue' import
vue-router懒加载的3种方式汇总

未使用懒加载 import Vue from 'vue'; import Router from 'vue-router'; import HelloWorld from '@components/HelloWorld'; Vue.use(Router); export default new Router({ routes:[ {path:'./', name:'HelloWorld', component:HelloWorld } ] }) vue异步组件 component:resolve
浅谈解决Hibernate懒加载的4种方式

本文总结了我在学习hibernate的过程中,解决hibernate懒加载问题的四种方式. 所谓懒加载(lazy)就是延时加载,延迟加载. 什么时候用懒加载呢,我只能回答要用懒加载的时候就用懒加载. 至于为什么要用懒加载呢,就是当我们要访问的数据量过大时,明显用缓存不太合适,因为内存容量有限,为了减少并发量,减少系统资源的消耗,我们让数据在需要的时候才进行加载,这时我们就用到了懒加载. 例如,有一个对象是Employee,还有一个对象是Department.显然,对于Employee相对Depa
Android开发之Fragment懒加载的几种方式及性能对比

目录 1. Support时代的懒加载 2. AndrodX时代的懒加载 3. ViewPager2时代的懒加载 4. ViewPage和ViewPager2的性能对比 Android开发中ViewPager+Fragment的懒加载 TabLayout+ViewPager+Fragment是我们开发常用的组合.ViewPager的默认机制就是把全部的Fragment都加载出来,而为了保障一些用户体验,我们使用懒加载的Fragment,就是让我们再用户可见这个Fragment之后才处理业务逻辑.
jquery实现异步加载图片（懒加载图片一种方式）

首先将插件在jq后面引入 (function($) { // alert($.fn.scrollLoading); $.fn.scrollLoading = function(options) { var defaults = { attr: "data-url" }; var params = $.extend({}, defaults, options || {}); params.cache = []; $(this).each(function() { var node = t
vue实现路由懒加载的3种方法示例

前言路由懒加载在访问页面的时候非常重要,能够提高首页加载速度,避免出现加载时候白页,如果没有懒加载,webpack打包后的文件会非常大. import按需加载(常用) vue异步组件 webpack提供的require.ensure() 1.import按需加载(常用) 允许将不同的组件打包到一个异步块中,需指定了相同的webpackChunkName. 把组件按组分块 const A = () => import(/* webpackChunkName: "group-A"
vue 路由懒加载中给 Webpack Chunks 命名的方法

最早的路由定义方式 import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import About from '../views/About.vue' import Login from '../views/Login.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', compo
Vue通过懒加载提升页面响应速度

概述项目的目的是要通过数据透视表和Excel公式来分析公司的各项运营数据.不过在集成后,在开发环境页面运行流畅,大量数据加载处理也很快.但是发布生产后,在用户每次打开页面时,加载时间上相较开发阶段均有所降低,经过排查速度变慢是由于发布包的vendor.js变大所导致的,这个文件加载每次都需300毫秒左右,由于小的Vue项目并没有做模块划分,所以所有的代码都直接打包到了vendor中,在集成了新功能后,发布包也随之变大了. 既然找到了原因,就开始着手优化,在前端对于需加载较大资源时,一般都采用懒
vue 路由懒加载详情

目录 1.什么是路由懒加载 2.路由懒加载的使用 1.什么是路由懒加载官方的解释: 当打包构建应用时,JavaScript 包会变得非常大,影响页面加载. 如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 官方想表达的意思首先,我们知道路由中通常会定义很多不同的页面这个页面最后会被打包到哪里呢?一般情况下是会放在一个js文件中但是页面这么多,所有文件都放到一个js文件中,必然会造成这个页面会非常的大如果我们一次性从服务器中请求下
点评js异步加载的4种方式

js异步加载的4种方式,点评开始. 方案1:$(document).ready <!DOCTYPE html> <html> <head> <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> <script type="text/javascript"&g
详解JS异步加载的三种方式

一:同步加载我们平时使用的最多的一种方式. <script src="http://yourdomain.com/script.js"></script> <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作.所以默认同步执行才是安全的.但这样如果js中有输

vue-router懒加载的3种方式汇总

相关推荐

随机推荐