如何防止Angular2核心在页面加载时发出数十个HTTP请求? [英] How to prevent Angular2 core making dozens of HTTP requests on page load?

问题描述

因此，我正在开发Angular2应用程序，仅通过引导Angular2，我就收到了@angular/core节点模块包中几乎每个js文件的250个请求:

So I'm developing an Angular2 application, and just by bootstrapping Angular2, I'm sent over 250 requests for nearly every js file present in the @angular/core node module package:

具体来说，所有内容似乎都是从zone.js:101导入的.这是我的应用程序入口点，只是为了说明我没有做任何异常的事情:

Specifically, everything seems to be imported from zone.js:101. Here is my application entry point, just to demonstrate I'm not doing anything unusual:

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);

这是怎么回事?

推荐答案

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

That setup is for development only. For production, you should create a bundle. SystemJS has the SystemJS Builder.

JSPM 将为您提供更多选择.

JSPM will give you more options.

编辑以回答您的评论:

是的，这是一个构建步骤.这个 seed 项目使用gulp，TypeScript，TSLint，SystemJS和JSPM来构建前端. 它具有用于开发版本和生产版本.

Yes, it's a build step. This seed project uses gulp, TypeScript, TSLint, SystemJS and JSPM to build the front end. It has distinct gulp configurations for the development build and production build.

此外，在该种子项目中，您还会看到 package.json 依赖项部分为空.那是因为他使用JSPM(此配置)来管理依赖项.

Also, in that seed project you'll see that the package.json dependencies section is empty. That is because he uses JSPM (this config) to manage the dependencies.

现在，捆绑程序将遵循您使用的import {} from 'dependency'代码，仅将实际使用的内容添加到捆绑程序中.

Now the bundler will follow the import {} from 'dependency's used by you code and only add to the bundle what was really used.

这篇关于如何防止Angular2核心在页面加载时发出数十个HTTP请求?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！