对于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代码会整个加载
