javascript - 加载整个目录的 css/javascript

Question

我的问题是双重的，是否可以加载整个 css 或 javascript 目录？这样做有什么好处吗？

示例 - 对于电子商务商店，您可能有一堆功能/样式所需的额外 css 和 javascript。将所有需要的 javascript 文件放在 js/checkout 目录中，然后导入整个目录似乎比单独调用每个文件更精简。

这有可能吗？ 还是出于某种原因这不是一个好主意？

Answer 1

与其单独加载它们，不如将构建步骤添加到您的部署中，这样您就可以将所有 CSS 和 JavaScript 压缩到两个文件中。然后提供这两个文件，以便只发送两个东西而不是可能发送更多。

此外，虽然从头开始创建构建系统可能很“有趣”，但您可能想要研究一些已经拥有大量追随者的构建工具。我用过 Dojo Toolkit之前，它运作良好。你会得到 Asynchonous Module Definitions (AMD)从使用它也可以减少您需要提出的请求数量。我经常听到的另一个特殊的 JS 构建系统(虽然我还没有使用过)是 Grunt .

注意，有一个权衡选择。使用 AMD 可以帮助您减少对只加载您使用的脚本的请求的总数。将此与下载一个包含所有可能脚本的巨大 JS 文件进行比较。

一个巨型脚本

如果您有 100 个 5kb 脚本文件，一个大型缩小脚本(如果没有因分号、名称修改和换行符删除而增加大小)为 500kb。接收该脚本需要一个请求，假设一个请求平均需要 1kb。这意味着，大型脚本总共要花费 101kb。

超微

现在考虑使用 AMD 的成本。假设在特定页面上您只使用了其中的 7 个 5kb 脚本，而请求仍然只占用 1kb。我们还假设 AMD 库的开销是 10kb。该页面将花费 52kb ((7 * (1kb + 5kb)) + 10kb)

如您所见，使用 AMD 方法而不是构建方法会导致更多请求，但在成本方面会给您带来净 yield 。 ALSO 不考虑缓存之前已经加载的内容。

此外，如果用户浏览您的整个网站，访问每个页面，导致下载每个脚本，那么您将花费 610kb (100 * (5kb + 1kb )) + 10kb。但是，如果您使用缩小的脚本，它只会花费您 501kb。

哦，不要认为 AMD vs One Mega Script 对缩小有影响。在这两种情况下，缩小都有助于减小请求大小。