Vue3 + Vite项目中路由懒加载速度过慢的原因咨询

• 多请求的额外开销
  懒加载会将每个路由组件拆分为独立的chunk文件，首次访问页面时，浏览器需先加载主入口文件，再异步请求当前路由对应的chunk。若服务器未开启HTTP/2，多个小文件请求会因TCP握手、请求排队等产生额外耗时，反而不如一次性加载合并后的大文件高效。而普通导入会把所有组件打包进主文件，仅需一次请求。

• chunk体积未优化
  若懒加载的路由组件引入了大体积第三方库，且未配置分包策略抽离公共依赖，会导致每个懒加载chunk重复打包相同依赖，大幅增大单个chunk体积，拖慢加载速度。

• 服务器缓存配置不当
  懒加载生成的chunk带hash后缀，本可被浏览器长期缓存，但如果服务器未设置正确的Cache-Control缓存头，每次访问都会重新请求这些chunk；而普通导入的主文件若缓存配置合理，加载速度自然更快。

• Vite构建配置存在疏漏
  检查vite.config.js：是否开启了build.minify压缩（默认是terser）、是否通过build.rollupOptions优化chunk拆分、生产环境是否误开了build.sourcemap（会生成额外的.map文件，增大资源体积）。这些配置疏漏都会导致懒加载chunk体积超标。

• 首屏路由的懒加载时机错误
  若首屏路由也使用了懒加载，主包加载完成后还需异步加载首屏chunk，多了一次等待环节；而普通导入时首屏组件已包含在主包内，主包加载完成即可渲染，所以感知上更快。这种情况可将首屏组件改为普通导入，或通过preload预加载首屏chunk。

内容的提问来源于stack exchange，提问作者max devis