主页 / 问题 / 594834
Accepted
sanu
Asked:2020-11-23 18:05:29 +0000 UTC2020-11-23 18:05:29 +0000 UTC

如何不使用 systemjs 作为脚本加载器一次加载所有内容？

  • 772

假设站点上有很多部分，每个部分负责特定页面的某个类处理器。

当我们转到任何页面时，都会触发初始化路由器的主文件，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 以不同的方式工作，而不是加载我们不会使用的东西？我怀疑你需要重写路由器，但我仍然不明白如何，因为我们不能动态（隐式）导入类，只能显式导入？或者我错了？

javascript

1 个回答

  1. Best Answer

    通常，在编写 SPA（单页应用程序）时，假设用户不会离开页面 - 因此无需担心一次下载所有文件。如果您需要加快速度 - 您可以收集捆绑包（bundle）。

    如果您有一个多页面站点，则不需要路由。

    如果你有一些特定的情况，那么你可以将模块加载到路由机制中。

    它看起来像这样：

        protected routes = {
        "/:hl/$": {
            controllerModule: "modules/homePageController",
            controllerName: "HomePageController",
            handlerMethod: "onInit",
            onLeaveHandlerMethod: "onLeave"
        },
    };

    从路由获取控制器：

    System.import(r.controllerModule).then(module => {
  var controller = module[r.controllerName];
  // делаем что-то с контроллером
})
    • 2

相关问题