Question

我目前正在开发一个将在 B2B环境的本地网络上运行的应用程序。所以我在保存带宽方面几乎可以忘记微（迷你？）优化，因为Hardware Is Cheap, Programmers Are Expensive。

我们在项目中有一个结构良好的面向对象的js代码，显然很多js类。如果所有类都将存储在单独的文件中，那么在这段代码中导航并因此维护它将非常容易。

但这会让我的浏览器生成几十个 HTTP请求，以获取我在页面上需要的所有js文件/类。即使在本地环境中，它在第一次加载时没有超快（具有空缓存），稍后当您修改它并且缓存必须无效时。

可能的解决方案：

但是如果我们为此选择YUI压缩器（在开发环境中没有缩小操作，并且缩小生产） - 那么我们需要在任何js文件中的每次修改时重新加载/重新编译这个大js文件。

您建议如何解决此问题？

Answer 1

将所有.js文件分开。保持“每个文件一个类”规则。

然后，使用服务器端技术将脚本聚合到一个请求中。

选项：

使用ASPX或PHP或whatevver服务器端脚本编写的东西，将所有JS聚合到一个请求中。对.js的请求不再是静态文件，但是在服务器上进行缓存时，它应该相对便宜。
在统一的.js文件中使用服务器端包含。

＆lt;！ - #include virtual =“/ class1.js” - ＆gt;
＆lt ;! - #include virtual =“/ class2.js” - ＆gt;

Answer 2

为每个班级提供单独文件的方法很好 - 使开发更容易的实践总是很好。

以下是加快加载速度的一些技巧：

压缩您的代码。正如您所说，您可以使用YUICompressor或新发布的Google Closure Compiler。
当将多个文件连接成一个文件时，请考虑您需要什么以及何时：如果您在应用程序启动时只需要文件A，B和C，而不是Z和X，则只将A，B和C放入单个文件中。在A / B / C之后同时加载带有Z和X的另一个文件。
您可以使用Firefox插件YSlow和Page Speed来测试负载性能瓶颈

正如您所提到的，每次进行更改时都需要重新运行压缩器。我不认为这是一个大问题 - 在一台体面的机器上，即使有很多文件也应该运行得非常快。或者，您可以使用某个工具来使用每日构建过程，该工具可以从源代码控制构建最新版本（您确实使用scm，对吗？），如果一切正常，则运行单元测试并进行部署。

我建议使用Ant或其他一些自动化工具来创建构建脚本。这将使它像运行一个命令一样简单，以构建您的压缩脚本，减少您需要执行的重复工作。您甚至可以让Ant将您的代码部署到服务器。

Answer 3

您可能拥有两全其美 - 一个开发环境，每个js文件只有一个类，无需为每次迭代编译/部署，并且在生产中有一个（或几个）连接的较大js文件（如果需要，可以缩小）。 / p>

根据您的构建环境，这可能会以多种不同的方式设置，但使用Ant可能是最简单的方法。使用Ant，您可以为concatenation和缩小运行任务（通过Java task运行YUICompressor）。这将生成连接和缩小的大型js文件。

但是，为了保持工作效率，您希望避免在每次代码迭代时都这样做。将标签从一个更改为多个（对于每个类文件）都是不可能的。

因此，您按预期加载了大型js文件：

<script src="application.js"></script>

部署到生产环境时，此文件是所有js文件的连接/缩小版本。

但是，在开发过程中，这个文件是一个bootstrap / loader文件，它只是加载你所有的js文件（使用jQuery的例子）。

$.getScript('/class1.js');
$.getScript('/class2.js');
$.getScript('/class3.js');
$.getScript('/class4.js');
$.getScript('/classn.js');
....

如果您正在使用YUI 3查看模块行为以及如何指定依赖项。

使用不同的Ant目标，可以轻松管理这些文件的生成和复制到正确的位置。

现在，您可以在需要测试文件中的更改时重新加载浏览器，但在生产过程中获得性能优势。所有这些都不会牺牲生产力或可维护性。