依赖一些大文件是否有效？答案

【问题标题】：Is relying on a few, large files, as dependencies efficient?依赖一些大文件是否有效？
【发布时间】：2016-09-14 17:00:06
【问题描述】：

我正在开发一个具有许多 3rd 方 javascript 和 css 依赖项的 Web 应用程序。自从我发现了 Node.js、bower 和 gulp，查找和安装这些依赖项变得轻而易举。但是，我一直在积极推行将我所有的 javascript 连接到一个文件中的策略，并且我的所有样式表也是如此。连接和缩小后，我的 Web 应用程序仅依赖于两个相当大的文件（main.js 和 main.css）。作为参考，我的 main.js 文件大小为 1.6MB，而我的 main.css 文件大小为 261KB。无论如何都不大，但远远大于任何一个单独的依赖项。这是最优的，还是这些文件不断增长的大小最终超过了通过减少请求获得的优化？是否存在这种策略不合适的情况？

【问题讨论】：

AFAIK，你做得对，但我认为它可以做得更优化。您是否一次在加载的页面上使用整个 main.js 和 main.css？如果没有，则考虑在必要时异步加载它们，并为加载的页面仅加载相关的 js 和 css 内容。
这个问题主要基于意见或需要讨论，因此与 Stack Overflow 无关。
您可以阅读此处了解更多信息。 link
@Paulie_D 真的吗？我的意思是，可以讨论哪种方法更优化的问题，但最终这不是意见问题。大文件要么更优化，要么不是。我希望这个问题不会引起仅仅基于意见的答案，而是像 Sheepy 那样基于事实的良好答案
在我看来……最适合谁，在什么情况下定义最佳，如果您的定义与其他人不同怎么办？这就是为什么它是基于意见或需要讨论的......但是关于“话题性”的意见在这里会有所不同。

标签： javascript css web

【解决方案1】：

是的。不整合资源会产生网络开销。但是当js变得这么大的时候，它应该被拆分。

所有主流浏览器preload 你的脚本和css。因此，如果您将 1.6 MB 的 js 拆分为 3 个，浏览器将在 4 个连接中同时加载所有三个和 css。

您可能认为总带宽是一样的，那何必呢？但它可能会更快，因为：

它从服务器获取更多带宽。
它从其他程序/服务中获取更多带宽。
它从同一浏览器中的其他选项卡中获取更多带宽。
可以在其他部分仍在下载时解析部分并执行。
如果只更新其中一个部分，则可以从缓存中读取其他部分。

1.6MB 非常大，如果将其拆分，您应该会看到速度提升。但最佳位置取决于很多因素，因此您需要进行试验，看看哪种零件尺寸最适合您。

事实上，它是如此之大，你应该推迟脚本，正如格林先生评论的那样。先让你的 css 和 html 运行，显示一个加载图标，然后加载你的大脚本。

【讨论】：