GWT generated HTML file too large

Question

I have a huge GWT application where after I compile it, it generates a file XXX.chace.html. This file is very large -- about 3 MB -- and it requires the user to spend 30 seconds to load the webpage. Is there anyway to reduce this file other than using code splitting? I tried using the compress command in GZip, but apparently there's a bug filed to the effect that files larger than 1.5 MB wont be compressed.

Has anyone faced this issue before? How were you able to solve it?

Answer 1

Using code splitting will aid you in chunking up the code.

Unfortunately you'll need to look at how your app is setup to take advantage of it, but you'll definitely benefit from it, if you app is that huge.

Answer 2

if you don't want to use code splitting, your other option is to reduce the size of the code. Here are a few pointers.

1) Do you use a lot of text in your app, like several paragraphs on each page? You may consider using an ExternalTextResource instead of inlining your text in JavaScript.

2) Make a list of all widgets that you use in your app. See if you really need all of them. For example, if you use several types of LayoutPanels, you may decide to use just LayoutPanel. If you use VerticalPanel and/or HorizontalPanel, you can get rid of them altogether and use CSS instead. I noticed from many GWT postings that people like to use a lot of widgets (panel within panel within panel, etc), when a simple CSS would do just fine.

Note that you rip most of the benefits when you get rid of a widget completely (better yet of the whole class of widgets), rather than reduce the number of widgets in one view.

3) Use Ui:Binder as much as possible. Note that you can set many attributes in the Ui:Binder: class names, size, text for text widgets, tooltips. I believe it's more efficient that doing it in code (I did not verify it, but its a good practice anyway.)

4) Check if you use event handlers efficiently. If you have 10 buttons/labels in a row, you may not have to attach an event handler to each one of them, but rather attach one handler to their container. If a click on every cell in a row does the same thing (like brings up a dialog box), you don't have to include this code in each cell - you can catch a click on a row. Etc.

And here is a data point: I have an app with more than 50 complex "pages" (distinct places/views), over 30 data entities, more than 60 custom widgets, and over 1,000 text constants. It compiles to 1.2MB. (I use GWT RPC). I can only imagine what you can do with 3MB.