Javascript Angular2加载的文件请求过多

我正在使用Angular2制作一个网站，我认为这是一个问题。在我的angular页面的第一次加载中，

SystemJS

发出500多个请求来检索

Angular2/src

目录中的每个

Angular2

文件。总的来说，第一次加载的下载量超过4MB，启动时间超过14秒

My

index.html

以下脚本是否包括：

<script src="libs/angular2/bundles/angular2-polyfills.js"></script>
<script src="libs/systemjs/dist/system.src.js"></script>
<script src="libs/rxjs/bundles/Rx.js"></script>
<script src="libs/angular2/bundles/angular2.min.js"></script>
<script src="libs/angular2/bundles/http.dev.js"></script>
<script src="libs/jquery/jquery.js"></script>
<script src="libs/lodash/lodash.js"></script>
<script src="libs/bootstrap/js/bootstrap.js"></script>

请求的一些js文件的两个屏幕截图：

有没有办法避免所有这些请求

在我的angular页面的第一次加载中，systemjs发出了500多个请求来检索angular2/src目录中的每个angular2文件。总的来说，第一次加载的下载量超过4mb，启动时间超过14秒

SystemJs工作流是相当新的，没有足够的研究来实现最佳部署

建议回到

commonjs

+

webpack

。更多：

---

下面是一个例子：

我认为你的问题与此相关：

要准备好生产（并加速生产），您需要对其进行打包

---

我的意思是将所有文件转换成JavaScript文件，然后像Angular2那样对它们进行处理。这样，您将有多个模块包含在一个JS文件中。通过这种方式，您可以减少将应用程序代码加载到浏览器中的HTTP调用次数。

我遇到了完全相同的问题，实际上我正在看这篇文章寻找答案。下面是我为解决这个问题所做的

修改您的项目以使用webpack。请遵循以下简短教程：

此方法将为您提供一个javascript文件，但是它相当大（我的项目文件超过5MB），需要缩小。为此，我安装了webpack globaly:

npm安装webpack-g

。安装后，从应用程序根目录运行

webpack-p

。这使我的文件大小降低到大约700KB

---

从20秒和350个请求减少到3秒和7个请求。

我看到您已经有了响应，这当然很好。 但是对于那些想使用systemjs（和我一样）而不想使用webpack的人，你仍然可以捆绑这些文件。然而，它也涉及到使用另一种工具（我使用gulp）。 所以您将拥有以下systemjs配置（不是在html中，而是在一个单独的文件中—我们称之为“system.config.js”）：

然后，在gulpfile.js中，您将构建这样一个包（使用

system.config.js

和

tsconfig.json

文件中的信息）：

因此，当运行“gulpbuild”时，您将获得包含所需内容的“bundle.js”文件。 当然，您还需要更多的软件包才能完成此“吞咽包”任务：

npm install --save-dev github:gulpjs/gulp#4.0 gulp-typescript gulp-sourcemaps path systemjs-builder

另外，确保在tsconfig.json中有

“模块”：“commonjs”

。 这是我的tsconfig.json，它用于我的

'ts'

gulp任务：

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
    },
    "exclude": [
        "node_modules",
        "typings/main",
        "typings/main.d.ts"
    ]
}

然后，在html文件中，您只需要包含以下内容：

<!-- Polyfill(s) for older browsers -->
<script src="node_modules/es6-shim/es6-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="dist/app/bundle.js"></script>

就这样。。。我在5秒内收到了600个4mb的请求。。。对于20个请求，在1.6秒内完成1.4mb（本地开发机器）。但是这20个请求在1.6秒内达到1.4mb，还包括一些其他的js和css，管理主题附带了一些html模板，在第一次加载时需要这些模板。我更喜欢使用外部模板-templateUrl:''，而不是内联模板，写在我的component.ts文件中。 当然，对于一个拥有数百万用户的应用程序来说，这仍然是不够的。此外，还应实现初始加载和缓存系统的服务器端渲染，我实际上使用angular universal实现了这一点，但在Angular2 beta上（加载相同管理应用程序的初始渲染大约需要200-240毫秒，这需要1.6秒-我知道：哇！）。自从Angular2 RC问世以来，它就不兼容了，但我相信做universal的人很快就会把它升级，特别是因为ng conf即将问世。此外，他们还计划为PHP、ASP和其他一些应用程序开发Angular Universal，目前只针对NodeJ

