如何防止 Angular2 核心在页面加载时发出数十个 HTTP 请求？答案

【问题标题】：How to prevent Angular2 core making dozens of HTTP requests on page load?如何防止 Angular2 核心在页面加载时发出数十个 HTTP 请求？
【发布时间】：2016-09-03 02:16:52
【问题描述】：

所以我正在开发一个 Angular2 应用程序，并且仅通过引导 Angular2，我就收到了超过 250 个请求，针对 @angular/core 节点模块包中存在的几乎每个 js 文件：

具体来说，一切似乎都是从zone.js:101 导入的。这是我的应用程序入口点，只是为了证明我没有做任何不寻常的事情：

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { LiveComponent } from './components/live.component';

bootstrap(LiveComponent);

这是我的 HTML：

<!-- 1. Load libraries -->
<!-- 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="node_modules/systemjs/dist/system.src.js"></script>

<!-- 2. Configure SystemJS -->
<script src="js/systemjs.config.js"></script>
<script>
    System.config({
       defaultJSExtensions: true
    });
    System.import('js/angular2/main').catch(function(err){ console.error(err);  });
</script>

这里是systemjs.config.js：

(function(global) {

    // map tells the System loader where to look for things
    var map = {
        'app':                        'app', // 'dist',
        'rxjs':                       'node_modules/rxjs',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        '@angular':                   'node_modules/@angular'
    };

    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app':                        { main: 'main.js',  defaultExtension: 'js' },
        'rxjs':                       { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { defaultExtension: 'js' },
    };

    var packageNames = [
        '@angular/common',
        '@angular/compiler',
        '@angular/core',
        '@angular/http',
        '@angular/platform-browser',
        '@angular/platform-browser-dynamic',
        '@angular/router',
        '@angular/router-deprecated',
        '@angular/testing',
        '@angular/upgrade',
    ];

    // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
    packageNames.forEach(function(pkgName) {
        packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
    });

    var config = {
        map: map,
        packages: packages
    }

    // filterSystemConfig - index.html's chance to modify config before we register it.
    if (global.filterSystemConfig) { global.filterSystemConfig(config); }

    System.config(config);

})(this);

这是怎么回事？

【问题讨论】：

标签： javascript angular

【解决方案1】：

该设置仅用于开发。对于生产，您应该创建一个捆绑包。 SystemJS 有SystemJS Builder。

JSPM 会给你更多选择。

编辑回答您的评论：

是的，这是一个构建步骤。这个seed 项目使用 gulp、TypeScript、TSLint、SystemJS 和 JSPM 来构建前端。它为开发构建和production 构建提供了不同的 gulp 配置。

此外，在该种子项目中，您会看到 package.json dependencies 部分为空。那是因为他使用 JSPM (this config) 来管理依赖关系。

现在捆绑器将遵循您的代码使用的import {} from 'dependency's，并且只将真正使用的内容添加到捆绑包中。

【讨论】：

你能说得更详细一点吗？这是一个预处理步骤正确吗？ IE。它会被包含在一个 gulp 任务中吗？

【解决方案2】：

官方 quickstart 中有新的 systemjs 配置 https://angular.io/guide/quickstart

这是副本

// Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
  });

所以我们可以使用他们的 UMD 包，我试过了，从大约 400 个请求到大约 60 个请求。

【讨论】：