首页 > 其他分享 >开发那些事儿:如何解决js打包文件体积过大导致页面加载慢问题?

开发那些事儿:如何解决js打包文件体积过大导致页面加载慢问题?

时间:2022-10-12 17:33:58浏览次数:51  
标签:网关 AI 检测 js 页面 打包 加载

智能分析网关作为我们新推出的产品,除了丰富的AI智能检测及视频功能之外,我们依然在持续拓展新AI算法的部署,并不断优化细节、提升用户的使用体验。

开发那些事儿:如何解决js打包文件体积过大导致页面加载慢问题?_实时视频

近期,我们对js打包文件体积过大的情况进行了优化,解决了智能分析网关页面首页加载过慢的情况。今天来和大家分享一下实现过程。

开发那些事儿:如何解决js打包文件体积过大导致页面加载慢问题?_加载_02

如图所示,所有的js都打包到一个js文件,导致文件过大,网页加载时间较长:

开发那些事儿:如何解决js打包文件体积过大导致页面加载慢问题?_加载_03

排查发现是Vu3默认的打包模式导致该问题,在vite.config.ts配置文件中,加上如下配置:

开发那些事儿:如何解决js打包文件体积过大导致页面加载慢问题?_视频监控_04

再重新打包,结果如下图所示,这样就能解决打包的文件包体积过大的问题:

开发那些事儿:如何解决js打包文件体积过大导致页面加载慢问题?_加载_05

优化过后,页面加载速度得到极大提升,用户体验也更佳。

开发那些事儿:如何解决js打包文件体积过大导致页面加载慢问题?_视频监控_06

随着人工智能技术不断落地应用,视频监控领域也越来越多地融入了AI智能检测分析技术。智能分析网关设备内置多种AI算法,可对实时视频中的人脸、人体、物体、车辆等进行检测、跟踪与抓拍,支持口罩佩戴检测、安全帽佩戴检测、人体检测、区域入侵检测以及可拓展多种AI检测算法,可广泛用于客流统计、周界防范、明厨亮灶、通用安防监控、企业安全生产、公共卫生防疫、智慧校园、智慧景区等

标签:网关,AI,检测,js,页面,打包,加载
From: https://blog.51cto.com/tsingsee/5751188

相关文章