modulepreload 对性能的影响

一、正面影响

1. 减少加载时间：
   • modulepreload 可以让浏览器提前下载模块脚本，减少页面加载时间，特别是对于依赖较多的复杂应用。这种预加载可以让浏览器在遇到 modulepreload 链接时立即开始下载，而不是等到实际需要时才下载
2. 提升用户感知性能：
   • 用户会感觉应用更快，因为关键资源在需要时已经被加载完毕。这能带来更流畅和响应更快的用户体验
3. 高效利用网络：
   • 通过预加载关键模块，应用可以更好地利用可用的网络带宽。这对于有空闲网络时间段的情况尤其有利，可以提前获取资源

二、负面影响

1. 增加初始加载量：
   • 如果过度使用 modulepreload，可能会导致大量网络请求同时进行。这会增加初始加载时间，并对用户的网络造成压力，导致其他资源加载变慢
2. 网络拥堵：
   • 预加载过多资源可能会造成网络拥堵，尤其是在较慢的连接上。这会导致关键资源加载延迟，整体性能下降
3. 未使用的资源：
   • 如果预加载的资源没有被立即或频繁使用，会导致带宽浪费和不必要的内存消耗。这对于数据计划有限或使用移动网络的用户来说尤其有问题

三、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))
				})
			},
		},
	},