用于处理大型对象的 Javascript 构建系统答案

【问题标题】：Javascript build system to handle large objects用于处理大型对象的 Javascript 构建系统
【发布时间】：2012-07-13 16:59:33
【问题描述】：

我有一个巨大的 Javascript 网络应用程序，它开始变得管理一切变得很麻烦。我将所有内容分成小文件，每个文件都有自己的应用程序小节。

例如。如果应用程序名为“myApp”，我有一个名为

的文件

myApp.ajax.js 其中包含

myApp.ajax = (function(){return {/*stuff*/}})();

还有一个叫

myApp.canvas.js 包含

myApp.canvas = (function(){return {/*stuff*/}})();

以此类推。当我连接所有文件并缩小它们时，我会得到一个巨大的乱码。所以我想知道，是否有一个构建系统可以将所有这些 int 变成一个单一的

var myApp = {
   ajax: /*stuff*/,
   canvas: /*stuff*/,
   /*etc*/
}

什么时候编译所有东西？

我之所以问是因为我进行了一个小测试，并注意到将对象的每个部分分开时性能会严重下降。测试在这里：http://jsperf.com/single-object-vs-multiples

【问题讨论】：

【解决方案1】：

我不确定我是否明白这一点。连接和缩小 JavaScript 总是会导致相当混乱的混乱（至少阅读）。只要确保你先连接然后缩小，然后你使用的编译器就可以优化整个事情。

至于性能问题。 JSPerf 测试告诉我，附加模块的方式大约慢了 12%（至少在 Firefox 中，V8 似乎有所不同）。但是您只在应用程序加载时执行一次 - 而不是 1000000 次。这只会在页面加载时的几微秒内产生影响。

【讨论】：

【解决方案2】：

根据我从您的问题中收集到的信息以及我所看到的人们倾向于使用make 将多个 js 文件整理为一个，然后对其进行压缩等，请参阅this

【讨论】：

【解决方案3】：

是的，http://brunch.io/ 可以为您处理连接和类似的事情。

【讨论】：