前端性能优化----如何减短首屏加载时间？

为什么首屏加载会出现短暂几秒白屏呢？随着Vue、React等框架的出现，SPA单页面应用越来越广泛被开发者应用。但是呢，SPA应用页面打包之后的js文件是非常大的。要等这个js文件加载完成之后才能进行首屏渲染，这样就导致了白屏的问题。

一、使用动态Polyfill

Polyfill可以为浏览器提供和标签API一样的功能，无需引入插件，只需要引入一个js文件就行。可以使用动态使用Polyfill来代替我们现有的比较笨重的兼容问题，动态使用Polyfill使用过浏览器的UA头，然后根据不同浏览器选择其对应需要的Polyfill。

二、使用骨架屏

骨架屏就是指在未加载完时，先简单用图形绘制出页面的大概布局，给用户好一点的视觉体验，等页面加载完成之后，再将骨架屏替换掉就行。

• 绘制静态骨架屏：最简单的方案就是直接绘制一张骨架屏的图片，在资源加载完成之后替换掉这张图片。我们可以采用base64格式的图片直接插入到HTML文档里，可节约一次http请求。
• 代码绘制骨架屏：代码绘制灵活性比较高；
• 插件绘制：如果需要给多个页面添加骨架屏，需要绘制多个骨架屏，比较麻烦。我们可以只用page-skeleton-webpack-plugin插件，该插件可以根据具体的页面生成对应的骨架屏。

三、代码分割

代码分割指的是将项目构建打包后，根据指定规则分割成多个输出文件，这些文件可以被按需加载，可以用来优化代码