问题描述
我正在使用 Angular2
制作网站,但我遇到了我认为的问题.在我的 Angular 页面的第一次加载时,SystemJS
发出超过 50000 个请求来检索 angular2/src
目录中的每个 Angular2
文件.总共,第一次加载下载超过 4MB,启动时间超过 14 秒.
我的 index.html
执行以下脚本包括:
<script src="libs/angular2/bundles/angular2-polyfills.js"></script><script src="libs/systemjs/dist/system.src.js"></script><script src="libs/rxjs/bundles/Rx.js"></script><script src="libs/angular2/bundles/angular2.min.js"></script><script src="libs/angular2/bundles/http.dev.js"></script><script src="libs/jquery/jquery.js"></script><script src="libs/lodash/lodash.js"></script><script src="libs/bootstrap/js/bootstrap.js"></script>
我的 systemJs 初始化代码如下所示:
系统配置({defaultJSExtensions: 真,路径:{'*': '库/*','app/*': 'app/*'},packageConfigPaths: ['libs/*/package.json'],包:{应用程序: {格式:'注册',默认扩展名:'js'}}});System.import('app/main').then(null, console.error.bind(console));
我的公用文件夹具有以下结构:
.├── img├── 样式├──应用├── 库|└── angular2|└── systemjs|└── rxjs|└── jquery|└── 洛达什|└── 引导程序└── index.html一些正在请求的 js 文件的屏幕截图:
有没有办法避免所有这些请求?
我遇到了完全相同的问题,实际上是在看这篇文章以寻求答案.这是我为解决问题所做的工作.
- 修改您的项目以使用 webpack.按照这个简短的教程:Angular2 QuickStart SystemJS 到 Webpack
- 此方法将为您提供一个 javascript 文件,但它非常大(我的项目文件超过 5MB)并且需要缩小.为此,我全局安装了 webpack:
npm install webpack -g
.安装后,从您的应用程序根目录运行webpack -p
.这使我的文件大小减少到大约 700KB
从 20 秒和 350 个请求减少到 3 秒和 7 个请求.
I'm making a website using Angular2
and I'm having what i suppose is an issue. On the first load of my angular page, SystemJS
is making more than 500 hundred requests to retrieve every Angular2
file in angular2/src
directory. In total, the first load downloads more than 4MB and it takes more than 14 seconds to start.
My index.html
does the following scripts includes:
<script src="libs/angular2/bundles/angular2-polyfills.js"></script>
<script src="libs/systemjs/dist/system.src.js"></script>
<script src="libs/rxjs/bundles/Rx.js"></script>
<script src="libs/angular2/bundles/angular2.min.js"></script>
<script src="libs/angular2/bundles/http.dev.js"></script>
<script src="libs/jquery/jquery.js"></script>
<script src="libs/lodash/lodash.js"></script>
<script src="libs/bootstrap/js/bootstrap.js"></script>
And my systemJs initialization code looks like this:
<script>
System.config({
defaultJSExtensions: true,
paths: {
'*': 'libs/*',
'app/*': 'app/*'
},
packageConfigPaths: ['libs/*/package.json'],
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
My public folder has the following structure:
.
├── img
├── styles
├── app
├── libs
| └── angular2
| └── systemjs
| └── rxjs
| └── jquery
| └── lodash
| └── bootstrap
└── index.html
A couple of screenshots of some of the js files that are being requested:
Is there a way to avoid all of those requests?
I had the exact same problem, was actually looking at this post for an answer. Here is what I did to solve the problem.
- Modify your project to use webpack. Follow this short tutorial:Angular2 QuickStart SystemJS To Webpack
- This method will give you a single javascript file however it is quite large (my project file was over 5MB) and needs to be minified. To do this I installed webpack globaly:
npm install webpack -g
. Once installed, runwebpack -p
from your apps root directory. This brought my file size down to about 700KB
From 20 seconds and 350 requests down to 3 seconds and 7 requests.
这篇关于Angular2 加载时文件请求过多的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!