首页 > 试题广场 >

说一说vue-router 实现懒加载的方法?

[问答题]
说一说vue-router 实现懒加载的方法?
懒加载:不用到不加载
实现懒加载:import(ES6)require+resolve(Vue)
发表于 2022-06-27 13:30:15 回复(0)
懒加载的核心思想是按需加载,也叫做异步加载:只有请求到该组件的时候,才会对该组件进行网络请求并加载。懒加载有利于解决页面首次请求资源过多,导致白屏时间长的问题。 vue-router的懒加载即通过箭头函数的写法导入组件如 const Login = ()=> import('../路径');
编辑于 2022-08-19 11:46:55 回复(0)
目前有三种方法: 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)
1、import形式:component:() => import("./home.vue");
2、异步组件形式:component:resolve => (require(['./home.vue'], resolve));
2种方式实现懒加载作用主要是按需加载,不用到该路由,不加载组件,实现性能优化。
发表于 2023-02-14 17:29:56 回复(0)
【概念】 对于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)
component:() => import("../pages/LoginView.vue"), 这样导入组件使 组件在没有被用到时就不会加载
发表于 2022-11-02 10:53:51 回复(0)
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)
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)
懒加载的核心是按需加载,也叫做异步加载:只有请求到该组件的时候,才会对该组件进行网络请求并加载。 懒加载作用:性能优化,不用到不加载。懒加载有利于解决页面首次请求资源过多,导致白屏时间长的问题。 vue-router实现懒加载的方式: 1.ES6的import方式:component: () => import ('./home.vue'); 2.异步组件加载方式:component: resolve => (require(['./home.vue'] , resolve));
发表于 2023-09-11 11:14:00 回复(0)
1、import形式:component:() => import("./home.vue"); 2、异步组件形式:component:resolve => (require(['./home.vue'], resolve)); 2种方式实现懒加载作用主要是按需加载,不用到该路由,不加载组件,实现性能优化。
发表于 2023-04-12 18:06:55 回复(0)
懒加载:其实就是按需加载,只有需要该组件的时候,才会加载
发表于 2023-03-15 16:27:22 回复(0)
ES6的import:component:()=> {import ('../views/About.vue')};2、vue异步组件进行懒加载的方式:component:resolve => required(['../views/About.vue'],resolve);懒加载的作用,性能优化,使用的时候加载,不用的时候不加载。
发表于 2023-02-28 16:37:25 回复(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)
1、import形式:component:() => import("./home.vue");2、异步组件形式:component:resolve => (require(['./home.vue'], resolve));2种方式实现懒加载作用主要是按需加载,不用到该路由,不加载组件,实现性能优化。
发表于 2022-09-19 18:23:27 回复(0)