Webpack code splitting

This section presents a solution for using Webpack code splitting for deploying the application fragments.

What is Webpack code splitting?

Webpack code splitting allows generating bundles for JavaScript modules imported with the import() syntax. More information on this technique can be found here https://webpack.js.org/guides/code-splitting/#dynamic-imports .

Webpack and Angular

Webpack is used in Angular workspaces by default (see https://angular.io/cli/build) so no additional dependencies are required.

Solution in Angular

The solution is to use Webpack code splitting by generating potential imports (import() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) for each module project.

This will be accomplished by identifying projects inside a Silverlight solution that are either:

• Silverlight application projects that reference PRISM and are actual applications.

• Silverlight application projects that are meant to be modules to be loaded via XAP files

Given this separation the conversion tool is going to perform the following tasks:

• Change all application projects meant to be XAP modules to library projects.

• Generate a special file in Silverlight PRISM application projects that contains "import()" statements for each of the XAP modules.

This is going to have the effect of generating separate bundles for dynamically generated files.

Example

To illustrate how this is going to work, imagine a solution with the following structure:

Example Solution

This solution has:

• An application project with the bootstrapper (BasicPrismModulesExperiment.csproj).

• Two application projects meant to be XAP modules (MyExtraModule1.csproj and MyExtraModule2.csproj).

• A PCL with some code (MyUtilityClassLib.csproj).

The conversion tool is going to analyze the application and try to make the separation listed above. The biggest challenge is to determine which Silverlight application is going to be a XAP module (more on this below). We assume that this is resolved then the conversion tool is going to treat: "MyExtraModule1.csproj" and "MyExtraModule2.csproj" as library projects.

Converted application modules

The project that is determined to be the application project is going to have the following extra file:

import { ExternalFragmentRegistry } from "@mobilize/wms-framework";

ExternalFragmentRegistry.registerFragment('MyExtraModule2', () => import('MyExtraModule2'));
ExternalFragmentRegistry.registerFragment('MyExtraModule1', () => import('MyExtraModule1'));

As described above having import() expressions is going to "automagically" generate separate bundles for "MyExtraModule1" and "MyExtraModule2". See the output of "ng build":

Generating ES5 bundles for differential loading...
ES5 bundle generation complete.

chunk {polyfills} polyfills-es2015.js, polyfills-es2015.js.map (polyfills) 150 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 721 kB [initial] [rendered]
chunk {MyExtraModule1} MyExtraModule1-es2015.js, MyExtraModule1-es2015.js.map (MyExtraModule1) 13.3 kB  [rendered]
chunk {MyExtraModule1} MyExtraModule1-es5.js, MyExtraModule1-es5.js.map (MyExtraModule1) 17.6 kB  [rendered]
chunk {MyExtraModule2} MyExtraModule2-es2015.js, MyExtraModule2-es2015.js.map (MyExtraModule2) 12.7 kB  [rendered]
chunk {MyExtraModule2} MyExtraModule2-es5.js, MyExtraModule2-es5.js.map (MyExtraModule2) 16.9 kB  [rendered]
chunk {common} common-es2015.js, common-es2015.js.map (common) 6.07 kB  [rendered]
chunk {common} common-es5.js, common-es5.js.map (common) 6.61 kB  [rendered]
chunk {runtime} runtime-es2015.js, runtime-es2015.js.map (runtime) 9.06 kB [entry] [rendered]
chunk {runtime} runtime-es5.js, runtime-es5.js.map (runtime) 9.06 kB [entry] [rendered]
chunk {main} main-es2015.js, main-es2015.js.map (main) 549 kB [initial] [rendered]
chunk {main} main-es5.js, main-es5.js.map (main) 740 kB [initial] [rendered]
chunk {styles} styles-es2015.js, styles-es2015.js.map (styles) 2.67 MB [initial] [rendered]
chunk {styles} styles-es5.js, styles-es5.js.map (styles) 2.67 MB [initial] [rendered]
chunk {vendor} vendor-es2015.js, vendor-es2015.js.map (vendor) 11.7 MB [initial] [rendered]
chunk {vendor} vendor-es5.js, vendor-es5.js.map (vendor) 13.5 MB [initial] [rendered]No

Notice that a couple of new "chunks" are generated for the new modules.

Having this separation allows use to write a implementation of "AddModule":

export class ModuleCatalog implements IModuleCatalog {
    container : DependencyContainer;
    AddModule(arg: ModuleInfo) {
       moduleInfo.State = ModuleState.Initializing;
        if (moduleInfo.Ref) {
            const importfunc = ExternalFragmentRegistry.registrations[moduleInfo.ModuleName]
                ?? ExternalFragmentRegistry.registrations[moduleInfo.Ref.replace(/^.*\/([^/]+)\.xap$/, '$1')]
                ?? ExternalFragmentRegistry.registrations[moduleInfo.Ref.replace(/^([^/]+)\.xap$/, '$1')];
            if (importfunc) {
                return importfunc().then((m) => {
                    console.log('Initializing module: ' + moduleInfo.ModuleType);
                    const theClass = m[moduleInfo.ModuleType.replace(/^[^,]*\.([^\.,]+)\,.*$/, '$1')];
                    if (!theClass) {
                        console.error('Could not resolve class name for module type: ' + moduleInfo.ModuleType);
                    }
                    const moduleInstance = this.diContainer.resolve(theClass) as any;
                    moduleInstance.Initialize();
                    moduleInfo.State = ModuleState.Initialized;
                    delete this.promisesDictionary[moduleInfo.ModuleName];
                });
            } else {
                console.error(`Unable to find module registration for ${moduleInfo.ModuleName}, type: ${moduleInfo.ModuleType}, ref: ${moduleInfo.Ref}`);
            }
        }
        ...
 }

Notice that framework uses TSyringe to create an instance of the module.

Having this conversion, the framework can execute the following registration code (this is the conversion of this example):

public CreateModuleCatalog () : IModuleCatalog /*Stub_Microsoft_Practices_Prism_Modularity_IModuleCatalog*/ {
      let myCatalog : ModuleCatalog = new ModuleCatalog();
      myCatalog.AddModule(Object.assign(new ModuleInfo ("ExtraModule1", "MyExtraModule1.ExtraModule1, MyExtraModule1, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null"),{
         Ref : "MyExtraModule1.xap"
      }));
      
      myCatalog.AddModule(Object.assign(new ModuleInfo ("ExtraModule2", "MyExtraModule2.ExtraModule2, MyExtraModule2, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null"),{
         Ref : "MyExtraModule2.xap"
      }));
      return myCatalog;
   }

This code will be loaded separately:

Modules loaded in a separate request