vue 中异步组件的使用

合理使用异步组件,能提升vue 项目的性能。

上篇,我们完成了项目的打包编译。项目文件中,多了一个文件夹dist , 这个文件夹的内容就是编译后的内容。

如下。css 目录下两个文件,.map 是一个source map 文件,目的是为了帮助调试被压缩过的css代码,它的意义是帮助我们在开发的时候调试使用。真正打包在线上有用的文件是里面的.css 文件。

上图,js 文件里,.map 文件依然是source map 文件,辅助文件。有用的文件就是 app.*.js, manifest.*.js, vendor.*.js。manifest.*.js 可以理解为webpack 打包生成的配置文件,可以不关心它里面的代码。vendor.*.js 里面放的是,各个页面各个组件公用的一些代码,打包的过程中,webpack 会把这些公用代码打包到vender.*.js中。app.*.js里面放的是,各个页面的业务逻辑代码。

实际上,当我们处理异步组件的时候,主要是处理app.*.js 。

当我们没有做异步组件的时候,app.*.js 在最初加载的时候,会把项目所有的页面的逻辑代码,全都加载。当项目很大的时候,就会非常影响性能了。

我们回到开发环境,启动服务器 npm run start

进入项目,查看network 可以看到,app.js (它是一次性加载的,跳转别的页面不会重新加载)

下面我们,要将它改成按需加载,也就是使用异步组件。

我们进入 src/router 目录下的index.js 文件

之前的index.js 文件如下

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home.vue'
import City from '@/pages/city/City.vue'
import Detail from '@/pages/detail/Detail.vue'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }, {
      path: '/city',
      name: 'City',
      component: City
    }, {
      path: '/detail/:id',
      name: 'Detail',
      component: Detail
    }
  ],
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})

我们修改之后,就可以实现按需加载了。

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('@/pages/home/Home.vue')
    }, {
      path: '/city',
      name: 'City',
      component: () => import('@/pages/city/City.vue')
    }, {
      path: '/detail/:id',
      name: 'Detail',
      component: () => import('@/pages/detail/Detail.vue')
    }
  ],
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})

如下,app.js 就是公用的一些和配置的一些js, 1.js 是首页的业务逻辑代码。

但是,从上面两张图中的时间轴可以看到。使用了异步组件,首页完全加载的时间反而更长。这是因为,ajax 请求也挺耗时的。

当我们 app.*.js 没有很大的时候,不建议使用异步组件。因为使用异步组件,会发送更过的ajax 请求,这也会耗费时间!

Logo

前往低代码交流专区

更多推荐