Как не грузить все сразу используя systemjs в качестве загрузчика скриптов?

Question

[Al]

Допустим на сайте есть множество разделов, за каждый из них отвечает какой-то класс-обработчик конкретной страницы.

Когда мы заходим на любую страницу, срабатывает основной файл который инициализирует роутер let router = new Router(); который определяет на какой странице, какой класс-обработчик нужно инициализировать (т.е. создать его инстанс и может выполнить какой-то метод). Примерно так это выглядит:

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"
                }
            }
        }
    };
}

Суть проблемы в том что при загрузке любой страницы, systemjs подгрузит все что мы импортнули в RouterMap что представлен выше, и все что импортнуто в каждый класс-обработчик что в RouterMap есть (HomePageController, page1Controller, page2Controller, page3Controller, page4Controller) и так же что импортнуто в каждый из них. И это очень плохо, что если проект большой и общий импорт составит около к примеру 400 файлов (systemjs их всегда будет грузить все сразу), а на конкретно одной странице используется в импорте не более 10 файлов? как заставить systemjs работать иначе, и не грузить то что не будем использовать? я так подозреваю что нужно переписать роутер, но пока не пойму как, ведь мы же не можем динамически (неявно) импортировать классы, а только явно? или я ошибаюсь?

Answer 1

[Константин Китманов]

SystemJS умеет динамический импорт -- см. System.import.

Answer 2

[Виталий]

Может неправильно понял вопрос, чуть что поправляйте.

Для динамического использования используйте геттеры:

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

Для динамической загрузки можно использовать условия:

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

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

P.S. А вообще советую обратить внимание на Angular 2 :)