《性能优化》在vue、react中异步加载javascript文件

export function loadScript(
	url: string,
	options?: {
		cors: boolean;
		id: string;
	}
) {
	const id = options ? options.id : undefined;
	const cors = options ? options.cors : undefined;
	return new Promise((resolve, reject) => {
		const script = document.createElement("script");
		script.type = "text/javascript";
		script.async = false;
		cors && (script.crossOrigin = "anonymous");
		id && (script.id = id);
		script.src = url;
		document.head.appendChild(script);
		script.onload = resolve;
		script.onerror = reject;
	}).catch((err) => console.error(`加载 ${url} 失败`, err));
}

loadScript("https://example.com/script.js", { id: "myScript", cors: true })
	.then(() => console.log("Script loaded successfully"))
	.catch(() => console.log("Script failed to load"));

在庞大的项目中基本会有量大但是不使用无需加载的JS代码。使用异步加载，不仅可以提升页面加载速度，还能降低主包的大小

例：echart