脚本宝典收集整理的这篇文章主要介绍了vue+webpack2实现路由懒加载的方法介绍，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。

首先，可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 PRomise 应该 resolve 组件本身)：

const Foo = () => Promise.resolve({ /* 组件定义对象 */ })@H_126_13@
第二，在 Webpack 2 中，我们可以使用动态 import语法来定义代码分块点 (splIT point)：
import('./Foo.vue') // 返回 Promise
结合这两者，这就是如何定义一个能够被 Webpack 自动代码分割的异步组件。
const Foo = () => import('./Foo.vue')
在路由配置中什么都不需要改变，只需要像往常一样使用 Foo：
const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})
相关推荐：
2020年前端vue面试题大汇总（附答案）
vue教程推荐：2020最新的5个vue.js视频教程精选
更多编程相关知识，请访问：编程入门！！
以上就是vue+webpack2实现路由懒加载的方法介绍的详细内容，更多请关注脚本宝典其它相关文章！
脚本宝典总结
       
以上是脚本宝典为你收集整理的vue+webpack2实现路由懒加载的方法介绍全部内容，希望文章能够帮你解决vue+webpack2实现路由懒加载的方法介绍所遇到的问题。
		
如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。
		
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。