如何指定Angular2应用程序所需的RXJS文件

时间:2016-08-02 06:01:50

标签: angular rxjs5

我开始使用Angular2应用。我非常简单的Angular2应用程序加载速度很慢。我注意到最初加载了很多不同的RXJS文件。是否需要所有这些RXJS文件?有没有办法限制RXJS文件加载?我的Angular 2应用程序从node_modules获取所有相关的RXJS文件。什么是优化RXJS的最佳方法?

这是我的app.component文件:



import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component
	({
		moduleId: module.id,
		selector: 'my-app',
		templateUrl: './app.component.html',
		directives: [ROUTER_DIRECTIVES]
	})

export class AppComponent
{
}




这是我的system.config.js:



/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function (global)
{
	// map tells the System loader where to look for things
	var map =
		{
			'app': '', // 'dist',
			'@angular': '/lib/@angular',
			'angular2-in-memory-web-api': '/lib/angular2-in-memory-web-api',
			'gitana': '/lib/gitana/gitana.min.js',
			'rxjs': '/lib/rxjs'
		};

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

	var ngPackageNames =
		[
			'common',
			'compiler',
			'core',
			'forms',
			'http',
			'platform-browser',
			'platform-browser-dynamic',
			'router',
			'router-deprecated',
			'upgrade',
		];

	// Individual files (~300 requests):
	function packIndex(pkgName)
	{
		packages[ '@angular/' + pkgName ] = { main: 'index.js', defaultExtension: 'js' };
	}

	// Bundled (~40 requests):
	function packUmd(pkgName)
	{
		packages[ '@angular/' + pkgName ] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
	}

	// Most environments should use UMD; some (Karma) need the individual index files
	var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;

	// Add package entries for angular packages
	ngPackageNames.forEach(setPackageConfig);

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

	System.config(config);
})(this);




1 个答案:

答案 0 :(得分:0)

我在这里创建了一个小角度应用程序。希望它能帮助你在事情上先行一步。希望它会有所帮助

  

https://github.com/khanstudio-github/Angular2AppASPNet

此外,在RxJs上,您可以加载个人组件,只加载您需要的组件。正如您在此文件中看到的那样 rxjs-operators.ts

而不是导入此法规import 'rxjs/Rx';中的所有运算符。您只能加载您需要的那些。

例如:

  • import' rxjs / add / operator / toPromise';
  • import' rxjs / add / operator / map';

这些只会加载.toPromise()和.map()运算符,而不是