首页
题库
面试
求职
学习
竞赛
More+
所有博客
搜索面经/职位/试题/公司
搜索
我要招人
去企业版
登录 / 注册
首页
>
试题广场
>
说一说vue-router 实现懒加载的方法?
[问答题]
说一说vue-router 实现懒加载的方法?
添加笔记
求解答(0)
邀请回答
收藏(106)
分享
纠错
14个回答
添加回答
39
cmls
懒加载:不用到不加载
实现懒加载:import(ES6)require+resolve(Vue)
发表于 2022-06-27 13:30:15
回复(0)
25
乐扣乐扣
懒加载的核心思想是按需加载,也叫做异步加载:只有请求到该组件的时候,才会对该组件进行网络请求并加载。懒加载有利于解决页面首次请求资源过多,导致白屏时间长的问题。 vue-router的懒加载即通过箭头函数的写法导入组件如 const Login = ()=> import('../路径');
编辑于 2022-08-19 11:46:55
回复(0)
9
牛客663468082号
目前有三种方法: 1、利用Vue的异步组件和Webpack: const Home = require =>{ require(['../components/home.vue'],()=>{ resolve(require('../components/home.vue')); }) };2、AMD在1的基础上 const Home = require =>{ require(['../components/home.vue'],resolved); };3、ES6利用Webpack的chunk【推荐使用】 const Home = () =>import('../components/home.vue')
发表于 2022-05-25 16:18:19
回复(0)
3
自信的大白菜
1、import形式:component:() => import("./home.vue");
2、异步组件形式:component:resolve => (require(['./home.vue'], resolve));
2种方式实现懒加载作用主要是按需加载,不用到该路由,不加载组件,实现性能优化。
发表于 2023-02-14 17:29:56
回复(0)
1
yyshino
【概念】 对于SPA单页应用,当打包构建时,JavaScript包会变得非常大,影响页面加载速度,将不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这就是路由的懒加载。
【三种方法】
1. Vue的异步组件:Vue允许以一个工厂函数的方式定义你的组件,这个工厂函数会异步解析你的组件定义。Vue只有在这个组件需要被渲染的时候才会触发该工厂函数,且会把结果缓存起来供未来重渲染。
component:resolve => (require(['./home.vue'], resolve));
2. webpack提供的require.ensure:使用webpack的require.ensure,也可以实现按需加载,同样多个路由指定相同的chunkName也会合并打包成一个js文件。
component: resolve => require.ensure([], () => resolve(require("@/views/example1.vue")), "Example")
3. 动态import:在Webpack2中,可以使用动态import语法来定义代码分块点split point,官方也是推荐使用这种方法,如果使用的是Bable,需要添加syntax-dynamic-import插件, 才能使Babel可以正确的解析语法。
const Home = () =>import('../components/home.vue')
component: () => import("@/views/example.vue")
发表于 2023-01-10 21:57:22
回复(0)
1
牛客52893446号
component:() => import("../pages/LoginView.vue"), 这样导入组件使 组件在没有被用到时就不会加载
发表于 2022-11-02 10:53:51
回复(0)
0
影201805022336889
1. 作用/好处:可以让打包后的代码体积变小,会打包成多个.js文件, 并且会在访问到对应路由的时候去加载对应的js代码,可以加快页面打开速度 2. 怎么实现的: 定义路由的时候,用es6的import方式动态导入组件, webpack读到这种import的形式,编译的时候会用vue-loader将对应的.vue文件打包成单独的.js文件 vue-router访问对应路径的时候,就会加载对应的.js文件 3. 写法: component: ()=>import(../view/layout/home.vue)
发表于 2023-10-17 16:25:22
回复(0)
0
kumoko
1.const Home= () =>import(/* webpackChunkName: "Home" */ '../components/Home.vue') 2.const Home = resolve => require(['../components/Home.vue'], resolve) 懒加载按需加载,可以实现性能优化
发表于 2023-10-16 16:32:01
回复(0)
0
愿offer多多的放鸽子能手很谦虚
懒加载的核心是按需加载,也叫做异步加载:只有请求到该组件的时候,才会对该组件进行网络请求并加载。 懒加载作用:性能优化,不用到不加载。懒加载有利于解决页面首次请求资源过多,导致白屏时间长的问题。 vue-router实现懒加载的方式: 1.ES6的import方式:component: () => import ('./home.vue'); 2.异步组件加载方式:component: resolve => (require(['./home.vue'] , resolve));
发表于 2023-09-11 11:14:00
回复(0)
0
牛客981560665号
1、import形式:component:() => import("./home.vue"); 2、异步组件形式:component:resolve => (require(['./home.vue'], resolve)); 2种方式实现懒加载作用主要是按需加载,不用到该路由,不加载组件,实现性能优化。
发表于 2023-04-12 18:06:55
回复(0)
0
帅小🐠
懒加载:其实就是按需加载,只有需要该组件的时候,才会加载
发表于 2023-03-15 16:27:22
回复(0)
0
牛客833746224号
ES6的import:component:()=> {import ('../views/About.vue')};2、vue异步组件进行懒加载的方式:component:resolve => required(['../views/About.vue'],resolve);懒加载的作用,性能优化,使用的时候加载,不用的时候不加载。
发表于 2023-02-28 16:37:25
回复(0)
0
说等下个版本吧的小鲸鱼很安静
实现懒加载有两种方法: (1)ES6的import方式:conponent:( )=>import(/*webpackChunkName:"about" */'.../views/About.vue') (2)Vue中的异步组件进行懒加载方式:component:resolve=>(require['../views/About'],resolve)
发表于 2023-02-24 07:52:16
回复(0)
0
牛客689570244号
1、import形式:component:() => import("./home.vue");2、异步组件形式:component:resolve => (require(['./home.vue'], resolve));2种方式实现懒加载作用主要是按需加载,不用到该路由,不加载组件,实现性能优化。
发表于 2022-09-19 18:23:27
回复(0)
这道题你会答吗?花几分钟告诉大家答案吧!
提交观点
问题信息
React
上传者:
real19931
难度:
14条回答
106收藏
787浏览
热门推荐
相关试题
说一说computed和watch...
React
评论
(38)
说一说vue钩子函数?
React
评论
(25)
说一说组件通信的方式?
React
评论
(43)
数据链路层滑动窗口机制中发送窗口(...
网络基础
评论
(1)
有关linux线程的描述,正确的是...
京东
Java工程师
C++工程师
iOS工程师
安卓工程师
运维工程师
前端工程师
算法工程师
PHP工程师
2018
评论
(1)
扫描二维码,关注牛客网
意见反馈
下载牛客APP,随时随地刷题