编辑：

---

事实上，我刚刚发现，在NG-CONF上，他们说Angular Universal已经支持ASP（但它不支持Angular2>beta.15:）。。。但让我们给他们一些时间，RC几天前刚刚推出

如果你想坚持使用SystemJS，你可以将你的应用捆绑在一起。到目前为止，我已经在这方面取得了很好的成功，使用JSPM的

bundle sfx

命令为Angular 2应用程序生成单个JS文件

中有一些有用的信息，我正在使用AG2 RC版本 在将MrCroft的解决方案与systemjs builder结合使用时，我遇到了许多问题，如： 错误TS2304:找不到名称“映射” 错误TS2304:找不到名称“Promise”

经过多次尝试，我补充道：

//

---

现在我编译了我的bundle文件。

我找到了一个简单的解决方案，在上使用browserify&uglifyjs

以下是我的版本：

pacakge.json：

{
...
  "scripts": {
      "build_prod": "npm run clean && npm run browserify",
      "clean": "del /S/Q public\\dist",
      "browserify": "browserify -s main  public/YourMainModule.js > public/dist/bundle.js && npm run minify",
      "minify": "uglifyjs public/dist/bundle.js --screw-ie8 --compress --mangle --output public/dist/bundle.min.js"
    },
...
  "devDependencies": {
      "browserify": "^13.0.1",    
      "typescript": "^1.9.0-dev.20160625-1.0",
      "typings": "1.0.4",
      "uglifyjs": "^2.4.10"
    }
}

构建您的项目

运行：npm运行构建产品 它将在public\dist目录下创建bundle.js&bundle.min.js

编辑您的

index.html

文件： 而不是运行

System.import（'YourMainModule'）
添加

---

@你的答案太棒了

如果您想使用SystemJS进行开发，并像我一样加快生产服务器的速度。看看这个

注意：只导入您使用的组件，不要从整个软件包导入

例如：如果你想使用ng2引导模式

import {MODAL_DIRECTIVES} from "ng2-bootstrap/components/modal";

而不是：

import {MODAL_DIRECTIVES} from "ng2-bootstrap/ng2-bootstrap";

这将导入模态组件，而不是整个ng2引导

然后按照@FreeBird72的答案进行操作

添加此package.json

{
  ...
  "scripts": {
    ...
    "prod": "npm run tsc && npm run browserify",
    "browserify": "browserify -s main  dist/main.js > dist/bundle.js && npm run minify",
    "minify": "uglifyjs dist/bundle.js --screw-ie8 --compress --mangle --output dist/bundle.min.js",
    ...
  },
  "devDependencies": {
    ...
    "browserify": "^13.0.1",    
    "uglifyjs": "^2.4.10",
    ...
  }
  ...
}

然后您可以

npm在开发和
npm运行时运行tsc
{
...
  "scripts": {
      "build_prod": "npm run clean && npm run browserify",
      "clean": "del /S/Q public\\dist",
      "browserify": "browserify -s main  public/YourMainModule.js > public/dist/bundle.js && npm run minify",
      "minify": "uglifyjs public/dist/bundle.js --screw-ie8 --compress --mangle --output public/dist/bundle.min.js"
    },
...
  "devDependencies": {
      "browserify": "^13.0.1",    
      "typescript": "^1.9.0-dev.20160625-1.0",
      "typings": "1.0.4",
      "uglifyjs": "^2.4.10"
    }
}

import {MODAL_DIRECTIVES} from "ng2-bootstrap/components/modal";

import {MODAL_DIRECTIVES} from "ng2-bootstrap/ng2-bootstrap";

{
  ...
  "scripts": {
    ...
    "prod": "npm run tsc && npm run browserify",
    "browserify": "browserify -s main  dist/main.js > dist/bundle.js && npm run minify",
    "minify": "uglifyjs dist/bundle.js --screw-ie8 --compress --mangle --output dist/bundle.min.js",
    ...
  },
  "devDependencies": {
    ...
    "browserify": "^13.0.1",    
    "uglifyjs": "^2.4.10",
    ...
  }
  ...
}

ng build --prod --aot