合理的使用异步组件，可以提升项目的性能
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
