vue+webpack2如何实现路由懒加载

小编给大家分享一下vue+webpack2如何实现路由懒加载,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

我们提供的服务有:网站设计制作、成都网站设计、微信公众号开发、网站优化、网站认证、临潼ssl等。为上千企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的临潼网站制作公司

vue+webpack2实现路由的懒加载的方法

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

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

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

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

第二,在 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 }
  ]
})

看完了这篇文章,相信你对“vue+webpack2如何实现路由懒加载”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


文章标题:vue+webpack2如何实现路由懒加载
标题路径:http://myzitong.com/article/ihjeic.html