Bundling JS modules

[daniel-p-tech]

Is there an existing issue for this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

No response

Describe the solution you'd like

Hi,

I have library of about 30 reusable UI components, most of which use some level of JS interop. All JS files are co-located with .razor, .cs and .css files and the corresponding JS modules are imported when a component is first initialized using the following statement;

JSRuntime.InvokeAsync<IJSObjectReference>("import", $"./_content/{assemblyName}/{componentName}.js"

This works great, but I did notice when running my app on a mobile device and a very slow network that loading of a module may fail. This is a problem since failure to load JS code is a catastrophic event - some of the more complex components orchestrate communication between other simpler components etc. so I need to have a guarantee that when accessing a particular app page, all components on the page will be successfully initialized. Things like failure to load some data on the page using web api is being properly handled, but I don't see an elegant way how to handle a failure to load a JS module.

What I'd like to achieve is to somehow bundle all JS modules into a single file that will be loaded when the application first initializes. How can I do this without rewriting any of my existing code? I love how JS colocation provides clean separation of concerns. All combined, my JS files are only about 30K uncompressed.

Also, provided that there is a solution to bundle all JS files, I'd like to minimize/obfuscate them as well.

Maybe there is a completely different approach (error boundaries) that I need to look at?

Thank you @javiercn for your help!

Daniel

Additional context

No response

[javiercn]

@daniel-p-tech thanks for contacting us.

Unfortunately, due to the nature of ES modules is not trivial to do bundling in a transparent way, meaning that bundling would change the code you need to run to import the files.

The best you can do I think would be to use a JavaScript initializer to eagerly import all the modules during application startup. This would at least help prevent the app crashing after the user has been using it for a while, since modules are only downloaded once no matter how many times you import them.

There is a stage 1 proposal to add the concept of module fragments to JavaScript which is some form of bundling that works with ES6 modules and it is what we would consider in the future.

[daniel-p-tech]

Thank you for your quick answer.

How do you suggest that I import all modules? Should I do this in C# code by iterating through a collection of all module files? If so, where in the application should this code be placed?

// add error handling
foreach (string componentName in componentNames)
{
    await JSRuntime.InvokeAsync<IJSObjectReference>("import", $"./_content/{assemblyName}/{componentName}.js"
}

The component library is registered in the hosting application by using a service extension, I don't see how I would be able to execute the code above inside this method:

public static class ServiceExtensions
{
    public static void AddBlazorComponents(this IServiceCollection services, ComponentServiceOptions options = null)
    {
        // register component services

Or should this be done by creating a JS file that is simply referenced in index.html?

Once the module is loaded and the component executes the following statement, I'm assuming the browser doesn't issue any network calls, correct? (e.g. checking if a new version is available or something of that nature). Otherwise, this would defeat the purpose of the proposed solution.

    await JSRuntime.InvokeAsync<IJSObjectReference>("import", $"./_content/{assemblyName}/{componentName}.js"

Also, is there a way to minimize JS modules as part of the build process?

Thanks!

[javiercn]

@daniel-p-tech checkout https://docs.microsoft.com/en-us/aspnet/core/blazor/fundamentals/startup?view=aspnetcore-6.0#javascript-initializers.

I would write an initializer that does import('<<js-module-path>>') for all the .razor.js files in their respective paths.

[daniel-p-tech]

Thanks for the tip, I've tested loading a few modules using the code below and as far as I can tell it works as expected!

export async function beforeStart(options, extensions) {
    let promises = [];
    const components = ["ComboBox/BlzComboBox", "DatePicker/BlzDatePicker", "Dropdown/BlzDropdown"];

    for (const component of components) {
        promises.push(import("./Components/" + component + ".razor.js"));
    }
    await Promise.all(promises);
}

1. If a module cannot be loaded inside the JS initializer, the entire app will crash and user is stuck looking at "Loading..." indicator. Is there a way to catch errors thrown from the initializer and display some meaningful error message instructing users to reload the app or something similar?

2. Is there a way to minimize the JS modules as part of the build process?

[javiercn]

2. Is there a way to minimize the JS modules as part of the build process?

You would need to use an external tool for this and integrate it early in the MSBuild pipeline.

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.