vue 路由懒加载，组件异步加载

用于缓解首屏加载缓慢

1. vue异步组件

vue-router配置路由 , 使用vue的异步组件实现按需加载

{ path: '/home',name: 'Home', component: resolve => require(['@/components/home'],resolve)
},

2. webpack 的 require.ensure()

vue-router配置路由，使用webpack的require.ensure，也可实现

require.ensure（）接受三个参数：

语法: require.ensure(dependencies: String[], callback: function([require]), [chunkName: String])

dependencies: 依赖的模块数组
callback: 回调函数，该函数调用时会传一个require参数
chunkName: 模块名，用于构建时生成文件时命名使用

{ path: '/home',name: 'home',component: r => require.ensure([], () => r(require('@/components/home')), 'chunk') // r就是resolve// 'chunk' 表示包名，相同的 chunk 名 会被打包到一起
},

甚至，可以在加载过程中执行 loading 图

{path: '/hello',name: 'Hello',component (r){ console.log('切换')// 开始加载 loadingrequire.ensure([], (require) => { r(require('@/components/HelloWorld')) }) console.log('切换完成')// 关闭 loading
   },
},

-- end --

转载于:https://www.cnblogs.com/_error/p/11095702.html

vue 路由懒加载，组件异步加载相关推荐

Vue路由懒加载报错问题解决
使用Vue路由懒加载时报了以下错误: 经过百度发现,出现该问题的原因是: import 属于异步引用组件,需要特殊的babel-loader处理解决办法: 安装babel用来编译import异步引用 ...
vue路由懒加载的两种方式
1.当一个vue项目很大的时候,对于一些"暂时"用不到的组件,我们可以不进行加载,等到用到次组件时再加载.这样可以优化spa应用首次加载白屏情况,也给用户更好的体验.这样就是vue ...
Vue 路由懒加载——介绍以及遇到的问题
使用路由懒加载的原因当打包构建应用时,JavaScript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. ...
vue“路由懒加载” 技术，让网页快速加载（优化篇）
(含代码示例.截图演示)让中大型vue项目,按需加载文件,让网页快速渲染! 官方文档:路与懒加载所谓的路由懒加载: 代码示例 · 对比: 1. 没有优化的代码(截图1 · 省略) import Vu ...
图片懒加载和Vue路由懒加载
图片懒加载什么是懒加载? 懒加载也叫做延迟加载或者按需加载 .在长网页中延迟加载暂时未看到的图片数据,能够优化网页性能,提高用户体验 .在较长的网页或应用中,如果图片很多,等待全部图片都被加载出来需 ...
关于Vue admin 框架中 Pagination 分页异步加载的问题
关于Vue admin 框架中 Pagination 分页异步加载的问题贴代码核心代码: this.$emit('update:page', this.currentPage) this.$em ...
关于同步加载与异步加载的区别
关于同步加载与异步加载的区别同步加载:同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止了后续的解析,因此停止了后续的文件加载(如图像).渲染.代码执行. 异步加载:异步加载又叫非阻塞,浏览器在下 ...
浏览器渲染阻塞与优化-详解推迟加载、异步加载。
我认为一个前端工程师是否优秀,很大程度上取决于对前端性能上优化的功力.所以性能优化对前端真的很重要!!! 本文介绍了什么是阻塞.为什么会阻塞?阻塞优化常用的5种方式以及他们的注意事项. 浏览器渲染阻塞 ...
javascript 文件的同步加载与异步加载
原文:[转载]javascript 文件的同步加载与异步加载 HTML 4.01 的script属性 charset: 可选.指定src引入代码的字符集,大多数浏览器忽略该值. defer: bool ...
同步加载与异步加载的区别
同步加载: 同步模式,又称阻塞模式,就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去: 即同步加载会阻止浏览器 ...

vue 路由懒加载，组件异步加载

vue 路由懒加载，组件异步加载相关推荐

最新文章

热门文章