将所有 angular2 包包含在 index.html 中会使导入从内存中获取数据而不是再次从服务器请求数据吗？

Question

我从 angular 2 开始，来自 angular 1，我对此非常满意（各方面都表现出色）。

我得到了节点后端和糟糕性能的快速入门（在 Firefox 中完全加载页面需要 40 秒和超过 500 个请求！）。我认真地想回到 angular 1 并留在那里直到 angular 3 出来（即永远）。

我四处搜索，除了 webpack，我发现了另一个有趣的信息：显然，如果你加载 index.html 文件中的所有包，import 语句不再从服务器请求每个文件，但从内存中获取数据。听起来不错！我得到了所有我能在 index.html 中找到的相关的、缩小的包，并且性能得到了很大的改善（我在 firefox 中得到了 ~10s，在 chrome 中得到了 3s）。与 angular 1.

相去甚远

此外，我仍然看到超过 500 个请求，总大小约为 7mb...所以，我想知道，这些请求是仍在从服务器请求文件，还是实际上是从内存中获取数据？

如果他们从内存中获取数据，为什么请求仍然存在？我如何检查他们从哪里获取数据？

如果他们仍然从服务器请求数据，一次一个文件，我如何强制他们在可用时从内存（或这些包存储在客户端的任何地方）获取数据？

此外，我还能做些什么来提高性能吗？（除了将所有内容缩小到一个 file/using webpack 之外）

这是我的 index.html 文件：

<html>
<head>
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link rel="stylesheet" href="styles.css">-->

<base href="/">

<!-- 1. Load libraries -->
<!-- Required polyfills, in order -->
<script src="es6-shim/es6-shim.min.js"></script>
<script src="angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="angular2/bundles/angular2-polyfills.min.js"></script>
<script src="systemjs/dist/system.js"></script>
<script src="rxjs/bundles/Rx.min.js"></script>
<script src="angular2/bundles/angular2.min.js"></script>
<script src="angular2/bundles/router.min.js"></script>
<script src="angular2/bundles/http.min.js"></script>

<script src="angular2-cookie/bundles/angular2-cookie.min.js"></script>

<script src="lodash/lodash.min.js"></script>
<!-- 2. Configure SystemJS -->
<script>
    System.defaultJSExtensions = true;
    System.import('main').then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
    <app>Loading...</app>
</body>

我公开了 node_modules 和 public 目录，所以一切正常。

Answer 1

好的，我加载得又快又好。显然，诀窍是在加载 angular2 内容之前配置 systemjs；我只是在加载其他任何东西之前这样做，就像这样：

<html>
<head>
    <title>Angular 2 QuickStart</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <base href="/">
    <link rel="stylesheet" href="app/style.css">

    <!-- 1. Load libraries -->
    <!-- Configure SystemJS -->
    <script src="systemjs/dist/system.js"></script>
    <script>
        System.config({ defaultJSExtensions: true });
    </script>

    <!-- Angular libraries -->
    <script src="es6-shim/es6-shim.min.js"></script>
    <script src="angular2/es6/dev/src/testing/shims_for_IE.js"></script>
    <script src="angular2/bundles/angular2-polyfills.min.js"></script>
    <script src="rxjs/bundles/Rx.min.js"></script>
    <script src="angular2/bundles/angular2.min.js"></script>
    <script src="angular2/bundles/router.min.js"></script>
    <script src="angular2/bundles/http.min.js"></script>
    <script src="angular2-cookie/bundles/angular2-cookie.min.js"></script>

    <!-- Other libraries -->
    <script src="lodash/lodash.min.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
        System.import('main').then(null, console.error.bind(console));
    </script>
</head>
<!-- 3. Display the application -->
<body>
<app>Loading...</app>
</body>
</html>

然后她去了！

将所有 angular2 包包含在 index.html 中会使导入从内存中获取数据而不是再次从服务器请求数据吗？

Will including all the angular2 bundles in index.html make imports get data from memory instead of requesting it from the server again?

javascript

performance

node.js

systemjs

angular