掌握JavaScript模块导入的奥秘：import、import()和require()大PK
2023-12-16 09:57:16
JavaScript 模块导入: import、import() 和 require()
在 JavaScript 的世界里，模块扮演着至关重要的角色，它们赋予了代码井然有序的结构和强大的复用性。对于模块导入，有三种不可或缺的重量级选手：import、import() 和 require()。
import：模块导入的常青树
import 是 JavaScript 模块导入界的老大，使用它，你可以毫不费力地将其他模块的内容引入当前模块。它就像一个尽职尽责的搬运工，将你需要的所有内容悉数搬运过来，让你可以自由自在、随心所欲地使用。
举个栗子🌰：
import { greet } from './greeter.js';
greet('Hello, world!');
在这段代码中，我们使用 import 从 greeter.js 模块导入了 greet 函数，然后就可以直接调用它来打个招呼了。是不是非常简单易行？
import()：动态导入的冉冉新星
import() 是一个新晋黑马，专门为动态导入而生。顾名思义，动态导入就是允许你在运行时灵活地决定需要导入哪些模块。这就好比你逛超市时，可以根据自己的需求随时调整购物车里的商品。使用 import()，你只需在括号里指定要导入的模块路径，就能实现动态导入。
代码长这样：
import('./greeter.js').then((module) => {
const greet = module.greet;
greet('Hello, world!');
});
在这段代码中，我们使用 import() 动态导入 greeter.js 模块，然后在模块加载完成后再调用 greet 函数打招呼。是不是非常灵活呢？
require()：老江湖再出江湖
require() 是一位久经沙场的江湖老手，在 CommonJS 规范中叱咤风云。require() 和 import 类似，也可以用来导入模块。不过，require() 有一个明显的特点，就是它需要在模块加载完成后才能使用。换句话说，你必须先用 require() 把模块导入进来，然后再使用模块中的内容。
比如这样：
const greeter = require('./greeter.js');
greeter.greet('Hello, world!');
在这段代码中，我们使用 require() 导入 greeter.js 模块，然后就可以直接调用 greeter.greet 函数打招呼了。是不是有点像 import？
常见问题解答
-
import 和 import() 有什么区别？
import 用于静态导入模块，即在代码执行之前就已经确定要导入的模块。而 import() 用于动态导入模块，即可以在运行时再决定要导入哪些模块。 -
require() 和 import 有什么区别？
require() 和 import 都是用于导入模块的，但 require() 需要在模块加载完成后才能使用，而 import 可以立即使用导入的模块。 -
哪种模块导入方式更好？
import 和 import() 是 ES 模块的标准导入方式，而 require() 是 CommonJS 模块的导入方式。一般来说，推荐使用 import 和 import()，因为它们更加现代化，并且与 ES 模块兼容。 -
如何处理模块间的循环依赖？
在模块导入中，可能会遇到模块间的循环依赖问题。为了解决这个问题，可以采用惰性加载、代理模式或循环引用打破等技术。 -
如何使用 tree-shaking 优化模块打包？
tree-shaking 是 webpack 等构建工具提供的功能，它可以自动剔除未使用的模块代码，从而优化模块打包体积。
