angularjs 应用的初始页面加载性能
Initial page load performance for an angularjs app
我正在开发一个 AngularJS 应用程序，该应用程序使用 webpack 来捆绑资源。目前我们正在创建一个包含 CSS 的单个 app.js 文件。 app.js 的大小约为 6MB。如果我们将 app.js 分成多个块，是否会提高页面性能。我的同事说服我，如果我们将单个 JS 文件分成 2 个或 3 个，那么页面加载时间将增加两倍或三次。真的是这样吗？我记得读过一些文章，其中有一个文件比多个文件更好。我现在真的不记得原因了。我真的需要破坏 app.js 文件来提高页面性能吗？或者我可以在这里应用哪些其他选项？
单个文件通常意味着更好的性能。您还应该确保此文件已正确缓存（在浏览器端）并在您的网络服务器提供服务时进行 gzip 压缩。
单个文件更好，因为它需要更少的连接（意味着更少的开销），但是当谈论 < 5 个文件时，这真的可以忽略不计。拆分文件的各个部分时，您确实获得了单独缓存文件的能力，这通常是一个巨大的胜利。因此，我建议将文件拆分为逻辑上可缓存的部分（如供应商代码和自定义代码）。
另请注意，如果客户端和服务器支持 http/2，由于 http/2 支持连接重用，因此连接较少的原因也消失了。
请注意，初始加载时间没有真正的区别，因为在这种情况下，无论如何都需要下载所有文件。
我在Chrome (Mac 54.0.2840.98 (64-bit)) 做了一个实际测试来证明将一个巨大的JS文件分成多个是否真的有性能提升。我创建了一个 10MB 的 js 文件并制作了三个副本。连接所有 3 个复制并创建一个 30MB 的文件。我测量了在页面底部使用普通脚本标记引用的单个文件所花费的时间，大约需要 1 分钟。然后我依次引用了3个10MB的脚本文件，加载了将近20秒。因此，将一个巨大的 JS 文件分成许多文件确实可以提高性能。但是数量是有限制的。浏览器可以并行下载的文件数。
我正在开发一个 AngularJS 应用程序，该应用程序使用 webpack 来捆绑资源。目前我们正在创建一个包含 CSS 的单个 app.js 文件。 app.js 的大小约为 6MB。如果我们将 app.js 分成多个块，是否会提高页面性能。我的同事说服我，如果我们将单个 JS 文件分成 2 个或 3 个，那么页面加载时间将增加两倍或三次。真的是这样吗？我记得读过一些文章，其中有一个文件比多个文件更好。我现在真的不记得原因了。我真的需要破坏 app.js 文件来提高页面性能吗？或者我可以在这里应用哪些其他选项？
单个文件通常意味着更好的性能。您还应该确保此文件已正确缓存（在浏览器端）并在您的网络服务器提供服务时进行 gzip 压缩。
单个文件更好，因为它需要更少的连接（意味着更少的开销），但是当谈论 < 5 个文件时，这真的可以忽略不计。拆分文件的各个部分时，您确实获得了单独缓存文件的能力，这通常是一个巨大的胜利。因此，我建议将文件拆分为逻辑上可缓存的部分（如供应商代码和自定义代码）。
另请注意，如果客户端和服务器支持 http/2，由于 http/2 支持连接重用，因此连接较少的原因也消失了。
请注意，初始加载时间没有真正的区别，因为在这种情况下，无论如何都需要下载所有文件。
我在Chrome (Mac 54.0.2840.98 (64-bit)) 做了一个实际测试来证明将一个巨大的JS文件分成多个是否真的有性能提升。我创建了一个 10MB 的 js 文件并制作了三个副本。连接所有 3 个复制并创建一个 30MB 的文件。我测量了在页面底部使用普通脚本标记引用的单个文件所花费的时间，大约需要 1 分钟。然后我依次引用了3个10MB的脚本文件，加载了将近20秒。因此，将一个巨大的 JS 文件分成许多文件确实可以提高性能。但是数量是有限制的。浏览器可以并行下载的文件数。