vue 一个简单的项目 之四 最终 异步组件实现按需加载

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 请求，这也会耗费时间！