Система сборки 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

Да, есть http://brunch.io/, который обрабатывает конкатенацию и тому подобное для вас.

Answer 3

Из того, что я понял из вашего вопроса, и из того, что я видел, люди, как правило, используют make для сопоставления нескольких файлов js в один, а затем запускают сжатие и т. Д., См. this