vue中异步组件实现按需加载

在项目的目录中找到router文件夹里的index.js

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 }
  }
})


修改后的index.js文件结构
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 }
  }
})



注意：当app.js文件很小或者不超过1MB的时候我们没必要把app.js拆分进行异步加载，这样就不会造成多余的http请求了，否则的话就会降低页面的性能



页面中的异步加载组件
我们不单单可以在路由中使用异步加载组件，在一个页面中也可以使用
如页面中异步加载Header.vue组件
原先的写法

<script>
import HomeHeader from './components/Header'
export default {
    components: {
        HomeHeader
    ｝
｝
</script>

异步加载的写法

<script>
export default {
    components: {
        HomeHeader: () => import('./components/Header')
    ｝
｝
</script>

页面组件按需加载总结

1，使用vue异步组件，可以将复杂页面的框架代码和子组件代码拆开，优先加载框架代码，显著提高页面加载速度;
2，组织复杂页面的代码时，可以考虑对于打开首屏时不需要渲染的子组件，使用v-if控制其只在需要的时候被渲染。