Vue的首页优化

我做首页优化本来是为了解决vue的首页白屏问题的，但是把资源从1.1m优化到了270kb还有会出现白屏的问题，效果没有预期的好，因为白屏不只和资源大小有关。搜了一下说解决首页白屏还是SSR服务端渲染效果好。

资源大小是减小的很明显的，我就通过这篇文章来分享且记录一下，有说的不对的还请大家留言告诉我，谢谢~

先放一张没有做优化的资源大小的图片:

可以注意一下此时资源的大小和数量，后面我们会有明显的变化。而时间，变化的程度没有资源大小那么明显。代码都是在虚机上运行的，时间比实机上面长了一些。

一、组件异步加载

什么是组件的异步加载呢？换个说法就是按需引入。

在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。

开始学习vue的时候，我们都是通过import引入组件，然后在components中使用组件。
代码如下：

import EventCalendar from '@/components/EventCalendar';
export default {
   
	...
	components: {
   
		EventCalendar
	}
	...
}

如果我们异步加载组件，那么首页请求的到资源就会相应的减少，因为它只在需要的时候才从服务器加载一个模块。
异步加载组件的代码：

export default {
   
	...
	components: {
   
		EventCalendar: () => import('@/components/EventCalendar'),	// 异步组件，按需引入。加载哪里哪里会先显示
	}