美文网首页
vue 之 路由懒加载

vue 之 路由懒加载

作者: hunter97 | 来源:发表于2019-03-14 10:06 被阅读0次

    使用vue开发已经有一段时间了,在后来的工作中,做的一些项目越来越大。vue打包后的js文件也越来越大,这会是影响加载时间的重要因素。当构建的项目比较大的时候,懒加载可以分割代码块,提高页面的初始加载效率。这里我汇总了常见的几种vue中路由懒加载的方法。

    方法一 resolve

    这一种方法较常见。它主要是使用了resolve的异步机制,用require代替了import,实现按需加载,下面是代码示例:

    import Vue from 'vue'
    import Router from 'vue-router'
    // import HelloWorld from '@/components/HelloWorld'
    Vue.use(Router)
    export default new Router({
      routes: [
    //     {
    //       path: '/',
    //       name: 'HelloWorld',
    //       component: HelloWorld
    //     }
            {
              path: '/',
              name: 'HelloWorld',
              component: resolve => require(['@/components/HelloWorld'], resolve)
            }
      ]
    }) 
    
    方法二 官网方法

    vue-router在官网提供了一种方法,可以理解也是为通过Promiseresolve机制。因为Promise函数返回的Promiseresolve组件本身,而我们又可以使用import来导入组件。整合起来代码示例如下:

    import Vue from 'vue'
    import Router from 'vue-router'
    // import HelloWorld from '@/components/HelloWorld'
    Vue.use(Router)
    export default new Router({
      routes: [
    //     {
    //       path: '/',
    //       name: 'HelloWorld',
    //       component: HelloWorld
    //     }
            {
              path: '/',
              name: 'HelloWorld',
              component: () => import('@/components/HelloWorld.vue')
            }
      ]
    }) 
    

    官网中还提供了通过注释语法来提供chunk name的方法,但是webpack的版本要高于2.4的版本。感兴趣的可以到官网了解一下。
    方法三 require.ensure
    这种模式可以通过参数中的webpackChunkName将js分开打包。

    import Vue from 'vue'
    import Router from 'vue-router'
    // import HelloWorld from '@/components/HelloWorld'
    Vue.use(Router)
    export default new Router({
      routes: [
    //     {
    //       path: '/',
    //       name: 'HelloWorld',
    //       component: HelloWorld
    //     }
            {
              path: '/',
              name: 'HelloWorld',
              component: resolve => require.ensure([], () => resolve(require('@/components/'+componentName)), 'webpackChunkName')
            }
      ]
    })
    
    

    在我之前的测试中,路由懒加载和自动化注册没办法同时使用,后期会尝试找一下同时满足两种需求的方法,目前在考虑Nuxt.js。如果使用了js分割打包的方法可能会有资源访问不到的情况,可以参考我之前写过的一篇文章vue 之 config配置文件详情

    相关文章

      网友评论

          本文标题:vue 之 路由懒加载

          本文链接:https://www.haomeiwen.com/subject/hadxmqtx.html