javascript - JavaScript 中的模块加载器和模块 bundler 有什么区别？

Question

有人可以提供一些有关 JavaScript 中的模块加载器和模块 bundler 的信息吗？

• 有什么区别？
• 什么时候应该使用模块加载器，什么时候应该使用模块 bundler ？
• 我们为什么需要它们？

Answer 1

模块加载器和 bundler 都使编写模块化 JavaScript 应用程序更加可行。让我给你一些背景知识:

模块加载器

模块加载器通常是一些库，可以加载、解释和执行您使用特定模块格式/语法定义的 JavaScript 模块，例如 AMD或CommonJS .

当您编写模块化 JavaScript 应用程序时，通常每个模块都会有一个文件。因此，在编写由数百个模块组成的应用程序时，确保所有文件都包含在内且顺序正确可能会非常痛苦。因此，基本上加载程序将通过确保在执行应用程序时加载所有模块来为您处理依赖项管理。查看一些流行的模块加载器，例如 RequireJS和 SystemJS得到一个想法。

模块 bundler

模块 bundler 是模块加载器的替代方案。基本上，它们做同样的事情(管理和加载相互依赖的模块)，但将其作为应用程序构建的一部分而不是在运行时进行。因此，捆绑程序不会在执行代码时加载依赖项，而是在执行之前将所有模块拼接到一个文件( bundle )中。看看Webpack和 Browserify作为两个流行的选择。

何时使用什么？

哪一个更好取决于您的应用程序的结构和大小。

捆绑程序的主要优点是，它使浏览器需要下载的文件少得多。这可以为您的应用程序带来性能优势，因为它可能减少加载所需的时间。但是，根据您的应用程序拥有的模块数量，情况并不总是如此。特别是对于大型应用程序，模块加载器有时可以提供更好的性能，因为加载一个巨大的整体文件也可能会阻止从一开始就启动您的应用程序。因此，您必须简单地测试并找出答案。

ES6/ES2015 更新

请注意，ECMAScript 2015(或 ES6)附带了它自己的模块的 native 实现。您可以获取快速介绍here和 here .