Highlighted

ext-all.js file so large in CF2018

Community Beginner ,
Jul 09, 2019

Copy link to clipboard

Copied

Why is the ext-all.js file (cf_scripts/scripts/ajax/ext/ext-all.js) over 10MB in size? We went from CF10 to CF2018 and have 40+ legacy apps that use the cfwindow and some other CF UI built-in functions from CF10 and the app calls the ext-all.js file wihen the site loads (needed for cfwindow) and takes almost 2 minutes. Yes, I know they need replaced but with two developers and 40+ medium to larger applications it's not possible to replace these cfwindows with jquery or bootstrap modal windows quickly, especially when you still have other projects going on. Does anyone have any ideas or options to reduce the file size or any other workarounds (besides removing cfwindows) to speed the load time. Thanks.

There's no real way to do this. The last time I checked in CF9/10, these resource files are blindly included immediately below the first HEAD tag using a post-CFML CFHeader-type approach.  Our optimization tools stated <meta charset="utf-8"> should come before other things and any use of a CFUI tag prevented this from happening.

For a simple CFForm with a single "required" CFInput field, two (2) unminified JS files from 2012 totalling about 15k are loaded. (The validation method result in an unstylable, old-school "Alert" dialog.)  In cases like this, it's best to use HTML5 w/the "required" attribute and eliminate the use of CFForm altogether.

We once added IIS rules to rewrite certain file requests to a slightly modified versions of the files when we wanted to overcome a CFFORM issue.  (We also added long expire headers.)

As an example of some modern, responsive CFUI replacements, we use Tippyjs, MagnificPopUp, Select2, SweetAlert2, DateRangePicker, TimePicker and jQuery Validation.  Many of these libraries are easier to integrate than performing the configuration required for CFUI tags. Alternatives are definitely more customizable, updated more frequently and more accessible.

A repository titled "ColdFusion UI the Right Way" offers some other alternatives:
GitHub - cfjedimaster/ColdFusion-UI-the-Right-Way: A list of articles demonstrating how to do UI with ColdFusion on the …

Views

448

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

ext-all.js file so large in CF2018

Community Beginner ,
Jul 09, 2019

Copy link to clipboard

Copied

Why is the ext-all.js file (cf_scripts/scripts/ajax/ext/ext-all.js) over 10MB in size? We went from CF10 to CF2018 and have 40+ legacy apps that use the cfwindow and some other CF UI built-in functions from CF10 and the app calls the ext-all.js file wihen the site loads (needed for cfwindow) and takes almost 2 minutes. Yes, I know they need replaced but with two developers and 40+ medium to larger applications it's not possible to replace these cfwindows with jquery or bootstrap modal windows quickly, especially when you still have other projects going on. Does anyone have any ideas or options to reduce the file size or any other workarounds (besides removing cfwindows) to speed the load time. Thanks.

There's no real way to do this. The last time I checked in CF9/10, these resource files are blindly included immediately below the first HEAD tag using a post-CFML CFHeader-type approach.  Our optimization tools stated <meta charset="utf-8"> should come before other things and any use of a CFUI tag prevented this from happening.

For a simple CFForm with a single "required" CFInput field, two (2) unminified JS files from 2012 totalling about 15k are loaded. (The validation method result in an unstylable, old-school "Alert" dialog.)  In cases like this, it's best to use HTML5 w/the "required" attribute and eliminate the use of CFForm altogether.

We once added IIS rules to rewrite certain file requests to a slightly modified versions of the files when we wanted to overcome a CFFORM issue.  (We also added long expire headers.)

As an example of some modern, responsive CFUI replacements, we use Tippyjs, MagnificPopUp, Select2, SweetAlert2, DateRangePicker, TimePicker and jQuery Validation.  Many of these libraries are easier to integrate than performing the configuration required for CFUI tags. Alternatives are definitely more customizable, updated more frequently and more accessible.

A repository titled "ColdFusion UI the Right Way" offers some other alternatives:
GitHub - cfjedimaster/ColdFusion-UI-the-Right-Way: A list of articles demonstrating how to do UI with ColdFusion on the …

Views

449

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 09, 2019 0
Engaged ,
Jul 10, 2019

Copy link to clipboard

Copied

There's no real way to do this. The last time I checked in CF9/10, these resource files are blindly included immediately below the first HEAD tag using a post-CFML CFHeader-type approach.  Our optimization tools stated <meta charset="utf-8"> should come before other things and any use of a CFUI tag prevented this from happening.

For a simple CFForm with a single "required" CFInput field, two (2) unminified JS files from 2012 totalling about 15k are loaded. (The validation method result in an unstylable, old-school "Alert" dialog.)  In cases like this, it's best to use HTML5 w/the "required" attribute and eliminate the use of CFForm altogether.

We once added IIS rules to rewrite certain file requests to a slightly modified versions of the files when we wanted to overcome a CFFORM issue.  (We also added long expire headers.)

As an example of some modern, responsive CFUI replacements, we use Tippyjs, MagnificPopUp, Select2, SweetAlert2, DateRangePicker, TimePicker and jQuery Validation.  Many of these libraries are easier to integrate than performing the configuration required for CFUI tags. Alternatives are definitely more customizable, updated more frequently and more accessible.

A repository titled "ColdFusion UI the Right Way" offers some other alternatives:
GitHub - cfjedimaster/ColdFusion-UI-the-Right-Way: A list of articles demonstrating how to do UI wit...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 10, 2019 2
Community Beginner ,
Jul 11, 2019

Copy link to clipboard

Copied

Thanks for the info Jamo and it's mostly what I thought. We have started to rip out and replace some of the old CF UI functionality. It will be a lot of late nights but in the long run it will be better.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 11, 2019 0
Adobe Community Professional ,
Jul 14, 2019

Copy link to clipboard

Copied

Jamo's answer is the right answer for sure. In the meantime, have you tried minifying the ext-all.js file if it's not already minified? That should buy you some time.

Dave Watts, Eidolon LLC

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 14, 2019 1
Bardnet LATEST
Participant ,
Jul 14, 2019

Copy link to clipboard

Copied

Hi Dave,

that's an interesting point. I just looked into a ColdFusion 2018 folder and see ext-all-debug.js and ext-all.js are identic.

When you use nodejs, you can use uglifyjs to compress the file like: uglifyjs ext-all-debug.js -o ext-all.js -c -m

For me the file was compresssed to 2 MB down from 10 MB

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 14, 2019 0