2013-12-11 44 views
11

我正在使用RequireJS作为我的web应用程序。我使用EmberJS作为应用程序框架。我认为,我应该开始将我的应用程序捆绑到一个js文件中。这是我有点困惑的地方:RequireJS:要捆绑还是不捆绑

如果我最终将所有东西都捆绑到一个文件中进行部署,那么我的整个应用程序将一次加载,而不是按需加载。一般来说捆绑与AMD并不矛盾,特别是RequireJS?

什么进一步混淆了我,是我的RequireJS网站上找到:

一旦你完成了做开发,并希望部署代码为最终用户,则可以使用优化的JavaScript结合一起文件并缩小它。在上面的例子中,它可以将main.js和helper/util.js组合成一个文件并缩小结果。

我发现这个similar thread但它不回答我的问题。

回答

19

如果我最终将所有内容都捆绑到一个文件中进行部署,那么我的整个应用程序将一次加载,而不是按需加载。一般来说捆绑与AMD并不矛盾,特别是RequireJS?

这并不矛盾。根据需要加载模块只需一个受益于RequireJS。我的书中更大的好处是模块化有助于使用分而治之的方法。我们可以这样看待它:尽管我们放在单个文件中的所有函数和类都不能从按需加载中受益,但我们仍然编写多个函数和多个类,因为它有助于以结构化方式分解问题。

但是,我们在开发中创建的模块的多样性在浏览器中运行应用程序时并不一定有意义。按需加载的最大成本是通过线路发送多个HTTP请求。假设您的应用程序有10个模块,并且您发送10个请求来加载它,因为您分别加载这些模块。您的总成本将是您必须支付的费用,以便从10个文件中加载字节(我们称之为Pc为有效载荷成本),为每个HTTP请求的开销成本(我们称之为Oc, )。开销与必须发生的数据和计算有关,以启动和关闭这些请求。它们不是微不足道的。所以你正在支付Pc + 10 * Oc。如果您将所有内容发送到一个块中,您需要支付Pc + 1 * Oc。您已保存9 * Oc。事实上,节省可能更大,因为(如果压缩通常用于两端以减小传输的数据的大小),如果将整个数据压缩在一起,则压缩将提供更大的益处,如果压缩为10块。 (注意:上述分析忽略了不覆盖有用的细节。)

有人可能会提出反对:“但你是在分别与装载所有在一个块模块比较装载所有模块如果我们按需加载,然后我们不会加载所有模块。“事实上,大多数应用程序都有一个永远会被加载的模块核心,无论如何。这些模块没有它,应用程序将不会工作根本就是。对于一些小应用程序来说,这意味着所有的模块,所以将它们全部捆绑在一起是有意义的。对于更大的应用程序,这意味着每次应用程序运行时都会使用一组核心模块,但只有偶尔会使用一小组模块。在后一种情况下,优化应该创建多个捆绑包。我有这样的application。它是一种编辑器,具有各种编辑需求的模式。好的90%的模块属于核心。他们将被加载和使用无论如何所以它是有道理的捆绑他们。模式本身的代码并不总是被使用,但是如果模式被加载,那么给定模式的所有文件都将被需要,因此每个模式应该是它自己的包。因此,在这种情况下,具有一个核心捆绑包和一系列模式捆绑包的模型对于a)优化部署的应用程序是有意义的,但b)保持按需加载的一些好处。这就是RequireJS的美妙之处:它不需要专门做一个或另一个。

+1

感谢您的详细解答。这非常合理。 –

+0

优秀的回应。你如何使用requirejs来完成配置和加载这些不同的bundle? –

+1

@Johnathon我已经介绍了一些如何在[这个答案]中做到这一点的细节(https://stackoverflow.com/questions/20469611/r-js-understand-requirejss-r-js-optimizer/20469976# 20469976)。 – Louis

2

在开发过程中,您希望拥有单一重点的小文件。这导致他们的人数增加。在生产环境中运行时,许多HTTP请求确实会影响性能。然后再次您不希望预先加载整个应用程序 - 这也不是最佳的。

为了解决这个问题,我在GitHub中创建了一个小项目,require-lazy,您可以将其称为插件到构建器 - r.js.它可以使用简单的语法延迟加载应用程序的某些部分,然后在构建过程中分别创建不可加载的包;所以如果你的应用程序由2个需要独立加载的视图组成,需要懒惰的(理想情况下)将构建3个js文件:(1)引导代码和公共库,(2)视图1及其所有私有脚本和)查看2及其所有私人脚本。

延迟加载被简单地定义为:

define(["lazy!view1"], function(view1) { .... }); 

而且view1必须承诺进行访问:

view1.get().done(function(realView1) { 
    ... 
}); 

该项目可通过NPM,通过繁重的构建过程,有一个凉亭组件。

评论是非常欢迎。

+0

听起来很有趣。将在某个时候给它一个镜头。现在,我将与@Louis的答案一起回答我的问题。 –

+0

当然,RequireJS在2014年初添加了捆绑功能 –