处理大型对象的 Javascript 构建系统

Question

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

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

的文件

myApp.ajax.js 其中包含

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

还有一个叫

myApp.canvas.js 其中包含

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

等等等等。当我连接所有文件并缩小它们时，我得到了所有这些的巨大乱码。所以我想知道，是否有一个构建系统可以将所有这些整合为一个

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

什么时候编译一切？

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

Answer 1

我不确定我是否明白这一点。连接和缩小 JavaScript 总是会以相当困惑的方式结束(至少在阅读时是这样)。只需确保先连接然后缩小，然后您使用的编译器就可以优化整个过程。

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