网站做弹窗广告,企业网盘软件,北京威凯建设发展招聘网站,盐城网站建设首选梦搏网络什么是路由懒加载#xff1f;
延迟加载或按需加载路由所对应的组件#xff0c;而不是在应用初始化时就一次性加载所有组件。 路由懒加载做了什么事情#xff1f; 主要作用是将路由对应的组件打包成一个个的js代码块 只有在这个路由被访问到的时候#xff0c;才加载对应…什么是路由懒加载
延迟加载或按需加载路由所对应的组件而不是在应用初始化时就一次性加载所有组件。 路由懒加载做了什么事情 主要作用是将路由对应的组件打包成一个个的js代码块 只有在这个路由被访问到的时候才加载对应的组件否则不加载 即只有在这个路由被访问到的时候才加载对应的组件否则不加载
如何实现路由懒加载 vue项目实现路由按需加载路由懒加载的三种方式 Vue异步组件 ES6标准语法import 常用 webpack的requireensure() Vue异步加载技术 vue-router配置路由使用vue的异步组件技术可以实现懒加载一个组件会生成一个js文件。 component: resolve require([放入需要加载的路由地址], resolve){path: /problem,name: problem,component: resolve require([../pages/home/problemList], resolve)}
ES6推荐方式imprort () 直接将组件引入的方式import是ES6的一个语法标准如果需要浏览器兼容需要转化 成es5的语法。 推荐使用这种方式但是注意wepack的版本2.4 vue官方文档中使用的也是import实现路由懒加载 上面声明导入下面直接使用
import Vue from vue;
import Router from vue-router;
// 官网可知下面没有指定webpackChunkName每个组件打包成一个js文件。
const Foo () import(../components/Foo)
const Aoo () import(../components/Aoo)
// 下面2行代码指定了相同的webpackChunkName会合并打包成一个js文件。
// const Foo () import(/* webpackChunkName: ImportFuncDemo */ ../components/Foo)
// const Aoo () import(/* webpackChunkName: ImportFuncDemo */ ../components/Aoo)
export default new Router({routes: [{path: /Foo,name: Foo,component: Foo},{path: /Aoo,name: Aoo,component: Aoo}]
})
webpack提供的require.ensure()实现懒加载 vue-router配置路由使用webpack的require.ensure技术也可以实现按需加载。 这种情况下多个路由指定相同的chunkName会合并打包成一个js文件。 require.ensure可实现按需加载资源包括js,css等。他会给里面require的文件单独打包 不会和主文件打包在一起。 第一个参数是数组表明第二个参数里需要依赖的模块这些会提前加载。 第二个是回调函数,在这个回调函数里面require的文件会被单独打包成一个chunk,不会和主 文件打包在一起这样就生成了两个chunk,第一次加载时只加载主文件。 第三个参数是错误回调。 第四个参数是单独打包的chunk的文件名
import Vue from vue;
import Router from vue-router;
const HelloWorldresolve{require.ensure([/components/HelloWorld],(){resolve(require(/components/HelloWorld))})}
Vue.use(Router)
export default new Router({routes:[{{path:./,name:HelloWorld,component:HelloWorld}}]
})
import和require的比较了解
import 是解构过程并且是编译时执行require 是赋值过程并且是运行时才执行也就是异步加载require的性能相对于import稍低因为require是在运行时才引入模块并且还赋值给某个变量
相关文章 vue-router路由懒加载以及三种实现方式
