I’m working on a Rails app that uses Ext JS for the UI. The app runs fine but ext-all.js is really heavy and makes page loading slow.
I already tried creating a custom Ext JS build to reduce the file size but it didn’t help much. The script is still too big.
I’m using Rails 2.x and tried to implement caching for the JavaScript files. Regular JS files cache without issues, but when I cache the Ext JS files I get errors like Ext is not defined and other DOM problems.
What I need is either a way to properly compress the Ext JS files or enable gzip compression. I’ve searched online and found several compression methods but haven’t been able to make any of them work.
Has anyone dealt with this before? Any suggestions on how to compress Ext JS properly without breaking the functionality?
have you thought about splitting ext-all.js into smaller chunks? focus on what your app really needs. also, what compression ratio are you seeing? like a 30% reduction or just a little? the rails 2.x asset pipeline could be affecting your compression too.
Those Ext is not defined errors happen when your app code runs before the Ext JS library finishes loading. It’s a script order issue, not compression breaking things. I’ve hit this same problem when optimizing Rails asset pipelines. Split your Ext JS into separate files and make sure the core library loads first before anything that depends on it. YUI Compressor worked great for me on Rails 2.x projects - never broke Ext JS. Also check your cache headers aren’t too aggressive. Sometimes they mess with JavaScript dependency loading.
Interesting issue! What exactly happens when you say the custom build “didn’t help much” - how much size reduction did you get? Also, where are you loading ExtJS in your Rails config - head or before the closing body tag? The timing might be causing those caching errors.
Try lazy loading your Ext JS components instead of dumping everything upfront. I had the same issue with ext-all.js killing performance on a Rails 2.x project. Instead of compressing the whole library, I split it into separate module files that only load when you actually need those UI components. Page loads got way faster since users only grab the core framework plus whatever’s needed for that specific view. Just restructure your Rails views to conditionally include different Ext JS modules based on your controller action. Cut my initial JS payload by about 60% and everything still works perfectly.
switch to uglifyjs instead of yui compressor - i had way better luck with extjs using that. also, are u using a cdn for your ext files? local compression can cause strange issues, and cdn versions usually load faster anyway.