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

Question

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

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

Answer 1

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

模块加载器

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

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

模块捆绑包

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

什么时候用？

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

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

ES6/ES2015更新

请注意,ECMAScript 2015(或ES6)附带了自己的模块本机实现.你可以在这里快速介绍一下.