SPA应用优化首屏加载速度

一、问题产生原因：

• 网络延时问题
• 资源文件体积过大
• 资源重复请求加载

二、常见解决方案

1. 减小入口文件体积

   常用的手段是路由懒加载，在配置vue-router时以函数的形式动态导入加载，这样可以把不同的路由组件分别打包，只有在解析具体路由时才会加载对应的组件

2. UI框架按需加载

   日常用到的UI框架类似ElementUI避免全量引用，要根据项目中实际用到的哪些组件进行按需引用

3. 组件重复打包

   假设某个js是常用的库，现在有多个路由都引用了这个js，就会造成重复下载；

   解决方案是在webpack的config文件中，修改CommonsChunkPlugin的minChunks配置为3；minChunks为3表示将使用3次以上的文件抽离出来，放入公共依赖文件中避免重复加载；

4. 压缩图片资源

   对于所有的图片资源，我们可以进行适当的压缩；也可以使用雪碧图，将多个图标融合在一张图片上，减少http请求

5. 开启Gzip压缩

   vite和webpack对应的插件工具为vite-plugin-compression和compression-webpack-plugin，

   在config.js中开启配置功能即可

6. SSR服务端渲染

   将组件或页面通过服务器生成html字符串，再发送到浏览器；一般可以用nuxt.js或者更轻量级的vue-server-renderer来实现；