首页白屏优化

首页白屏

再vue项目中，引入到项目中的js,css都会被打包进入js文件,如果引入的第三方库众多，最后打包后的js文件就会体积庞大，浏览器再加载该文件后才会进入首屏，如果js体积过大，那么加载的时间就越久，白屏的时间就越长。

分析一波加载慢的原因

webpack-bundle-analyzer 或者 rollup-plugin-visualizer

优化

CDN加速

可以采用CDN加速引入，但是这个有风险，就是第三方库挂掉或者什么的，可以选择付费的cdn加速。
或者下载到本地上传到自己的服务器，总共三套方案，可以同时使用，保证安全性。

SSR

服务端渲染也可以解决首屏加载慢这个问题，因为服务端会把所有数据全部渲染完成再返回给客户端

ssr =>请求->node->解析 ->吐回给客户端(带请求数据)

Gzip压缩

减少文件体积,加快首屏页面打开速度，前提是服务器那边得开启gzip

外链CSS,JS文件

很多时候我们在main.js中直接import一些ui库或者css文件啥的，以后可以在index.html，通过script外链引入，这样就不会通过我们的webpack打包

骨架屏

骨架屏就是在进入项目的FP阶段，给它来一个类似轮廓的东西，当我们的页面加载完成之后就消失，这个也很好做的，很多ui库都有这个东西，可以参考一下

loading

首页加一个loading或许是最原始的方法了，在index.html里加一个loadingcss效果，当页面加载完成消失