微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Vue-router教程六——路由懒加载

路由懒加载

当我们写完代码进行打包的时候,我们会发现首页加载的时间长的过分,这是因为首页在加载所有路由的组件,就十分浪费时间,所以路由懒加载提供的思路便是将路由表进行切割,只有当这个路由被访问的时候才会去加载。

而帮助实现的便是Vue的异步组件和webpack的代码分割功能(我需要去看看webpack)。

1、Vue异步组件: 可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身):

const Foo = () => Promise.resolve({ /* 组件定义对象 */ })

2、webpack代码分割: 在 Webpack 2 中,我们可以使用动态 import语法来定义代码分块点

import('./foo.vue')

最后就是:

const Foo = () => import('./Foo.vue')

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