我做首页优化本来是为了解决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'), // 异步组件，按需引入。加载哪里哪里会先显示 } ...};复制代码 这一步的截图我没有单独截下来，我会放在接下来的第二步中来展示。不过我的demo这一二步的效果并不明显，因为我的首页和我的其他路由下的组件只更换了两个组件，如果区别很大的话，效果应该会明显一些。
给出官网的，有兴趣的朋友可以仔细看一下。
二、路由懒加载
当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
同样的，先贴出刚开始学习的时候写vue-router的写法：
import Vue from 'vue';import Router from 'vue-router';import Portal from '@/components/Portal';Vue.use(Router);export default new Router({ routes: [ { path: '/', name: 'portal', component: Portal }});复制代码 然后按照官方的写法做路由懒加载:
import Vue from 'vue';import Router from 'vue-router';Vue.use(Router);export default new Router({ routes: [ { path: '/', name: 'portal', component: resolve => require(['@/components/Portal'], resolve) }});复制代码 那么我们来看一下做完一二步处理的效果：
但是，我们可以看到资源的数量增加了，因为我们做了组件的按需引入和路由的懒加载，这时webpack就不会把我们自己写的代码都打包到app.js里面了，而是分出了1,2,3....若干个js，在需要的时候才加载它们。当我们的网站做复杂了以后，就应该会看出区别来了。
而此时的时间上区别也不大，甚至比刚才没做处理的时间还稍微的长了那么一丢丢，但是DOMContentLoaded少的还是挺明显的。
还是附上官网的，大家有兴趣进去看一下~
三、Element按需加载
我们很可能会用到element或者是Mint UI这种库，如果它正好支持按需加载就最好了，通过按需加载库的组件，我们可以大大减少资源的大小~ 这里我就不再放代码了，直接看就可以了，注意.babelrc一定要修改对啊，不然找不到各个组件对应的.css文件。 直接放效果图：
四、gzip
这里我用的是nginx。 我们找到nginx中的 conf文件夹 -> nginx.conf中的server，做如下修改
http {... gzip on; //把原本的gzip的#注释去掉 gzip_static on; gzip_buffers 4 16k; gzip_comp_level 5; gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-http-php image/jpeg image/gif image/png; server { listen 7077; ... location /api { rewrite ^/api/(.*)$ /$1 break; proxy_pass http://10.200.9.74:8088; } }}复制代码 然后来看看效果：
如果没搞过nginx想简单的弄一下nginx，可以看一下我的另一篇关于的。我也是为了搞这个gzip才接触的nginx的，里面简单的写了一下我用nginx弄这个Vue项目的配置过程。
至此，Vue的首页优化就完工了，首页白屏的问题，依然还存在，但是稍微的好了一些。 我们可以再通过骨架屏等手段来完善了，如果可以用SSR那就更好了。
这里推荐另一篇，他里面的第二点是写在webpack压缩打包时的优化，可以节约大量的时间。
五、CDN引入
这个是在我写完这篇文章以后看到的，文章在这里：，大家可以用起来看看效果
感谢大家的阅读~
参考文章