JavaScript中的Module Loader和Module Bundler有什么区别?

时间:2016-08-10 05:30:09

标签: javascript module

有人可以在JavaScript中提供有关模块加载器和模块捆绑器的一些信息吗?

  • 有什么区别?
  • 我应该何时使用模块加载器和模块捆绑器?
  • 为什么我们需要它们?

1 个答案:

答案 0 :(得分:43)

模块加载器和捆绑器都使得编写模块化JavaScript应用程序更具可操作性。让我给你一些背景知识:

模块加载器

模块加载器通常是一些库,可以加载,解释和执行您使用某种模块格式/语法定义的JavaScript模块,例如AMDCommonJS

编写模块化JavaScript应用程序时,通常每个模块最终只有一个文件。因此,在编写由数百个模块组成的应用程序时,确保包含所有文件并按正确顺序进行操作会非常痛苦。因此,基本上,加载程序将通过确保在执行应用程序时加载所有模块来为您处理依赖关系管理。查看一些流行的模块加载器,例如RequireJSSystemJS,以获得一个想法。

模块捆绑包

模块捆绑器是模块加载器的替代方案。基本上他们做同样的事情(管理和加载相互依赖的模块),但是作为应用程序构建的一部分而不是在运行时执行。因此,在执行代码时,捆绑器不会加载出现的依赖关系,而是在执行之前将所有模块拼接成一个文件(一个包)。请看WebpackBrowserify两个热门选项。

何时使用?

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

捆绑包的主要优点是它为您留下了浏览器必须下载的文件少得多。这可以为您的应用程序提供性能优势,因为可能减少加载所需的时间。 然而,取决于您的应用程序具有的模块数量,并非总是如此。特别是对于大型应用程序,模块加载器有时可以提供更好的性能,因为加载一个巨大的单片文件也可以阻止在开始时启动您的应用程序。所以你必须简单地测试并找出它。

ES6 / ES2015更新

请注意,ECMAScript 2015(或ES6)附带了自己的模块本机实现。您可以快速了解here