SPA应用优化首屏加载速度
一、问题产生原因：
-
网络延时问题
-
资源文件体积过大
- 资源重复请求加载
二、常见解决方案
- 减小入口文件体积
常用的手段是路由懒加载，在配置vue-router时以函数的形式动态导入加载，这样可以把不同的路由组件分别打包，只有在解析具体路由时才会加载对应的组件 - UI框架按需加载
日常用到的UI框架类似ElementUI避免全量引用，要根据项目中实际用到的哪些组件进行按需引用 - 组件重复打包
假设某个js是常用的库，现在有多个路由都引用了这个js，就会造成重复下载；
解决方案是在webpack的config文件中，修改CommonsChunkPlugin的minChunks配置为3；minChunks为3表示将使用3次以上的文件抽离出来，放入公共依赖文件中避免重复加载； - 压缩图片资源
对于所有的图片资源，我们可以进行适当的压缩；也可以使用雪碧图，将多个图标融合在一张图片上，减少http请求 - 开启Gzip压缩
vite和webpack对应的插件工具为vite-plugin-compression和compression-webpack-plugin，
在config.js中开启配置功能即可 - SSR服务端渲染
将组件或页面通过服务器生成html字符串，再发送到浏览器；一般可以用nuxt.js或者更轻量级的vue-server-renderer来实现；