Per page Javascript loading
We are currently at around 88,000 lines of javascript once compiled. A good amount of that is plugins.
We use Turbolinks so the good news is js isn't loaded on each page.
I'd like to follow the instructions on this blog post and get JS loading on a per page as needed basis.
The benefits of this are many:
-
Significantly faster initial page loads. Subsequent page loads won't suffer either as the load is divided up.
-
As 1 e.g: There is a cropper.js file which is 82kb and only used when cropping your profile picture. We don't need to load it every single time. Saving 82kb along with other saves it adds up.
-
We could write VueJS pages that are real time and use sockets and that JS wouldn't have to have special setup functions so it only runs on one page.
-
We could eliminate potentially many event listeners we aren't using on every page.
-
We could then use this method to load fonts on a per page basis. If we were to change the font on one page that font only has to be loaded if it is used on said page. Then the argument for fonts might only come down to a love for Menlo.
cc @iamphill @alfredo1 @elvongray @JobV @DouweM @dzaporozhets