angularjs app的初始页面加载性能

Question

我在使用webpack捆绑资源的AngularJS应用程序中工作。目前我们正在创建一个包含CSS的app.js文件。 app.js的大小约为6MB。如果我们将app.js分成多个块，那么这会改善页面性能。我的同事说服我，如果我们将单个JS文件分成2或3，那么页面加载时间将增加两倍或三倍。这是真的吗？我记得在阅读一些文件比多文件更好的地方。我现在还不记得原因。我是否真的需要打破app.js文件以获得页面性能？或者我可以在这里申请什么其他选择？

Answer 1

单个文件更好，因为它需要更少的连接（意味着更少的开销），但在谈论＆lt;时，这实际上可以忽略不计。 5个文件。拆分文件的某些部分时，您可以分别缓存文件，这通常是一个很好的胜利。因此，我建议将文件拆分为逻辑上可缓存的部分（如供应商代码和自定义代码）。

另请注意，如果客户端和服务器支持http / 2，则由于http / 2支持连接重用，连接原因也会消失。

请注意，初始加载时间没有实际差异，因为在这种情况下，无论如何都需要下载所有文件。

Answer 2

单个文件通常意味着更好的性能。您还应确保正确缓存此文件（在浏览器端）并在您的网络服务器提供服务时进行gzip压缩。

Answer 3

我在Chrome（Mac 54.0.2840.98（64位））中进行了实际测试，以证明在将巨大的JS文件分解为多个方面是否真的有性能提升。我创建了一个10MB的js文件并制作了三个副本。连接所有3个复制并创建一个30MB的文件。我测量了在页面底部使用普通脚本标记引用的单个文件所花费的时间，它大约需要1分钟。然后我一个接一个地引用了3个10MB脚本文件，加载所有内容花费了近20秒。因此，将一个巨大的JS文件分解为许多可以获得真正的性能提升。但是没有限制。浏览器可以平行下载的文件。