How not to load everything at once using systemjs as a script loader?

Question

JavaScript

Suppose there are many sections on the site, each of them is responsible for some class-processor of a particular page.
When we go to any page, the main file is triggered which initializes the router let router = new Router(); which determines on which page which handler class needs to be initialized (i.e. create its instance and can execute some method). It looks like this:

import {HomePageController} from "../modules/homePageController";
import {page1Controller} from "../modules/page1Controller";
import {page2Controller} from "../modules/page2Controller";
import {page3Controller} from "../modules/page3Controller";
import {page4Controller} from "../modules/page4Controller";

export class RouterMap{

    constructor(){
        return this;
    }

    protected routes = {
        "/:hl/$": {
            controller: HomePageController,
            handlerMethod: "onInit",
            onLeaveHandlerMethod: "onLeave"
        },
        "/:hl/p1": {
            controller: page1Controller,
            handlerMethod: "onInit",
            onLeaveHandlerMethod: "onLeave"
        },
        "/:hl/p2": {
            controller: page2Controller,
            handlerMethod: "onInit",
            onLeaveHandlerMethod: "onLeave"
        },
        "/:hl/p3": {
            controller: page3Controller,
            handlerMethod: "onInit"
        },
        "/:hl/p4": {
            controller: page4Controller,
            handlerMethod: "onInit",
            route:{
                "/:id": {
                    handlerMethod: "onInit"
                }
            }
        }
    };
}

The essence of the problem is that when loading any page, systemjs will load everything that we have imported into RouterMap as shown above, and everything that is imported into each handler class that is in RouterMap (HomePageController, page1Controller, page2Controller, page3Controller, page4Controller) and also what imported into each of them. And it’s very bad, what if the project is large and the total import is about 400 files, for example (systemjs will always load them all at once), and on a particular page no more than 10 files are used in the import? how to make systemjs work differently, and not load what we will not use? I suspect that you need to rewrite the router, but I still don’t understand how, because we can’t dynamically (implicitly) import classes, but only explicitly?or I'm wrong?

Answer 1

SystemJS can do dynamic imports -- see System.import.

Answer 2

Maybe I misunderstood the question, correct me a little.
For dynamic use, use getters:

"/:hl/p12": {
            get controller(): {
               return page1Controller || page2Controller; //тут могут быть любые условия
            },
            handlerMethod: "onInit",
            onLeaveHandlerMethod: "onLeave"
        },

For dynamic loading, you can use the conditions:

let pageController;
if(true) {
   pageController  = require("../modules/page1Controller"). page1Controller;
} else {
   pageController = require("../modules/page2Controller"). page2Controller;
}

"/:hl/p12": {
            controller: pageController, 
            handlerMethod: "onInit",
            onLeaveHandlerMethod: "onLeave"
        },

PS In general, I advise you to pay attention to Angular 2 :)