[英]How to prevent Angular2 core making dozens of HTTP requests on page load?
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: 所以我正在开发一个Angular2应用程序,只是通过引导Angular2,我发送了超过250个@angular/core
节点模块包中存在的每个js文件的请求:
Specifically, everything seems to be imported from zone.js:101
. 具体来说,一切似乎都是从zone.js:101
导入的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);
Here is my HTML: 这是我的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>
And here is systemjs.config.js
: 这是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);
What's going on here? 这里发生了什么?
That setup is for development only. 该设置仅用于开发。 For production, you should create a bundle. 对于生产,您应该创建一个包。 SystemJS has the SystemJS Builder . SystemJS具有SystemJS Builder 。
JSPM will give you more options. JSPM将为您提供更多选择。
EDIT to answer your comment: 编辑回答你的评论:
Yes, it's a build step. 是的,这是一个构建步骤。 This seed project uses gulp, TypeScript, TSLint, SystemJS and JSPM to build the front end. 该种子项目使用gulp,TypeScript,TSLint,SystemJS和JSPM来构建前端。 It has distinct gulp configurations for the development build and production build. 它为开发构建和生产构建提供了独特的gulp配置。
Also, in that seed project you'll see that the package.json dependencies section is empty. 此外,在该种子项目中,您将看到package.json dependencies部分为空。 That is because he uses JSPM ( this config ) to manage the dependencies. 那是因为他使用JSPM( 此配置 )来管理依赖项。
Now the bundler will follow the import {} from 'dependency'
s used by you code and only add to the bundle what was really used. 现在,bundler将遵循代码使用的import {} from 'dependency'
的import {} from 'dependency'
并且只添加实际使用的bundle。
There is new systemjs config in official quickstart https://angular.io/guide/quickstart 官方快速入门https://angular.io/guide/quickstart中有新的systemjs配置
Here is the copy 这是副本
// Add package entries for angular packages
ngPackageNames.forEach(function(pkgName) {
packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
});
So we can use their UMD bundle, and I tried it, from ~400 requests to about ~60 requests. 所以我们可以使用他们的UMD捆绑包,我尝试了它,从大约400个请求到大约60个请求。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.