阅读 136

vue-router优化之懒加载

关于路由的懒加载,官方给我们的解释为:

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

其实就是说我们的每一个路由对应的就是一个给用户展示的页面,然而按照常规的操作这些页面最终会通过webpack打包为一个bundle.js的文件,因此就造成了这个页面十分的庞大,所在在请求的时候可能会花费一定的时间,给用户造成不好的体验。因此我们可以通过路由懒加载的方式来解决这个问题。也就是说不同的路由页面打包成不同的js文件,这样就解决了服务器耗时的问题。

在我们未使用懒加载时,打包vue项目会生成三个文件,一个是app的所有业务代码,一个是组织管理模块关系的代码,还有一个就是项目引入第三方的代码。

在这里插入图片描述

接着我们看一下实现懒加载的方式:有三种方式分别是结合异步组件的方式,AMD的方式,es6模块化的方式

在ES6中, 我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割.所以我们就是用最简单的方式:

 component: () => import('../components/about.vue') 
复制代码

实例:

 routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/hello',
      component: () =>import('../components/HelloWorld.vue') 
    },
    {
      path: '/home',
      component: () => import('../components/home.vue')  
    },
    {
      path: '/about',
      component: () => import('../components/about.vue') 
    },
    {
      path: '/person/:userid',
      component: () => import('../components/person.vue') 
    }
  ],
复制代码

这样一来的最终的打包结果: 在这里插入图片描述

我们发现打包后的每个路由界面都有一个js文件,这样一来就可以做到我们按需加载的要求,减轻了服务器的压力

文章分类
前端
文章标签