2016-08-10 38 views
6

有人可以提供有关JavaScript中的模块加载器和模块捆绑器的一些信息吗?JavaScript中的Module Loader和Module Bundler有什么区别?

  • 有什么区别?
  • 何时应该使用模块加载程序以及何时使用模块捆绑器?
  • 为什么我们需要他们呢?
+0

是的,任何人都可以使用您选择的搜索引擎获得此类信息 –

+0

@JKL我知道我的回答迟到,但看看它是否有帮助。 – benjiman

回答

16

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

模块装载机

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

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

模块捆扎机

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

什么时候用什么?

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

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

ES6/ES2015更新

需要注意的是2015年的ECMAScript(或ES6),用它自己的,本地实现的模块。您可以快速获得简介here

+0

真的很有帮助在同一个地方看到以上所有内容。你认为值得添加[Rollup.js](https://rollupjs.org)吗? –

+0

可能值得注意的是,使用像Webpack这样的工具,可以利用_Code Splitting_,它允许将代码拆分成按需加载的块,从而缓解正在生成的单个单一文件的问题。 https://webpack.github.io/docs/code-splitting.html – atconway

相关问题