对于SPA项目来说，如果一次性加载所有的组件，就会很明显的出现打包后的 JavaScript 文件体积过大，直接影响到了 app 初次加载速度。

在vue中使用懒加载的方式很简单
  1.使用动态import语法，import()进行按需加载组件;
   2.将加载的组件定位异步组件。

// Home.vue
<template>
   <div>Home page</div>
</template>
<script>
        export default { 
             name: "Home",
         };
</script>

// App.vue
<script>
  export default { 
     components: {   
          Home: () => import("./views/Home.vue"), 
       },
   };
</script>

这样的话，home组件就只会在需要的时候加载，可以在一定程度上避免加载首页不需要的组件，也能够明显的提升 app 加载速度。

上手实践

主模板：App.vue
页面： Page1.vue、 Page2.vue、 Page3.vue
路由：/Page1、/Page2.vue

默认构建--------构建结果：

js：
  app.js：包含App、Page1、Page2完整模块
  vendor.js：包含vue、vue-router等三方模块

css：
 app.css：包含.App、.page1、.page2完整样式
首屏资源：

结论：js、css资源均在首屏加载

使用import()
   按需加载------构建结果：

     js：
           app.js：包含App完整模块和Page1、Page2模块的引用
           0.js / 1.js：包含Page1、Page2完整模块
           vendor.js：包含vue、vue-router等三方模块

css：
        app.css：包含.App、.page1、.page2完整样式

首屏资源：

结论：首屏仅加载主模板和首屏页面js代码，但css代码会整个加载