New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make minimized js build automatically #949

Closed
TimLethbridge opened this Issue Jan 15, 2017 · 7 comments

Comments

Projects
None yet
4 participants
@TimLethbridge
Member

TimLethbridge commented Jan 15, 2017

Umpleonline is loading a lot slower than it used to. It seems that joint.js is a particularly large file being loaded in _load.js and may be the culprit. We need to experiment with loading this only 'on demand' when a request is first made for joint diagrams, and/or minimizing it.

@jblang94

This comment has been minimized.

Show comment
Hide comment
@jblang94

jblang94 Jan 30, 2017

Contributor

I thought that I'd share the following in case it helps with diagnosing this issue. I experienced a slow UmpleOnline load while I was working at home today, and confirmed that my internet connection was not the cause. As the page was loading, I opened the "Networking" tab in Google Chrome's "Developer Tools". After sorting the files by their processing time, I saw that "backbone.js" took the longest. I've attached a screen shot with this result.

slow_umpleonline_load

Contributor

jblang94 commented Jan 30, 2017

I thought that I'd share the following in case it helps with diagnosing this issue. I experienced a slow UmpleOnline load while I was working at home today, and confirmed that my internet connection was not the cause. As the page was loading, I opened the "Networking" tab in Google Chrome's "Developer Tools". After sorting the files by their processing time, I saw that "backbone.js" took the longest. I've attached a screen shot with this result.

slow_umpleonline_load

@Nava2

This comment has been minimized.

Show comment
Hide comment
@Nava2

Nava2 Jan 30, 2017

Member

@jblang94 I disagree with your diagnosis.

The issue is more likely due to the fact that the browser immediately tries to download 80 files. Browsers more often now will try to do all of these concurrently. The server is also probably having load spikes, I'd be curious to see what the server's top output looks like when someone loads the page with no cache in use. I think it's just getting overloaded.

Possible solutions, though: the _load.js file is slightly concerning, but I think there needs to be some consolidating and minification of the JS files to make them into a single vendor.js. In the node world, we'd use something like Webpack with UglifyJS2 doing the minification.

Getting that into the current build chain is... awful. What wouldn't be overly difficult is using <concat> to create a "monolithic" dependency instead of 75+ small JS files. The order of loading does unfortunately matter, so that'll have to be maintained when building a solution like that. Additionally, providing everything as gzip might be a good idea, as well. But that takes some server software installs.

Member

Nava2 commented Jan 30, 2017

@jblang94 I disagree with your diagnosis.

The issue is more likely due to the fact that the browser immediately tries to download 80 files. Browsers more often now will try to do all of these concurrently. The server is also probably having load spikes, I'd be curious to see what the server's top output looks like when someone loads the page with no cache in use. I think it's just getting overloaded.

Possible solutions, though: the _load.js file is slightly concerning, but I think there needs to be some consolidating and minification of the JS files to make them into a single vendor.js. In the node world, we'd use something like Webpack with UglifyJS2 doing the minification.

Getting that into the current build chain is... awful. What wouldn't be overly difficult is using <concat> to create a "monolithic" dependency instead of 75+ small JS files. The order of loading does unfortunately matter, so that'll have to be maintained when building a solution like that. Additionally, providing everything as gzip might be a good idea, as well. But that takes some server software installs.

@jblang94

This comment has been minimized.

Show comment
Hide comment
@jblang94

jblang94 Jan 30, 2017

Contributor

@Nava2 thanks for your comment

Contributor

jblang94 commented Jan 30, 2017

@Nava2 thanks for your comment

@TimLethbridge

This comment has been minimized.

Show comment
Hide comment
@TimLethbridge

TimLethbridge Jan 30, 2017

Member

@jblang94 - I noticed the slowdown when we added joint js in the fall, so this confirms it. My suggestion is to find a way to not load the jjs javascript, and then to test and load only when needed.

But also minifying the file would be advantageous too.

Member

TimLethbridge commented Jan 30, 2017

@jblang94 - I noticed the slowdown when we added joint js in the fall, so this confirms it. My suggestion is to find a way to not load the jjs javascript, and then to test and load only when needed.

But also minifying the file would be advantageous too.

@TimLethbridge

This comment has been minimized.

Show comment
Hide comment
@TimLethbridge

TimLethbridge Sep 12, 2017

Member

This problem was resolved earlier in the summer. There is now a minimized .js file. However ... any time someone changes the js we have to regenerate. One needs to run the script
umpleonline/scripts/allumple-minifyscript after changing any of the .js
Running this needs automating in order to close this issue

Member

TimLethbridge commented Sep 12, 2017

This problem was resolved earlier in the summer. There is now a minimized .js file. However ... any time someone changes the js we have to regenerate. One needs to run the script
umpleonline/scripts/allumple-minifyscript after changing any of the .js
Running this needs automating in order to close this issue

@TimLethbridge TimLethbridge changed the title from Find out and solve what is slowing UmpleOnline loading .. may be joint.js to Make minimized js build automatically Nov 14, 2017

@TimLethbridge TimLethbridge modified the milestones: Dec 2017 for release 1.27, April 2018 for release 1.28 Jan 11, 2018

@BernardYuan BernardYuan self-assigned this Jan 19, 2018

@TimLethbridge

This comment has been minimized.

Show comment
Hide comment
@TimLethbridge

TimLethbridge Jan 19, 2018

Member

The script allumple-minifyscript invokes yuicompressor, so the latter needs to by brought in to the build environment using ivy

I suggest adding this to the 'packageUmpleonline' umple script (this is also the one that moves the jars into umpleonline)

Member

TimLethbridge commented Jan 19, 2018

The script allumple-minifyscript invokes yuicompressor, so the latter needs to by brought in to the build environment using ivy

I suggest adding this to the 'packageUmpleonline' umple script (this is also the one that moves the jars into umpleonline)

BernardYuan added a commit that referenced this issue Jan 20, 2018

TimLethbridge added a commit that referenced this issue Jan 20, 2018

Merge pull request #1200 from umple/Issue#949
Fixes issue #949, automated JS files minification.
@TimLethbridge

This comment has been minimized.

Show comment
Hide comment
@TimLethbridge

TimLethbridge Jan 20, 2018

Member

Fixed by #1200

Member

TimLethbridge commented Jan 20, 2018

Fixed by #1200

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment