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

Question

我从角度1开始，从角度1开始，对此我感到非常满意（出色的性能）。

我快速启动了节点后端，并获得了出色的性能（40秒才能将页面完全加载到firefox中，并超过500个请求！）。 我认真考虑过回到角度1并一直停留到角度3出来（即永远）。

我到处搜索了webpack，发现了另一个有趣的信息：显然，如果将所有捆绑软件加载到index.html文件中，则import语句不再从服务器请求每个文件，而是从内存中获取它们的数据。 听起来不错！ 我在index.html中找到了所有相关的最小化包，并且性能得到了很大改善（firefox中为10s，chrome中为3s）。 与角度1仍然相去甚远。

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

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

如果他们仍在从服务器请求数据，一次请求一个文件，我该如何强制他们从内存（或那些捆绑存储在客户端的任何位置）中获取数据？

另外，还有什么我可以做以提高性能的吗？ （除了将所有内容压缩到一个文件中/使用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和公共目录，所以一切正常。

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中，使导入从内存中获取数据，而不是再次从服务器请求数据？

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-04-30 21:24:53

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-04-30 21:24:53

解决方案1
0 已采纳 2016-04-30 21:24:53