javascript - 包括大量的 css 文件和 Javascript 文件——我该如何优化

Question

重复: Multiple javascript/css files: best practices?

大家好，我的应用程序快完成了，但问题是我注意到我包含了很多外部 javascript 文件和 css。我在这里使用了很多第三方免费插件，不想碰代码，因为害怕搞砸了。

但结果是我注意到我现在包含了 8 个外部 css 文件以及多达 20 个外部 Javascript 文件:O - 我不记得曾见过任何主要网站包含超过 2 或 3 个 css_js 文件结合起来，所以我肯定在这里做错了什么。我该如何解决这个问题 - 我在某处读到一个大的 js 文件比加载 2 或 3 个甚至是累积大小的一半的文件更快。

任何帮助将不胜感激

Answer 1

一个大文件比一堆小文件好，因为在这种情况下，网络浏览器向网络服务器发出一个请求，而不是 8 个请求。更重要的不是总大小的细微差别，而是总的latency的请求。

想象两种情况:您下载一个 8 kB 的文件和 8 个每个 1kB 的文件。

1. 在第一个场景中，总时间大约为 80 毫秒(传输时间)+ 50 毫秒(延迟)= 130 毫秒

2. 在第二种情况下，您有 8x10 毫秒(传输时间)+ 8x50 毫秒(!)的延迟 = 480 毫秒(!)

你看到了区别。这绝不是一个全面的示例，但您明白了。

因此，如果可能，将文件合并在一起。压缩内容以减少要传输的数据量。并使用缓存来摆脱重复的请求。