异步组件实现按需加载

合理的使用异步组件，可以提升项目的性能

image.png

打包后的各种文件作用

• app.css.map目的是帮我们调试压缩过的CSS代码
• app.css是真正有用的文件，打包的时候所有样式文件都打包到这里
• app.js 各个页面的业务逻辑代码都在这里
• manifest.js 是webpack打包生成的一个配置文件
• vendor.js 这里放的是 各个页面各个组件公用的一些代码
• 运行目录时，加载的JS文件就是app.js ，manifest.js ，vendor.js这三个

我们所说的异步组件，主要涉及的是 app.js的内容

• 理想情况下，当我们访问首页的时候，是不需要加载城市列表页(我的项目)的内容的，但是现在我把所有的业务逻辑代码都打包到 app.js文件中了，这样一来，访问首页的同时，其他暂时不需要的文件也会被加载；
• 当我们的项目越来越大的时候，app.js文件也会越来越大，这样的加载方式会带来性能影响。
• 这个时候，就需要我们通过异步组件对项目进行优化。

那么我们如果实现异步加载呢？ 可以通过修改router文件夹下的 index.js来实现，先来看下，一开始的同步加载

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import City from '@/pages/city/City'
import Detail from '@/pages/detail/Detail'
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')
    }, {
      path: '/city',
      name: 'City',
      component: () => import('@/pages/city/City')
    }, {
      path: '/detail/:id',
      name: 'Detail',
      component: () => import('@/pages/detail/Detail')
    }
  ],
  scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
  }
})

修改之后，当我们再运行项目的时候，当我们访问首页，就只会加载首页对应的逻辑js文件。当我们访问列表页，就只会加载列表页对应的js文件了

注意，只有当app.js变得非常大的时候，比如几MB的时候，才建议拆分组件，如果很小时没有必要的，因为拆分之后，要多发HTTP请求

还有就是，不仅仅只有路由里边可以使用这种异步加载的形式。只要是vue中的组件，我们都可以使用异步加载，

例如首页的header组件，同步加载的时候是：

image.png

修改为异步加载：

image.png