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