2

我目前正在开发一个将在B2B 环境中的本地网络上运行的应用程序。所以我几乎可以忘记在节省带宽方面的微（迷你？）优化，因为硬件便宜，程序员很贵。

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

但这将使我的浏览器生成几十个HTTP 请求，以获取页面上我需要的所有 js 文件/类。即使在本地环境中，它在第一次加载时也不是很快（缓存为空），后来当你修改它时，缓存必须失效。

可能的解决方案：

  • 违反规则“每个文件一个类”
  • 一直使用YUI 压缩器（在开发和生产中）来生成一个大的 js 文件。

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

你会推荐什么来解决这个问题？

4

3 回答 3

7

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

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

选项：

  1. 使用 ASPX 或 PHP 或任何你拥有的服务器端脚本，将所有 JS 聚合到一个请求中。对 .js 的请求不再是静态文件，但通过服务器上的缓存，它的服务应该相对便宜。

  2. 在合并的 .js 文件中使用服务器端包含。

    <!--#include virtual="/class1.js"-->
    <!--#include virtual="/class2.js"-->

于 2009-11-06T17:10:04.697 回答
3

您为每个类设置单独文件的方法是好的 - 使开发更容易的做法总是好的。

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

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

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

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

于 2009-11-06T17:17:32.290 回答
1

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

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

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

所以，你按预期加载你的大 js 文件：

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

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

然而，在开发过程中，这个文件是一个引导/加载器文件，它只是加载你所有的单个 js 文件（使用 jQuery 的示例）。

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

如果您使用的是YUI 3，请查看模块行为以及如何指定依赖项。

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

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

于 2009-11-06T22:06:33.220 回答