将所有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?

本文关键字：数据 内存 获取 服务器 请求 导入 angular2 包包含 html index      更新时间：2023-09-26

我从angular 2开始，来自angular 1，我对此感到非常满意（表现出色）。

我快速启动了节点后端和糟糕的性能（在firefox中完全加载页面需要40秒和500多个请求！）。我认真地想过回到角度1，一直呆在那里，直到角度3出来（即永远）。

我四处搜索，除了webpack，我还发现了另一个有趣的信息：显然，如果你在index.html文件中加载所有捆绑包，导入语句就不再从服务器请求每个文件，而是从内存中获取数据。听起来很棒！我在index.html中找到了所有相关的、缩小的捆绑包，性能得到了很大的提高（我在firefox中得到了大约10分，在chrome中得到了3分）。与棱角分明的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和公共目录，所以这一切都很好。

好吧，我加载得又快又好。显然，诀窍是在加载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>

她来了！

相关文章：