Angular2加载时文件请求太多

问题描述：

我正在使用 Angular2 创建一个网站，而我正在拥有我认为的问题。在我的角度页面的第一次加载时， SystemJS 正在发出超过500个请求来检索 Angular2 文件。 code> angular2 / src 目录。总的来说，首次加载下载超过4MB，启动时间超过14秒。

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.

我的 index.html 以下脚本是否包括：

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>

我的systemJs初始化代码如下所示：

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

一些截图正在请求的js文件：

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.

修改项目以使用webpack。请遵循以下简短教程：
Angular2 QuickStart SystemJS To Webpack

此方法将为您提供单个javascript文件，但它非常大（我的项目文件超过5MB）并且需要缩小。为此，我安装了webpack globaly： npm install webpack -g 。安装完成后，从您的应用程序根目录运行 webpack -p 。这使我的文件大小降低到大约700KB

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, run webpack -p from your apps root directory. This brought my file size down to about 700KB

从20秒和350个请求下降到3秒和7个请求。

From 20 seconds and 350 requests down to 3 seconds and 7 requests.

Angular2加载时文件请求太多

相关推荐