我正在用Angular2制作一个网站,我认为这是一个问题.在我的angular页面的第一次加载中,SystemJS发出了500多个请求来检索angular2/src目录中的每Angular2个文件.总的来说,第一次加载的下载量超过4MB,启动时间超过14秒.

My 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初始化代码如下所示:

    <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>

"我的公用文件夹"具有以下 struct :

.
├── img
├── styles
├── app
├── libs
|   └── angular2
|   └── systemjs
|   └── rxjs
|   └── jquery
|   └── lodash
|   └── bootstrap
└── index.html

请求的一些js文件的几个屏幕截图:

enter image description here

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

推荐答案

我也有同样的问题,实际上我在看这篇帖子寻找答案.以下是我为解决这个问题所做的.

  1. 修改项目以使用webpack.遵循以下简短教程:
  2. 这个方法会给你一个单一的javascript文件,但它相当大(我的项目文件超过5MB),需要缩小.为此,我安装了webpack globaly:npm install webpack -g.安装后,从应用程序根目录运行webpack -p.这使我的文件大小降低到大约700KB

从20秒和350个请求减少到3秒和7个请求.

Typescript相关问答推荐

为什么当我试图从数据库预填充时,属性x不存在于类型{错误:字符串; }.ts(2339)上?

发出与HTML多姆事件重叠的Angular事件

界面中这种类型的界面界面中的多态性

Angular 17 -如何使用新的@if语法在对象中使用Deliverc值

如何使用泛型类型访问对象

打字脚本中泛型和直接类型重新映射的不同行为

使用动态主体初始化变量

匿名静态类推断组成不正确推断

打字类型保护递归判断

如何在TypeScrip中正确键入元素和事件目标?

TypeScrip界面属性依赖于以前的属性-针对多种可能情况的简明解决方案

如何将父属性类型判断传播到子属性

是否可以强制静态方法将同一类型的对象返回其自己的类?

类型与泛型抽象类中的类型不可比较

对有效枚举值的常量字符串进行常规判断

抽象类对派生类强制不同的构造函数签名

如何定义这样一个TypeScript泛型,遍历路由配置树并累积路径

打字:注解`是字符串`而不是`布尔`?

Route.ts文件中未导出HTTP方法

Typescript泛型-键入对象时保持推理