JavaScript语法特性篇-动态导入 import()

1、基本使用

import() 语法,通常被称为动态导入,是一个类似函数的表达式,它允许异步和动态地将 ECMAScript 模块加载到一个可能不是模块的环境中。

与声明式的导入相对应,动态导入只在需要时进行计算,并且允许更大的语法灵活性。

简单来说,使用 import() 语法,你可以在运行时(而不是在编译时)决定要导入哪个模块,并且这种导入是异步的,不会阻塞代码的执行。

await import('/modules/my-module.js')

2、与静态导入区别

静态导入是在 JavaScript 模块中声明时直接指定要导入的模块,是 ES6 中标准导入的方式。

// mathFunctions.js  
export function add(a, b) {  
  return a + b;  
}  
  
export function subtract(a, b) {  
  return a - b;  
}

// main.js
// 静态导入 mathFunctions.js 中函数
import { add, subtract } from './mathFunctions.js';  
  
console.log(add(1, 2)); // 输出 3  
console.log(subtract(3, 1)); // 输出 2

动态导入使用 import() ,其调用非常类似于函数调用语法,但 import 本身是一个关键字,不是一个函数。它返回一个 Promise,这个 Promise 解析为导入的模块对象。

假设需要再用户点击按钮后才加载并执行某个模块中的代码,可以采用点击时触发动态导入。

// button.js  
document.querySelector('#loadModuleButton').addEventListener('click', async () => {  
  try {  
    const module = await import('./dynamicModule.js');
    // dynamicModule.js 导出了一个名为 dynamicFunction 的函数  
    console.log(module.dynamicFunction());
  } catch (error) {  
    console.error('Error loading module:', error);  
  }  
});

// dynamicModule.js  
export function dynamicFunction() {  
  return 'This is a dynamically loaded function!';  
}

当用户点击 ID 为 loadModuleButton 的按钮时,JavaScript 会异步加载并执行 dynamicModule.js 文件中的代码。

3、动态导入使用场景

导入声明语法(如 import something from "somewhere")是静态的,并且总是在加载时评估导入的模块。动态导入允许人们绕过导入声明的语法刚性,并条件性地或按需加载模块。以下是可能需要使用动态导入的一些原因:

  1. 当静态导入显著减慢代码加载速度或增加程序内存使用,并且你导入的代码被使用的可能性很低,或者直到稍后才需要它

  2. 当你要导入的模块在加载时不存在

  3. 当导入标识符字符串需要动态构造时。(静态导入仅支持静态标识符)

  4. 当被导入的模块有副作用,而你不想在条件不满足时产生这些副作用

  5. 当你处在一个非模块环境(例如,eval 或一个脚本文件)时

仅在必要时使用动态导入。对于加载初始依赖项,静态形式更可取,并且可以更容易地从静态分析工具和“树摇”中受益。

如果你的文件不是作为模块运行的(如果它在 HTML 文件中被引用,则

你可能感兴趣的:(JS学习资料,javascript,前端,开发语言,动态导入,静态导入,import)