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控制其只在需要的时候被渲染。