处理Vite项目首屏加载响应迟缓和二次刷新的问题

简介: 处理Vite项目首屏加载响应迟缓和二次刷新的问题

由于Vite采用的bundless的dev server方案,且按原生ESM的形式按需为浏览器动态提供源码,也就形成了Vite冷启动迅速,但首屏首次加载慢(加载过程中进行解析、编译等,特别是在首屏需要引入体积大、格式特殊的文件时)的问题。


除此之外,在第一次启动时,如果在首页通过点击等交互操作准备进入到下一个包含新类库依赖的页面时,会出现响应迟缓、页面reload的情况。同样出现这类情况也是因为需要动态加载过程中的额外工作。


目前,对于上述问题的解决方案主要是通过触发冷启动时的预构建来解决:


1. 通过配置依赖优化项 optimizeDeps.include

2. 通过现有的npm包

npm i -D vite-plugin-optimize-persist vite-plugin-package-config
// vite.config.ts
import OptimizationPersist from 'vite-plugin-optimize-persist'
import PkgConfig from 'vite-plugin-package-config'

export default {
  plugins: [
    PkgConfig(),
    OptimizationPersist()
  ]
}

3. 如果方案2有兼容问题,可以参考其源码,自己编写插件的实现

相关文章
|
4月前
|
缓存 JavaScript 前端开发
【Vue面试题七】、SPA (单页面) 首屏加载速度慢怎么解决?
这篇文章探讨了单页面应用(SPA)首屏加载速度慢的问题,并提供了多种解决方案,包括减小入口文件体积、静态资源本地缓存、UI框架按需加载、图片资源压缩、组件重复打包、开启GZip压缩和使用服务端渲染(SSR),以优化资源加载和页面渲染,改善用户体验。
【Vue面试题七】、SPA (单页面) 首屏加载速度慢怎么解决?
|
2月前
|
缓存 前端开发 JavaScript
测试 SPA 首屏加载速度
【10月更文挑战第14天】测试 SPA 首屏加载速度是一项重要且复杂的工作。通过合理选择测试方法和指标,准确评估首屏加载速度,并结合实际情况采取优化措施,可以有效提升应用的性能和用户体验。在未来,随着技术的不断发展和用户需求的变化,我们需要持续探索和创新测试方法,以适应不断变化的挑战。
|
2月前
|
缓存 监控 前端开发
SPA 首屏加载速度优化
【10月更文挑战第14天】解决 SPA 首屏加载速度慢的问题需要综合运用多种优化策略和技术。通过资源压缩、减少异步请求、优化渲染流程、利用缓存、代码分割、预加载等方法,可以有效提高 SPA 首屏加载速度,为用户提供更好的体验。同时,性能监控和分析是持续优化的关键,应根据实际情况不断调整优化策略。在未来,随着技术的不断发展,我们还需要不断探索新的优化方法和途径,以适应不断变化的需求。
|
2月前
|
缓存 JavaScript CDN
一次js请求一般情况下有哪些地方会有缓存处理?
一次js请求一般情况下有哪些地方会有缓存处理?
42 4
|
6月前
|
缓存 前端开发 JavaScript
如何优化前端网页加载速度
本文将介绍一些优化前端网页加载速度的技巧和方法,包括减少HTTP请求、压缩文件大小、使用浏览器缓存以及异步加载等。通过这些优化措施,您可以提升用户体验,加快网页加载速度,为用户提供更好的网页访问体验。
|
5月前
|
JavaScript
vue 数据变化触发页面响应的三种方式(解决:数据变化页面无响应/不刷新的问题)【含原理】
vue 数据变化触发页面响应的三种方式(解决:数据变化页面无响应/不刷新的问题)【含原理】
356 0
|
6月前
|
缓存 JavaScript 前端开发
老程序员分享:js刷新页面得重新加载和页面的刷新
老程序员分享:js刷新页面得重新加载和页面的刷新
44 0
|
7月前
|
前端开发 JavaScript 搜索推荐
如何优化前端网页加载速度?
本文将探讨如何通过优化前端网页加载速度来提升用户体验和网站性能。通过减少HTTP请求、压缩资源、使用CDN加速、延迟加载和代码优化等方法,可以有效减少页面加载时间,提高网页响应速度,从而提升用户满意度和搜索引擎排名。
|
7月前
|
前端开发 JavaScript 算法
如何优化前端页面加载速度
在现代网站中,前端页面加载速度是至关重要的。本文将介绍一些优化前端页面加载速度的技巧和最佳实践,以确保您的网站可以更快地加载。
139 1
|
7月前
|
JavaScript 前端开发 Java
【面试题】如何解决 Vue首屏加载过慢出现长时间白屏?
【面试题】如何解决 Vue首屏加载过慢出现长时间白屏?

热门文章

最新文章