1. #1
    Sencha User
    Join Date
    Jan 2010
    Posts
    132
    Answers
    2
    Vote Rating
    1
    darkling235 is on a distinguished road

      0  

    Default Answered: Minify/Compression

    Answered: Minify/Compression


    Has anyone tried to minify or compress their javascript/html/css files?
    I'm just wondering if anyone can speak to how hard it is and how effective it was in increasing performance. We have a fairly large application (about 10 megs total of source code divide up across split points, add in another 5 to 10 megs of CSS, graphics, and external native javascript files) and I'm considering trying to compress this.

    Our data load is pretty light but the amount of source code and graphics are all are very weighty.

    Can anyone speak to how effective this is and how to go about it or even in what cases it is advisible to do so?

    Thanks

  2. If you have 15-20 megs being pulled into the browser on page load, it will probably be a problem, soon if not already. The gxt explorer weighs in at about 2.5-3 mb, using just about every widget in the library and a screenshot for each example, so I'm a little curious as to how you've managed to get that big, but also how much of that number is the GWT generated code (i.e. GWT, GXT, and your Java that compiles to JS) - the size of the .nocache.js (bootstrap), the .cache.html (the main download), and the .cache.js (the split points) that a given browser downloads.

    You say that the main concern is 'the externals', images, html, and other scripts. I'm not sure what form those templates and images come in, but a 1mb image is pretty large, and a 1mb script or html file is an application onto itself. If these *aren't* gwt related and you can't share the details, I'm not sure how this forum can help...

    CSS can be minified to a degree, and there are scripts out there that knock out comments and whitespace. JavaScript and HTML can be given the same treatment, to a degree, and some JavaScript can be rewritten (check out the YUI compressor or the Google Closure Compiler for some examples) to still work as expected, but to simplify some code. Images can often be reencoded to use less space. Check out the YSlow and Google Page Speed plugins for Firebug for some measurement tools on what is making your page load slow.

    but are not actually part of the GXT compilation and are downloaded separately using (mostly) templates and <script> tags. This seems ineffecient to me and I was hoping to compress some of these external files.
    It depends on how they are being loaded and when they are needed. It may be possible to use ClientBundle's TextResource feature to include them in the .cache.html file as text and inject them when ready, but it really depends on how you are consuming these. Note please that html files referenced as part of a XTemplate method are already rewritten into JavaScript (i.e. the {variable} blocks are replaced with actual code, the <tpl> tags with if/for blocks), so don't consider the size of the original source code of the GWT project when looking at how big the app might be.

  3. #2
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,731
    Answers
    109
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    Your JavaScript should already be minified - by default, GWT compiles with style set to OBF, and classes, methods, and variables are rewritten to have 1-3 letter names. Are you sure you haven't set style to some other value, thus disabling the built-in minification?

    How are you building your app? Can you post how you invoke the compiler, and your module file?

    One last point - are you counting these sizes as including all permutations at once? Each browser only downloads the exact permutation it requires, so you don't need to worry about a single browser downloading every compiled file.

    If you are unable to share details about your app here, you might consider opening a support ticket to enable us to more closely look at your application.

  4. #3
    Sencha User
    Join Date
    Jan 2010
    Posts
    132
    Answers
    2
    Vote Rating
    1
    darkling235 is on a distinguished road

      0  

    Default


    I'm sorry let me clarify.
    I'm not really so concerned about the source code, or not the GXT code anyway, it's all the externals. We have a lot of external images, html, external native javascript which are used by the application but are not actually part of the GXT compilation and are downloaded separately using (mostly) templates and <script> tags. This seems ineffecient to me and I was hoping to compress some of these external files.

  5. #4
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,731
    Answers
    109
    Vote Rating
    90
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    If you have 15-20 megs being pulled into the browser on page load, it will probably be a problem, soon if not already. The gxt explorer weighs in at about 2.5-3 mb, using just about every widget in the library and a screenshot for each example, so I'm a little curious as to how you've managed to get that big, but also how much of that number is the GWT generated code (i.e. GWT, GXT, and your Java that compiles to JS) - the size of the .nocache.js (bootstrap), the .cache.html (the main download), and the .cache.js (the split points) that a given browser downloads.

    You say that the main concern is 'the externals', images, html, and other scripts. I'm not sure what form those templates and images come in, but a 1mb image is pretty large, and a 1mb script or html file is an application onto itself. If these *aren't* gwt related and you can't share the details, I'm not sure how this forum can help...

    CSS can be minified to a degree, and there are scripts out there that knock out comments and whitespace. JavaScript and HTML can be given the same treatment, to a degree, and some JavaScript can be rewritten (check out the YUI compressor or the Google Closure Compiler for some examples) to still work as expected, but to simplify some code. Images can often be reencoded to use less space. Check out the YSlow and Google Page Speed plugins for Firebug for some measurement tools on what is making your page load slow.

    but are not actually part of the GXT compilation and are downloaded separately using (mostly) templates and <script> tags. This seems ineffecient to me and I was hoping to compress some of these external files.
    It depends on how they are being loaded and when they are needed. It may be possible to use ClientBundle's TextResource feature to include them in the .cache.html file as text and inject them when ready, but it really depends on how you are consuming these. Note please that html files referenced as part of a XTemplate method are already rewritten into JavaScript (i.e. the {variable} blocks are replaced with actual code, the <tpl> tags with if/for blocks), so don't consider the size of the original source code of the GWT project when looking at how big the app might be.

  6. #5
    Sencha User
    Join Date
    Jan 2010
    Posts
    132
    Answers
    2
    Vote Rating
    1
    darkling235 is on a distinguished road

      0  

    Default


    It is definitely already a problem. The chief issue being that we were using a very top heavy (and old) native javascript library to do chart and graph building for us. Fortunately I've since learned this will be removed from the next release which helps our app slim down considerably.
    Thank you for all the insight

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."