Combine all the YUI 2.8 javascript into a single javascript file. Well, two, one of all the minified files, and one of all the debug files. Use the @ResourceDependency annotations in TabSetMeta to drive this.

Create logical groupings of javascript files for the new ACE components. Possibly jquery and jquery-i and core should be combined. And, for example, if there are a lot of very small files, those should all be grouped into one single file. We should come up with some sort of cutoff, where if we have some very large files, those are kept separate, so apps don't incur their overhead if those components are not in use. It would be nice if components were logically grouped, so for example, all of the various menu related components were all put together.

We should then create minified copies of these combined files, so that ICE-6195 may then allow for switching between them based on project stage.

Look into combining the css files too. We've had problems in the past using minification on css though.

Update all the component @Resource dependencies to use the combined files instead of the individual files.

cd ace/component/resources/icefaces.ace
ls -l `find . -name *.js | grep -v .svn`
4446 ./accordion/accordion.js
1451 ./animation/animation.js
6487 ./checkboxbutton/checkboxbutton.js
2101 ./confirmationdialog/confirmationdialog.js
1184 ./contextmenu/contextmenu.js
14539 ./core/core.js
1918 ./dataexporter/dataexporter.js
44478 ./datatable/datatable.js
45075 ./datetimeentry/datetimeentry.js
3861 ./dialog/dialog.js
2360 ./dnd/dragdrop.js
11940 ./fileentry/fileEntry.js
236201 ./jquery/jquery.js
355121 ./jquery/ui/jquery-ui.js
5834 ./linkbutton/linkbutton.js
7316 ./maskedentry/maskedentry.js
5163 ./menu/menu.js
2059 ./notificationpanel/notificationpanel.js
72469 ./paginator/paginator.js
4242 ./panel/panel.js
2006 ./printer/printer.js
4126 ./progressbar/progressbar.js
5379 ./pushbutton/pushbutton.js
2545 ./resizable/resizable.js
4066 ./sliderentry/slider.js
12112 ./tableconfigpanel/tableconfigpanel.js
26424 ./tabset/tabset.js
381988 ./together-min.js
762844 ./together.js
85473 ./tooltip/jquery.qtip-1.0.0-rc3.js
38404 ./tooltip/jquery.qtip-1.0.0-rc3.min.js
5195 ./tooltip/jquery.qtip.debug-1.0.0-rc3.js
1787 ./tooltip/tooltip.js
24954 ./util/combined.js
68906 ./util/combined.js.tmp.js
7690 ./util/component.js
3526 ./util/util.js
156983 ./wijmo/wijmo.js
71098 ./yui/paginator/paginator-debug.js
23029 ./yui/paginator/paginator-min.js
71098 ./yui/paginator/paginator.js
124338 ./yui/utilities/utilities.js

cat ./jquery/jquery.js ./jquery/ui/jquery-ui.js ./wijmo/wijmo.js ./core/core.js > together.js
java -jar ../../../../lib/yui-compressor.jar --preserve-semi -o together-min.js together.js
ls -l together*.js
381988 together-min.js
762844 together.js

Add in 25 KB for combined.js (which is already minified), and our total compressed size for all our common javascript is about 400 KB. That's still not counting javascript specific to the actual components.

cat ./accordion/accordion.js ./animation/animation.js ./confirmationdialog/confirmationdialog.js ./contextmenu/contextmenu.js ./dataexporter/dataexporter.js ./datatable/datatable.js ./datetimeentry/datetimeentry.js ./dialog/dialog.js ./dnd/dragdrop.js ./fileentry/fileEntry.js ./maskedentry/maskedentry.js ./menu/menu.js ./notificationpanel/notificationpanel.js ./paginator/paginator.js ./panel/panel.js ./printer/printer.js ./progressbar/progressbar.js ./resizable/resizable.js ./sliderentry/slider.js ./tableconfigpanel/tableconfigpanel.js ./tooltip/jquery.qtip-1.0.0-rc3.min.js ./tooltip/tooltip.js > all-comps.js

