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次。这只会在页面加载时的微秒内产生差异。

Answer 2

从我从你的问题收集的内容和我看到的内容，人们倾向于使用make将多个js文件整理成一个，然后对其进行压缩等，请参阅this

Answer 3

是的，有http://brunch.io/处理串联和类似的事情。