一、正面影响
- 减少加载时间:
- modulepreload 可以让浏览器提前下载模块脚本,减少页面加载时间,特别是对于依赖较多的复杂应用。这种预加载可以让浏览器在遇到 modulepreload 链接时立即开始下载,而不是等到实际需要时才下载
- 提升用户感知性能:
- 用户会感觉应用更快,因为关键资源在需要时已经被加载完毕。这能带来更流畅和响应更快的用户体验
- 高效利用网络:
- 通过预加载关键模块,应用可以更好地利用可用的网络带宽。这对于有空闲网络时间段的情况尤其有利,可以提前获取资源
二、负面影响
- 增加初始加载量:
- 如果过度使用 modulepreload,可能会导致大量网络请求同时进行。这会增加初始加载时间,并对用户的网络造成压力,导致其他资源加载变慢
- 网络拥堵:
- 预加载过多资源可能会造成网络拥堵,尤其是在较慢的连接上。这会导致关键资源加载延迟,整体性能下降
- 未使用的资源:
- 如果预加载的资源没有被立即或频繁使用,会导致带宽浪费和不必要的内存消耗。这对于数据计划有限或使用移动网络的用户来说尤其有问题
三、vite打包所有的js文件都 modulepreload的解决办法
找出不需要preload的文件进行过滤
参考文档:Build Options | Vite
build: {modulePreload: {resolveDependencies(filename, deps) {const noPreloadFiles = ['send','star','vip',]return deps.filter(dep => {return !noPreloadFiles.some(f => dep.includes(f))})},},},