java -jar ../../../../lib/yui-compressor.jar --preserve-semi -o all-comps-min.js all-comps.js
ls -l all-comps*
146619 all-comps-min.js
278751 all-comps.js

So about another 145 KB for all the components. That's excluding YUI, which 1-2 components rely on. More than half a MB, compressed, before YUI, indicated that regular minification might not cut it. We should probably look into the minification tools that examine the javascript and cut out the code that's not actually being used.

As it stands, using our mostly non-minified code, we're serving out 762844 + 24954 + 278751, which is about 1 MB. Plus YUI. And that might really be two versions of YUI, one for legacy ACE and one for pagination.

It looks like only the menu related components, and panel make use of wijmo, which takes up 156983 bytes unminified. If we were to partition the components, that would be a good place, as long as core.js doesn't rely on wijmo.js. I did find a small dependency on YAHOO, which we'll have to move elsewhere.

The other obvious partition is the legacy ACE components that still rely on YUI.

The minified javascript seems to still contain copyright notices, to we'll have to figure out how to remove those.

The initial idea was to create 5 concatenated files ace-yui.js, ace-jquery.js, ace-datatable.js, ace-menu.js, and ace-components.js with the following contents:

ace-yui.js
yui/2_8_2/yahoo-dom-event/yahoo-dom-event.js
yui/2_8_2/element/element.js
yui/2_8_2/button/button.js
yui/2_8_2/tabview/tabview.js
icefaces.ace/util/util.js
icefaces.ace/util/component.js
icefaces.ace/tabset/tabset.js
icefaces.ace/checkboxbutton/checkboxbutton.js
icefaces.ace/linkbutton/linkbutton.js
icefaces.ace/pushbutton/pushbutton.js

ace-jquery.js
icefaces.ace/jquery/jquery.js
icefaces.ace/jquery/ui/jquery-ui.js
icefaces.ace/core/core.js

ace-datatable.js
icefaces.ace/yui/utilities/utilities.js
icefaces.ace/datatable/datatable.js
icefaces.ace/paginator/paginator.js
icefaces.ace/tableconfigpanel/tableconfigpanel.js
icefaces.ace/dataexporter/dataexporter.js

ace-menu.js
icefaces.ace/wijmo/wijmo.js
icefaces.ace/menu/menu.js

ace-components.js
icefaces.ace/datetimeentry/datetimeentry.js
icefaces.ace/maskedentry/maskedentry.js
icefaces.ace/dialog/dialog.js
icefaces.ace/dnd/dragdrop.js
icefaces.ace/progressbar/progressbar.js
icefaces.ace/resizable/resizable.js
icefaces.ace/sliderentry/slider.js
icefaces.ace/confirmationdialog/confirmationdialog.js
icefaces.ace/panel/panel.js
icefaces.ace/animation/animation.js
icefaces.ace/accordion/accordion.js
icefaces.ace/notificationpanel/notificationpanel.js
icefaces.ace/fileentry/fileEntry.js
icefaces.ace/printer/printer.js
icefaces.ace/tooltip/jquery.qtip-1.0.0-rc3.js
icefaces.ace/tooltip/tooltip.js

ace-yui.js, ace-jquery.js, and ace-menu.js work well, but the other two files ace-datatable.js and ace-components.js have been generating all sorts of javascript errors that seem very illogical. This happens in both modes compressed and non-compressed. Code of different components is being marked with errors depending on the order in which they appear in the file. Also, sometimes an error occurs because of another file is present and appears after the point where the error is marked. I managed to prevent all the errors in ace-components.js by separating the last 4 files in the list in another concatenated file, but it's still not clear what is the root of all these errors.

The file sizes for the not compressed files are as follows:
ace-components/js 182kb
ace-datatable.js 251kb
ace-jquery.js 592kb
ace-menu.js 158kb
ace-yui.js 282kb

Fixed issue described above by adding semi-colons at the end of function/method declarations of the form f = function()

;

Also, combined CSS resources into one file (combined.css).

The file distribution remains as initially intended and listed above.

Related revisions: 26772, 26796, 26804.