因此,我正在开发一个 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);
这是怎么回事?
最佳答案
该设置仅用于开发。 对于生产,您应该创建一个包。 SystemJS 有 SystemJS Builder .
JSPM会给你更多的选择。
编辑以回答您的评论:
是的,这是构建步骤。这seed项目使用gulp、TypeScript、TSLint、SystemJS和JSPM搭建前端。 它具有用于开发构建和 production 的独特 gulp 配置。构建。
此外,在该种子项目中,您会看到 package.json 依赖项 部分是空的。那是因为他使用 JSPM ( this config ) 来管理依赖项。
现在, bundler 将遵循您代码使用的import {} from 'dependency'
,并且只将真正使用的内容添加到 bundle 中。
关于javascript - 如何防止 Angular2 核心在页面加载时发出数十个 HTTP 请求?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37098942/