ES10（2019 年 6 月发布）引入了 dynamic import() 语法，使得 JavaScript 模块的加载更加灵活和动态化。本文将详细介绍动态加载模块的语法和使用方法，并结合实际示例进行讲解。同时，我们也将探讨 dynamic import() 在项目中的应用场景，并给出一些指导意义。
动态加载模块的语法
通过使用 dynamic import()，我们可以在代码运行时动态加载一个或多个 JavaScript 模块。这与传统的静态 import 方式不同，传统方式的导入语句在编译时就会执行，而 dynamic import() 则是在运行时才会执行导入操作。
// 静态导入 import { add } from './math.js';
console.log(add(1, 2)); // 3
// 动态导入 import('./math.js').then((module) => { console.log(module.add(1, 2)); // 3 });
从上面的例子中，我们可以看到静态导入和动态导入之间的区别。静态导入是在编译时执行的，所以我们可以直接使用导入的模块，而动态导入是在运行时执行的，所以我们需要使用 Promise 的 then 方法来获取到导入的模块。
动态导入的返回值
由于动态导入是异步执行的，我们需要使用 Promise 来获取导入的模块。
import('./math.js').then((module) => { console.log(module.add(1, 2)); // 3 });
为了方便使用，ES10 的 dynamic import() 对象支持两种获取导入模块的方式，即通过 Promise 的 then 方法或 async/await 语法。
// 使用 then 方法获取导入的模块 import('./math.js').then((module) => { console.log(module.add(1, 2)); // 3 });
// 使用 async/await 语法获取导入的模块 async function main () { const module = await import('./math.js'); console.log(module.add(1, 2)); // 3 }
main();
除了模块的导入之外，dynamic import() 还能够返回 Promise 对象，我们可以利用 Promise 对象来判断模块是否导入成功。如果模块导入失败，则 Promise 对象会抛出一个错误。
import('./math.js') .then((module) => { console.log(module.add(1, 2)); }) .catch((error) => { console.log('模块导入失败：', error); });
动态导入的应用场景
动态导入可以帮助我们在多种场景下实现更加灵活和高效的代码加载。
懒加载
在某些应用场景下，我们需要根据用户的操作来动态加载相应的模块，这就是懒加载。动态导入提供了实现懒加载的方法。
// 不使用动态导入懒加载 const button = document.querySelector('button');
button.addEventListener('click', () => { const module = require('./module.js'); module(); });
// 使用动态导入懒加载 const button = document.querySelector('button');
button.addEventListener('click', async () => { const module = await import('./module.js'); module.default(); });
在上面的例子中，我们使用 button 元素的 click 事件来触发模块的加载。传统的方式需要使用 CommonJS 的 require 方法来加载模块，而使用动态导入则更加简单和高效。
条件加载
在某些场景下，我们需要根据条件来判断是否加载某个模块，这就是条件加载。动态导入也提供了实现条件加载的方法。
// 条件加载 if (process.env.NODE_ENV === 'production') { import('./module-production.js').then((module) => { module.default(); }); } else { import('./module-development.js').then((module) => { module.default(); }); }
在上面的例子中，我们使用条件语句来判断加载哪个模块。如果当前是生产环境，则加载 module-production.js 模块，否则加载 module-development.js 模块。
指导意义
通过本文的介绍，我们可以看到 dynamic import() 的使用方法和应用场景。在实际开发项目时，我们可以根据不同的需求来选择使用传统的静态导入方式还是动态导入方式。通过合理的使用 dynamic import()，我们可以使得项目的代码加载更加灵活高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67930556504e4ea9bd70cddb