已关闭。此问题为opinion-based。目前不接受回答。
**要改进此问题吗?**更新此问题,以便editing this post可以使用事实和引文来回答。
14天前关门了。
Improve this question的
一般来说,使用import()语句的动态导入和脚本加载函数哪个更好?
它们都发出网络请求,那么哪一个性能更好?或者webpack内置的动态导入()是最好的一个?
脚本加载函数示例:
function loadScript(url) {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.async = true;
script.src = url;
script.addEventListener('load', () => {
resolve(true);
});
script.addEventListener('error', (event) => {
reject(event);
});
document.head.appendChild(script);
});
}
字符串
2条答案
按热度按时间vm0i2vca1#
这两种方法都有优点和缺点,但值得注意的是,当涉及到性能时,使用import()语句在代码拆分方面可以更有效。
它允许您的构建工具(例如Webpack)分析您的代码,并将其拆分为更小,更易于管理的块,按需加载。这可以导致更快的初始页面加载和提高资源利用率。
保持项目的浏览器支持需求是很重要的。如果你需要支持旧的浏览器,你可能需要使用多种方法或polyfill来确保兼容性。
mec1mxoz2#
你提到了webpack,因为webpack是一个插件
import something from "something"
通常甚至不会转换为物理导入,这取决于插件如何优化块。所以在大多数情况下,这种类型的导入应该在大多数时候使用。但是
import("something").then(...
,也就是动态导入,在你的应用变得很大的时候会很出色。假设你有一个 Jmeter 板,有很多小部件,如果你对每个小部件使用动态导入,你可以在加载小部件之前已经呈现了一些东西,如果你使用静态导入,所有代码都需要在你开始向用户显示任何东西之前加载。