-
2022-04-07 03:59:52
(1)vue异步组件-路由懒加载
component:resolve=>(['需要加载的路由的地址',resolve])
(2)import 实现路由懒加载 [ 推荐 ]
const HelloWorld = ()=>import('需要加载的模块地址')
1.路由懒加载
作用:
首屏组件加载速度更快一些,解决白屏问题;更好的客户体验;
也是性能优化的一种方式;
什么是路由懒加载?
懒加载简单来说就是延迟加载或按需加载,就是用到的时候再进行加载。
2.使用-详情
- - 2.1.异步组件-路由懒加载
- - - 2.1.1.使用方法
语法:component:resolve=>(require(['需要加载的路由的地址']),resolve)
import Vue from 'vue' import Router from 'vue-router' /* 此处省去之前导入的HelloWorld模块 */ Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: resolve=>(require(["@/components/HelloWorld"],resolve)) } ] })
- - - 2.1.2. import方法:
语法:const HelloWorld = ()=>import('需要加载的模块地址')
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: ()=>import("@/components/HelloWorld") } ] })
- - - 2.1.3.webpack提供的require.ensure( )
{ path: '/home', name: 'Home', component: r => require.ensure([],() => r(require('@/components/HelloWorld')), 'home') }
- - 2.2.组件懒加载
- - - 2.2.1.异步方法
<template> <div class="hello"> <One-com></One-com> </div> </template> <script> export default { components:{ "One-com":resolve=>(['./one'],resolve) }, data () { return { msg: 'Welcome to Your Vue.js App' } } } </script>
- - - 2.2.2. import方法
<template> <div class="hello"> <One-com></One-com> </div> </template> <script> export default { components:{ "One-com": ()=>import("./one"); }, data () { return { msg: 'Welcome to Your Vue.js App' } } } </script>
[1] 参考文章
更多相关内容 -
不知道vue路由懒加载,进来看看吧
2021-01-08 10:20:13一、是什么 路由:即url,vue中一个url对应一个组件 懒加载:用到时,再加载 二、为什么有 ...当打包构建应用时,js包会变得特别大,影响页面加载 可以把不同路由对应的组件分割成不同...五、路由懒加载效果 懒加载方式 -
vue 路由懒加载
2022-04-27 11:01:251. 路由懒加载如何实现 当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就会更加高效 当前,我们使用...1. 路由懒加载如何实现
当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就会更加高效
当前,我们使用如下方式导入组件
import Login from '../views/Login
打包后,这些组件都会被打包到一个.s文件中,css 代码会打包到 css 文件中
访问应用时,就会下载这js文件和对应的css文件
随着代码的增多,文件的体积也会越来越大
文件中包含了所有的用户组件的js以及css代码,但用户可能根本不会浏览器到某些页面,也就是说根本不需要渲染某些组件,所以vue-router 提供了一种路由懒加载机制,就是当某个路由规则匹配时,才会去加载下载并加载某个组件,此时可以提升首页的渲染速度
路由懒加载实现的基础是组件引入方式的变化,需要使用 如下方式引入组件才可以
const Login = () => import('../views/Login')
这是原来的引入方式
import Login from '../views/Login
对比原来的引入方式,就能发现不同点:现在的 Login 是个函数,当路由规则匹配上,就会执行这个函数,才去加载此组件
{ path: '/login', name: 'login', component: Login // 此时的 login 是函数 },
将所有组件的引入方式都像上面这样修改后,重新打包,由原来的一个js文件拆分成了体积较小的多个js文件
现在,我们来请求登录页面,请求多个小文件
此时再访问用户列表页面,会动态加载新的js和css文件,其他页面也都是这种情况
这种情况,其实是通过增加网络请求次数换取了每次请求包的缩小,可以明显提升首页加载速度
此时,看看这张图,发现再 3G Slow 网速下,加载速度由原来的 36秒多变成了11秒多点,在正常的4G网速下,达到了0.67秒
2.把组件按组分块
上面,我们是将每个组件都分别打包了,很多时候是没有必要的,可以将多个组件打包到一个包中
const UserDetails = () => import(/* webpackChunkName: "group-user" */ './UserDetails.vue') const UserDashboard = () => import(/* webpackChunkName: "group-user" */ './UserDashboard.vue') const UserProfileEdit = () => import(/* webpackChunkName: "group-user" */ './UserProfileEdit.vue')
下面修改上面的代码,进行分组打包
// 1、将登录、用户首页模块打包到一组中,组名:login-home const Login = () => import(/* webpackChunkName: "login-home" */ '../views/Login') const Home = () => import(/* webpackChunkName: "login-home" */ '../views/Home') // 2、将用户模块、权限和角色打包到一组中 const Users = () => import(/* webpackChunkName: "user-rights" */ '../views/Users') const Roles = () => import(/* webpackChunkName: "user-rights" */ '../views/Roles') const Rights = () => import(/* webpackChunkName: "user-rights" */ '../views/Rights') // 3、将商品分类、商品参数、商品列表、添加商品打包到一组中 const GoodsList = () => import(/* webpackChunkName: "goods" */ '../views/goods/GoodsList') const GoodsAdd = () => import(/* webpackChunkName: "goods */ '../views/goods/GoodsAdd') const Category = () => import(/* webpackChunkName: "goods */ '../views/goods/Category') const Params = () => import(/* webpackChunkName: "goods */ '../views/goods/Params')
重新打包
此时,运行程序,打开各个页面,通过网络查看资源的加载情况,如打开用户列表
访问商品列表
-
vue路由懒加载的实现方法
2020-08-27 21:10:14本篇文章主要介绍了vue路由懒加载的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 -
vue路由懒加载
2022-03-25 12:13:41正常情况下的路由加载 import Home from '@/components/home.vue' const router = new VueRouter({ routes: [ { path: '/home', component: Home } ] }) 下面介绍路由懒加载的3种方式: 1、方案一(常用):使用...正常情况下的路由加载
import Home from '@/components/home.vue' const router = new VueRouter({ routes: [ { path: '/home', component: Home } ] })
下面介绍路由懒加载的3种方式:
1、方案一(常用):使用箭头函数+import动态加载
const Home = () => import('@/components/home.vue') const router = new VueRouter({ routes: [ { path: '/home', component: Home } ] })
2、方案二:使用箭头函数+require动态加载
const router = new Router({ routes: [ { path: '/home', component: resolve => require(['@/components/home'], resolve) } ] })
3、方案三:使用webpack的require.ensure技术,也可以实现按需加载。 这种情况下,多个路由指定相同的chunkName,会合并打包成一个js文件。
// r就是resolve const Home = r => require.ensure([], () => r(require('@/components/home')), 'home'); // 路由也是正常的写法 这种是官方推荐的写的 按模块划分懒加载 const router = new Router({ routes: [ { path: '/home', component: Home, name: 'home' } ] }))
-
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2020-12-11 12:44:50在Web应用程序中,系统的瓶颈常在于系统的响应...像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loa -
Vue路由懒加载
2021-05-31 17:55:30路由懒加载的主要原理就是原本的Vue模块是全部导入在一起的打包文件,运行后用户查看相关模块显示的内容时会将整个打包的文件引入而后在其中查找对应的模块然后才将其呈现给用户。这样会使得在打包文件中查找对应...懒加载原理:
路由懒加载的主要原理就是原本的Vue模块是全部导入在一起的打包文件,运行后用户查看相关模块显示的内容时
会将整个打包的文件引入而后在其中查找对应的模块然后才将其呈现给用户。这样会使得在打包文件中查找对应模块时
在浏览器中可能会出现短暂的空白页,从而降低用户体验。而路由懒加载是将各个模块分开打包,在用户查看下相关模
块内容时就直接引入相关模块的打包文件然后进行显示,从而有效的解决了浏览器可能出现短暂时间空白页的情况。具体操作如下例
//原本将所有模块全部导入 // import home from '../components/home'; // import about from '../components/about'; // import user from '../components/user'; //路由懒加载方式,在用到对应的模块时才会执行导入 const home = () => import ('../components/home'); const about = () => import ('../components/about'); const user = () => import ('../components/user'); const homeNews = () => import ('../components/homeNews'); const homeMessage = () => import ('../components/homeMessage') //通过Vue.use(插件),安装插件 Vue.use(VueRouter) //创建VueRouter对象 const routes = [{ path: '', //重定向设置,默认显示的hash为home redirect: '/home' }, { path: '/home', component: home }, { path: '/about', component: about }, { path: '/user/:userId', component: user } ]
-
vue实现路由懒加载及组件懒加载的方式
2020-10-16 20:22:16懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载。这篇文章主要介绍了vue路由懒加载及组件懒加载 ,需要的朋友可以参考下 -
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020-10-15 09:44:03主要介绍了在 vue 路由懒加载中给 Webpack Chunks 命名的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 -
vue2笔记 — vue-router路由懒加载的实现
2020-12-09 16:10:13用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效,实现代码如下: import Vue ... -
Vue路由懒加载和组件懒加载
2022-02-22 06:33:44常用的懒加载方式有两种:vue异步组件 和 ES的import加载 (1)路由懒加载 异步组件懒加载: component:resolve=>(require(['需要加载的路由的地址']),resolve) import Vue from 'vue' import Router from '... -
实现vue路由懒加载遇到的问题.zip
2019-10-25 10:13:12实现vue路由懒加载遇到的问题 https://blog.csdn.net/qq_36413371/article/details/102581369 -
vue-router路由懒加载和权限控制详解
2020-08-28 13:42:55主要介绍了vue-router路由懒加载和权限控制的相关资料 -
Vue路由懒加载.md
2021-01-14 10:08:31Vue路由懒加载.md -
性能优化---vue路由懒加载和异步组件
2021-10-03 15:03:061.路由懒加载 整个网页默认是刚打开就去加载所有页面,路由懒加载就是只加载你当前点击的那个模块。 实现方式有: 1.require:加载组件。 component: resolve => require(["@/view/system/login/Login"], resolve... -
vue路由懒加载和组件懒加载
2020-10-21 10:24:21vue路由懒加载和组件懒加载其实原理一样 常用的懒加载方式有两种:即使用vue异步组件 和 ES中的import 路由懒加载 ES 提出的import方法, 方法如下:const HelloWorld = ()=>import('需要加载的模块地址') ... -
Vue 路由懒加载和动态加载
2020-12-27 23:26:58什么是路由懒加载? 不同组件有不同的 js 文件,当访问相应组件的时候才会加载其相应的js文件,而不是在首页统一加载,这样就优化了首页渲染的时间,提高页面首次渲染时间; 路由 懒加载 具体的实现: var router = ... -
vue路由懒加载之分包 分模块加载
2020-12-21 15:29:32路由懒加载 分包 如下代码, Home无任何处理,直接引入 Ceshi 运用官方推荐的路由懒加载,优化首页加载的时间 About在路由懒加载的基础上,进行了分包,webpackChunkName: “name”,注意该注释,name一样的会被... -
Vue路由懒加载报错问题解决
2020-01-06 21:14:08使用Vue路由懒加载时报了以下错误: 经过百度发现,出现该问题的原因是: import 属于异步引用组件,需要特殊的babel-loader处理 解决办法: 安装babel用来编译import异步引用方法的模块 babel-plugin-syntax-... -
Vue 路由懒加载——介绍以及遇到的问题
2021-03-20 14:09:38使用路由懒加载的原因 当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。 实现路由懒... -
vue路由懒加载的两种方式
2020-07-22 09:52:03这样就是vue路由懒加载。 2、常用的懒加载方式有两种:即使用ES中的import和vue异步组件 2.1 未使用懒加载 import HelloWorld from '@/components/HelloWorld' export default new Router({ routes: [ { p... -
vue 路由懒加载,使用 import 无法处理
2019-10-18 16:00:17问题原因: import 属于异步引用组件,需要特殊的 babel-loader 处理 解决: npm i babel-plugin-syntax-dynamic-import -D 在 .bablerc 中引入 syntax-dynamic-import 插件 { "presets": ["env"], ... -
vue路由懒加载的3种方法
2020-08-31 15:11:30路由懒加载在访问页面的时候非常重要,能够提高首页加载速度,避免出现加载时候白页,如果没有懒加载,webpack打包后的文件会非常大。 import按需加载(常用) vue异步组件 webpack提供的require.ensure() 1、import... -
vue实现路由懒加载的3种方法示例
2020-11-19 16:17:49路由懒加载在访问页面的时候非常重要,能够提高首页加载速度,避免出现加载时候白页,如果没有懒加载,webpack打包后的文件会非常大。 import按需加载(常用) vue异步组件 webpack提供的require.ensure() 1、... -
vue路由懒加载resolve方式与import方式
2021-03-15 10:51:041.未使用懒加载的时候vue中的路由代码: //每一个组件都会被加载进来 ,打开首页的时候全部都会加载 import Vue from "vue" import Router from "vue-router" import HelloWorld from "@/components/HelloWorld.vue -
Vue 实现路由懒加载
2022-03-29 20:43:51路由懒加载 未用懒加载,vue中路由代码如下 import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' Vue.use(Router) export default new Router({ routes: ...