14、如何处理 打包出来的项目（首屏） 加载过慢的问题

SPA 应用：单页应用程序，所有的功能都在一个页面上。如果第一次就将所有的路由资源全部加载，则性能会很差。

• 加载过多 => 路由懒加载，访问到对应路由，在加载路由相关组件内容
• 加载过大 => 图片/文件压缩合并处理，开启 gzip 压缩等。

比如：

1. 配置异步组件，路由懒加载

   import Vue from 'vue';
   import VueRouter from 'vue-router';
   import Home from '@/views/Home.vue'; // 常规加载的组件
   Vue.use(VueRouter);
   const routes = [
   	{
   		// 常规路由配置
   		path: '/',
   		name: 'Home',
   		component: 'Home',
   	},
   	{
   		// 懒加载路由配置， 因为没有在顶部 import，所以触发这个路由才会加载
   		path: '/about',
   		name: 'About',
   		component: ()=> import('@/views/About.vue')
   	}
   ]
   

2. 更小的图片格式：webp 格式。
3. CDN 加速：内容分发网络（Content Delivery Network），根据网络环境和地理距离选择更优的数据源，需要付费。
4. 开启 Gzip 压缩。一般服务器默认开启，没开就让后端开一下。