Javascript 从angular 2升级到4在asp.net core中创建系统速度较慢

一、 使用下面的链接将角度2升级到角度4

升级时，加载页面比上一个加载页面慢。加载时，加载了许多js文件

package.json

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.2.0",
    "systemjs": "^0.19.47",
    "zone.js": "^0.8.5"
  },
  "devDependencies": {
    "@types/node": "^6.0.60",
    "concurrently": "^3.1.0",
    "lite-server": "^2.3.0",
    "typescript": "^2.2.2"
  }
}

tsconfig.json

    {
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "module": "commonjs",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "sourceMap": true,
    "suppressImplicitAnyIndexErrors": true,
    "target": "es5",
    "rootDir": "app",
    "outDir": "wwwroot/app"

  },
  "exclude": [
    "node_modules",
    "wwwroot/node_modules",
    "typings"

  ],

  "compileOnSave": true
}

_layout.cstml

<script src="~/node_modules/core-js/client/shim.min.js"></script>
    <script src="~/node_modules/zone.js/dist/zone.js"></script>
    @*<script src="~/node_modules/reflect-metadata/Reflect.js"></script>*@
    <script src="~/node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="~/js/systemjs.config.js"></script>
    <script>
        System.import('app').catch(function (err) { console.error(err); });
    </script>

---

因为，它加载了很多js文件，所以系统速度很慢。谁能告诉我哪里出错了。

出现问题是因为您（或angular 4，当然不知道）在代码中的某个地方包含了

rxjs/Rx

这将强制systemjs加载程序加载

Rx.js

引用的每个文件，其中包括所有操作员等（请参阅）

相反，将导入范围缩小到只需要真正需要的文件。在大多数情况下，它是

可观察的

类

所以从

import { Observable } from 'rxjs/Rx';    

像

import { Observable } from 'rxjs/Observable';

---

或者捆绑/打包您的文件，即使在开发时也是如此。因此，文件将打包到模块中，每个模块只加载一个文件

不要引用

rxjs

，只引用您需要的类，即

rxjs/Observable

。此外，只有当a）启用Firefox/Chrome开发者工具栏，b）将调试器连接到ASP.NET核心应用程序（用于提供静态文件）时，它才会变慢。从您的应用程序中删除调试器，只将调试器保留在WebApi应用程序上。或者，配置构建管道进行捆绑/打包，即使是对于调试构建，也没有其他解决方案？不，模块加载就是这样工作的。由于某些原因，rx.js没有附带与systemjs兼容的umd模块，因此加载程序始终保持加载单个文件。如果您在一个类型脚本文件中引用了

rxjs

，它将加载它引用的每个文件，从而结束大约300个请求。请参阅相关内容，您能告诉我如何捆绑/打包文件吗？？一、 我正在使用asp.net Core您应该提出一个新的问题（但在提问之前，请进行研究，找出哪种模块绑定器最适合您的工作流程和需要）。它相当复杂，有很多方法可以存档，甚至还有更多的工具可以使用（webpack、systemjs、requirejs、jspm）。实际上，这与您为releaseI绑定angular 2（或4）应用程序时没有什么不同，因为它添加了system.js文件rxjs'：'npm:rxjs'，这是我必须改变的吗？如果是，我如何更改否，只有从“rxjs”导入{…}时才有效是从code中使用的，但angular本身引用了“rxjs/xxx”中的

有关更多详细信息，请参见此。你可以很容易地用100多页的篇幅来描述所有绑定器、它们的差异和配置，因此这不是一个简单答案可以涵盖的主题，当你发布完整的应用程序（绑定应用程序和动态加载的angular 2模块）时，你无论如何都必须深入这个主题
import { Observable } from 'rxjs/Observable';