WIP: split .js, load some asynchronously & on-demand, use ESM

[WofWca]

Proposed changes

This is super WIP, for now look at it as a discussion rather than a full-fledged MR.

In order to improve page loading performance, it would be cool to load some JS asynchronously and on-demand, and tree-shake some of it. Examples: shortcuts, syntax highlighting, username autocompletion.
Here's the audit I ran:

As you can see, on my PC it takes ~400ms to load a prefetched page (i.e. it's only rendering, not including network download). You can imagine it's a little worse on mobile.

First step to this is rewriting the scripts with imports.

This also makes the code easier to maintain as there's fewer global vars.

TODO:

• Make sure nothing broke
• See TODOs in the code
• Perhaps a transpiler needs to be used as ESM imports are not supported in old browsers (~92% now). Which one? Webpack?

Checklist

• Lint and unit tests pass locally with my changes.
• I have added tests that prove my fix is effective or that my feature works.
• I have added documentation to describe my feature.
• I have squashed my commits into logic units.
• I have described the changes in the commit messages.

Other information

[nijel]

Generally, any improvements to the JavaScript are welcome. The tricky part is that there are basically no tests for it, so it's super easy to break something. The current split out editor files are a typical example of that - it was tested by the author, me when merging and several issues were discovered months after merging in some not that frequently used features.

I think imports is something we can go for directly without a compatibility layer - we already started to use arrow functions two years ago and that was IMHO bigger drop in supported browsers than this.

[nijel]

We're still at Bootstrap 3.4.1, see #2916

[nijel]

Mousetrap is IMHO used on nearly every page - it is used to catch Ctrl+Enter for form submission.

[WofWca]

Yeah, I saw that. Still, adding a bind asynchronously is possible.

[WofWca]

EDIT: nvm, some libs do window.LibName = ..., so you can just import them and use that instead of their exports. See

weblate/weblate/static/attach-tribute-to.js

Lines 2 to 5 in ae96c4a

	import "./vendor/tribute.js"; // It does `window.Tribute =`
	/* Username autocompletion */
	var tribute = new Tribute({

.

A problem here is that the dependencies don't use ESM (native export and import), they do UMD or something else, so if you attempt to import them natively, the browser says that "the imported module doesn't provide export named ...".
So looks like we can't do without a transpiler.

[github-actions]

This pull request has been automatically marked as stale because there wasn’t any recent activity.

It will be closed soon if no further action occurs.

Thank you for your contributions!