一、问题产生原因：

• 网络延时问题

• 资源文件体积过大

• 资源重复请求加载

二、常见解决方案

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来实现；