Angular2 加载时文件请求过多 [英] Angular2 too many file requests on load

问题描述

我正在使用 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 文件的屏幕截图:

有没有办法避免所有这些请求?

解决方案

我遇到了完全相同的问题，实际上是在看这篇文章以寻求答案.这是我为解决问题所做的工作.

1. 修改您的项目以使用 webpack.按照这个简短的教程:Angular2 QuickStart SystemJS 到 Webpack
2. 此方法将为您提供一个 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.

1. Modify your project to use webpack. Follow this short tutorial: Angular2 QuickStart SystemJS To Webpack
2. 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, run webpack -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 加载时文件请求过多的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！