U4-11044 - Optimisation - Remove locale langauge files from moment.js and instead load the current users locale only on the fly

Created by Pete Duncanson 03 Mar 2018, 13:52:14 Updated by Pete Duncanson 11 Apr 2018, 11:25:11

Tags: PR Regression

Relates to: U4-11045

Relates to: U4-11164

Subtask of: U4-11042

The back office uses moment.js for all its date javascript work. The version of moment used includes all the locales available regardless of the current users language choice. "moment-with-locales.js" is currently 350K! Moment on its own is more like 100k (believe it or not, dates in javascript are...tricky)

We should be using the users set language to load only the locale needed for editing. You can load moment locals on the fly (http://momentjs.com/docs/#/i18n/loading-into-nodejs/) all we need is to know which language we need to load.

Sadly to do this is a little difficult as I can't easily find anywhere in the frontend that has that setting available but it must be there somewhere.

This code works out the Locale used for the LocalizedText.js file which suffers from the same issue but its a start on how to get the current users locale. Ideally this should be in one place but I've not found it yet: https://github.com/umbraco/Umbraco-CMS/blob/cf86409e3fec4198744189a48255543fc2f32614/src/Umbraco.Web/Editors/BackOfficeController.cs#L159

I'd suggest we pull out the above logic into a new method "GetCurrentUsersLanguageOrDefault" or similar which should/could be on a CurrentUser object where we can store this stuff? The front-end then needs access to this data too so it knows which language to load up in the browser. Again we should really have a CurrentUser object in the front-end that the code can use, this needs to be smart though. When you change the language in the back office this object will need to be refreshed with the latest settings. This could be managed by the same object so it acts as a gateway and ensures everything is looking at the most up to date data rather than having lots of different parts of the site trying to keep up to date but this is Angular, we should be able to bind to a Model and all the updating magic just works...right?

This modification alone will save 200Kb+ on the initial download of the back office.

Related to http://issues.umbraco.org/issue/U4-11042 as it should help speed up whats already there.

2 Attachments

Comments

Pete Duncanson 04 Mar 2018, 09:09:05

For those of us that are English first speakers you might not know that you can set a Users language via a drop down on the users account (even your own). You'll find this in the Users section, change it to something else for testings...Danish can be "fun"!


Niels Hartvig 12 Mar 2018, 09:31:11

PR: https://github.com/umbraco/Umbraco-CMS/pull/2507


Niels Hartvig 12 Mar 2018, 09:33:14

@peteduncanson as I understand from your blog post (https://offroadcode.com/journal/dev-talk/saving-bandwidth-with-moment-locales-in-the-umbraco-backoffice/), the dependency for #U4-11046 doesn't seem necessary?


Niels Hartvig 12 Mar 2018, 10:00:36

Works.

I'd love to see if we could find a safe way to check if a file in /umbraco/lib/* exists before it's loaded to avoid the 404s in the console, related to trying to lazyload a language variant that doesn't exist (for instance this will try to load both "fr" and "fr-fr" where the latter doesn't exist)


Niels Hartvig 12 Mar 2018, 10:39:11

(removed the dependency on #U4-11046 as the PR doesn't rely on it)


Niels Hartvig 12 Mar 2018, 14:33:09

(I'm working on adding support for only downloading locales that exist)


Pete Duncanson 12 Mar 2018, 14:42:00

Late to the party on this one but looks like you are all over it @hartvig :)

Regarding knowing what locales are available "could" be done by scanning the folder and injecting an array/dictionary into the frontend? Or adding a handler to do the lookup for fr vs fr-fr files but not sure if that leaves a rabbit hole to trip someone up in the future?


Niels Hartvig 13 Mar 2018, 15:33:06

I've added the check, now to find out how to push the changes to Kyle's pr branch: https://github.com/umbraco/Umbraco-CMS/commit/564074a2bd2f6463b1719c8ce66915606896bcfe


Niels Hartvig 13 Mar 2018, 15:35:15

PR updated: https://github.com/umbraco/Umbraco-CMS/pull/2507


Niels Hartvig 15 Mar 2018, 08:42:54

Merged: https://github.com/umbraco/Umbraco-CMS/pull/2507


Sebastiaan Janssen 15 Mar 2018, 09:19:52

I accidentally pushed it to dev-v7 while trying to push it back to Kyle's repo, oops! I've retargetted it at 7.10 and fixed some weird things (file name with a trailing space, some code style and a name change as suggested by Bjarne and Shannon).

https://github.com/umbraco/Umbraco-CMS/commit/5161fd0cef595ccd8508705b4ce764d981d1f2c6 https://github.com/umbraco/Umbraco-CMS/commit/a465ed415d41904f33037f14173f4690dd8a3c24

All good now!


Nathalie Larsson 10 Apr 2018, 07:13:49

Hello everybody. :) Do you think my problems are related to this change? Upgraded a site from 7.3.8 to 7.10.1. I have checked the upgrade documentation but haven't found anything related.

Image 1 (moment-error-1): All content pages Image 2 (moment-error-2): Specific to the info-tab

I have updated CD, poked web.config, cleared cache, changed browser.. etc.


Pete Duncanson 10 Apr 2018, 09:42:54

This "should" just work if you've done all the bits you say you have. Can you see any network traffic trying to get moment.js and a locale file (which should be for your set locale which you can see on the Users section under language)?


Nathalie Larsson 11 Apr 2018, 08:21:00

Can it maybe be because of Umbraco Forms? It's loading moment.js version 2.4.0 after Umbraco loads version 2.10.6.

It's working if I remove Umbraco Forms version.


Nathalie Larsson 11 Apr 2018, 08:45:25

Updated Umbraco Forms yester day to 7.0.1 but the package.manifest file didn't change so UF was still loading moment.js. Updated the file manually and now it's working perfectly.


Pete Duncanson 11 Apr 2018, 11:25:11

That is good to know, we don't want this optimisation causing issues and thanks for coming back to log the fix. What did you actually change/edit in the file? Did it just need touching or did you change the reference to moment.js in it?

I wonder how we can get Forms to make that update? Sort of out my realm of knowledge. I've spin up a new issue for this one, please log your replies to the above there so we don't lose them http://issues.umbraco.org/issue/CON-1521

Thanks again,

Pete


Priority: Normal

Type: Performance Problem

State: Fixed

Assignee:

Difficulty: Normal

Category: Localization

Backwards Compatible: True

Fix Submitted:

Affected versions:

Due in version: 7.10.0

Sprint:

Story Points:

Cycle: