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/它处理级联和像你这样的东西。