webpack 动态导入()与脚本加载函数[已关闭]

6rvt4ljy  于 2023-11-19  发布在  Webpack
关注(0)|答案(2)|浏览(161)

已关闭。此问题为opinion-based。目前不接受回答。
**要改进此问题吗?**更新此问题,以便editing this post可以使用事实和引文来回答。

14天前关门了。
Improve this question
一般来说,使用import()语句的动态导入和脚本加载函数哪个更好?
它们都发出网络请求,那么哪一个性能更好?或者webpack内置的动态导入()是最好的一个?
脚本加载函数示例:

  1. function loadScript(url) {
  2. return new Promise((resolve, reject) => {
  3. const script = document.createElement('script');
  4. script.async = true;
  5. script.src = url;
  6. script.addEventListener('load', () => {
  7. resolve(true);
  8. });
  9. script.addEventListener('error', (event) => {
  10. reject(event);
  11. });
  12. document.head.appendChild(script);
  13. });
  14. }

字符串

vm0i2vca

vm0i2vca1#

这两种方法都有优点和缺点,但值得注意的是,当涉及到性能时,使用import()语句在代码拆分方面可以更有效。
它允许您的构建工具(例如Webpack)分析您的代码,并将其拆分为更小,更易于管理的块,按需加载。这可以导致更快的初始页面加载和提高资源利用率。
保持项目的浏览器支持需求是很重要的。如果你需要支持旧的浏览器,你可能需要使用多种方法或polyfill来确保兼容性。

mec1mxoz

mec1mxoz2#

你提到了webpack,因为webpack是一个插件import something from "something"通常甚至不会转换为物理导入,这取决于插件如何优化块。所以在大多数情况下,这种类型的导入应该在大多数时候使用。
但是import("something").then(...,也就是动态导入,在你的应用变得很大的时候会很出色。假设你有一个 Jmeter 板,有很多小部件,如果你对每个小部件使用动态导入,你可以在加载小部件之前已经呈现了一些东西,如果你使用静态导入,所有代码都需要在你开始向用户显示任何东西之前加载。

相关问题