使用 System.js 的性能问题答案

【问题标题】：Performance Problems using System.js使用 System.js 的性能问题
【发布时间】：2015-12-13 14:51:54
【问题描述】：

我正在使用 system.js（灵感来自 angular2 在他们的教程中使用它），但即使对于最微不足道的示例，我的性能也非常糟糕。

例如，以下代码在本地运行时第二个（System.import 之前的那个）和最后一个（在app.js 中）console.log 之间有 26000 毫秒（！）的延迟（因此没有网络延迟）

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>System.js Sample</title>
    <script>console.log("1: " + new Date().getTime());</script>
    <script src="bower_components/system.js/dist/system.js"></script>
</head>
<body>
<script>
    console.log('2: ' + new Date().getTime());
    System.import('app.js');
</script>
</body>
</html>

App.js：

console.log('3: ' + new Date().getTime());

我通过 bower ("system.js": "~0.18.17") 安装了最新的 system.js 版本并删除了所有剩余的代码，这实际上只是 System.import 调用需要很长时间。那我做错了什么？

在 Chrome 下加载页面时网络标签的图片：

【问题讨论】：

我记得 System.js 中存在某种错误，如果使用 System 样式模块，它会变得非常滞后，但如果使用 AMD，则可以。如果您使用的是系统风格的模块，请尝试切换到 AMD，看看它的性能是否更好。
@Ixonal 考虑到我只是从“将所有脚本连接为一个，最小化然后作为脚本标签包含”的真实且经过测试的方法切换，我可能需要更多信息:) 另外由于 Angular 教程使用 System.js，我想坚持使用它（或者这只是意味着不同的语法但相同的库？是的，我有点困惑）。
我假设您使用的是 TypeScript？您可以在 tsconfig.json 文件中设置它用于模块的系统。只需将模块设置为“amd”。 System 可以识别 CommonJS、AMD、ES6 和 System 样式的导入，因此是否将其转换为 AMD 并不重要。
@Ixonal 虽然我的真正目标是使用打字稿，但当我什至不声明任何模块而只加载简单文件时，我转换打字稿代码的模块系统有什么区别？
您的意思是 26.000 毫秒，还是 26,000 毫秒？

标签： javascript performance optimization systemjs

【解决方案1】：

考虑到 system.js 异步加载脚本，26 毫秒是脚本的正常加载速度。您的本地服务器需要一些时间来处理请求/响应作业并为此造成一些延迟。

【讨论】：

26,000 毫秒，也就是 26 秒。我的错误混淆了英文数字分隔符。
好的，那么这不正常:) 我怀疑 system.js 导致了这个延迟。尝试检查开发人员控制台（浏览器中的 F12）->“网络”选项卡。您加载的所有资源都应该有时间表。检查 app.js 脚本的加载时间。
加载只需要几毫秒。不过，我在帖子中添加了屏幕截图。
那我看不出它执行延迟 26 秒的原因

【解决方案2】：

最初的 Angular2 快速启动 repo 会单独加载 RxJS 文件，这花费了太长时间。您经常会发现有 300 多个请求正在发出。从那时起，他们已经解决了这个问题，您可以通过在导入 RxJS 模块时更加具体来进一步减少请求。如今，Angular 快速启动 repo 的速度要快得多。

【讨论】：