Selective loading of Javascript

Question

I've got some JS libraries for sound recording and conversion to .mp3 that I'd like to use on ONE page in my Blazor site. But I definitely don't want all visitors to the site to pre-load more than 1 MB of JavaScript just in case they might navigate to that section of the site.

Any ideas?

I believe you're looking for something like this: https://stackoverflow.com/questions/14521108/dynamically-load-js-inside-js — Hive7, Mar 12 '21 at 11:20
I haven't actually tried it yet, but the idea seems to be to use a simple script to dynamically load the larger ones on demand. — Bennyboy1973, Mar 12 '21 at 11:24
That could be one way of doing it. I'm not too familiar with Blazor, but I assume its a single page application otherwise you could simply add the JavaScript just on the page that you actually want it to appear — Hive7, Mar 12 '21 at 11:25
Alternatively, you could be looking for some lazy loading mechanisms: https://learn.microsoft.com/en-us/aspnet/core/blazor/webassembly-lazy-load-assemblies?view=aspnetcore-5.0 . This is for webassembly, but it should help continue your search. https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading has some information on javascript lazy loading — Hive7, Mar 12 '21 at 11:27
That's right. Links to all scripts must be added on a host page. Why don't you add a short summary in an answer, so if I can get a proof of concept working this weekend, I can accept it? — Bennyboy1973, Mar 12 '21 at 11:31
Just put the scripts in the head of the page? Not sure what the problem is here. — TylerH, Apr 05 '21 at 14:10

score 2 · Answer 1 · answered Mar 12 '21 at 11:42

2

Why not use dynamic import?

import('module.js').then(module => {
   ...
});

answered Mar 12 '21 at 11:42

geoffrey

2,080
9
13

Hive7 · Answer 2 · 2021-03-12T19:51:28.190

I assume you are writing a single page application. There are a few methods of doing this.

A good method that I would recommend is called lazy loading of the JavaScript such that the file is only loaded when you actually want to make calls to the contents of the files. To look into this a bit more, I recommend looking at: https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading.

If you have WebAssembly copies of the libraries, since you are using Blazor, you should be able to lazily load these using Blazor. See https://learn.microsoft.com/en-us/aspnet/core/blazor/webassembly-lazy-load-assemblies?view=aspnetcore-5.0 for more information.

The older methods of doing this as you'll see from these previous posts was to use jQuery. This is not recommended practice anymore however. jQuery offers a getScript method see https://api.jquery.com/jquery.getscript/ for the documentation or Dynamically load JS inside JS as an area where this has been discussed.

I specifically mentioned that the lazy loading is the recommended method, but I have updated the post to make that clearer. I agree that the ordering was funky so thanks for pointing it out — Hive7, Mar 12 '21 at 19:51

Selective loading of Javascript

2 Answers2

Linked