管理和部署大型 JavaScript 应用程序的最佳实践答案

【问题标题】：Best practices for managing and deploying large JavaScript apps管理和部署大型 JavaScript 应用程序的最佳实践
【发布时间】：2025-12-29 15:20:13
【问题描述】：

管理中型 JavaScript 应用程序有哪些标准做法？我关心的是浏览器下载的速度以及开发的简易性和可维护性。

我们的 JavaScript 代码大致“命名空间”为：

var Client = {
   var1: '',
   var2: '',

   accounts: {
      /* 100's of functions and variables */
   },

   orders: {
      /* 100's of functions and variables and subsections */
   }

   /* etc, etc  for a couple hundred kb */
}

目前，我们有一个（未打包、未剥离、高度可读的）JavaScript 文件来处理 Web 应用程序上的所有业务逻辑。此外，还有 jQuery 和几个 jQuery 扩展。我们面临的问题是，在 JavaScript 代码中查找任何内容需要 forever，而浏览器仍有十几个文件要下载。

将少量“源”JavaScript 文件“编译”成一个最终的压缩 JavaScript 文件是否很常见？还有其他方便的提示或最佳做法吗？

【问题讨论】：

标签： javascript web-applications deployment

【解决方案1】：

我发现对我有用的方法是为每个类使用单独的 JS 文件（就像在 Java、C# 和其他中一样）。或者，如果您更容易导航，您可以将您的 JS 分组到应用程序功能区域中。

如果您将所有 JS 文件放在一个目录中，您可以让您的服务器端环境（例如 PHP）循环遍历该目录中的每个文件，并在某个头文件中输出一个 <script src='/path/to/js/$file.js' type='text/javascript'>用户界面页面。如果您经常创建和删除 JS 文件，您会发现这种自动加载特别方便。

在部署到生产环境时，您应该有一个脚本，将它们全部组合到一个 JS 文件中并“缩小”它以减小大小。

【讨论】：

我认为这不是一个好主意——您很可能会在 html 文档中陷入脚本标签丛林。考虑使用 AMD 加载程序，例如：requirejs.org

【解决方案2】：

另外，我建议您使用 Google 的 AJAX Libraries API 来加载外部库。

这是一个 Google 开发者工具，它捆绑了主要的 JavaScript 库，并且通过始终使用压缩版本使其更易于部署、升级和减轻它们的负担。

此外，它使您的项目更简单、更轻便，因为您无需在项目中下载、复制和维护这些库文件。

这样使用：

google.load("jquery", "1.2.3");
google.load("jqueryui", "1.5.2");
google.load("prototype", "1.6");
google.load("scriptaculous", "1.8.1");
google.load("mootools", "1.11");
google.load("dojo", "1.1.1");

【讨论】：

【解决方案3】：

只是一个侧节点——史蒂夫已经指出，你应该真正“缩小”你的 JS 文件。在 JS 中，空格实际上很重要。如果你有一千行 JS 并且你只删除不需要的换行符，你已经节省了大约 1K。我想你明白了。

有适合这项工作的工具。而且你永远不应该手动修改“缩小”/剥离/混淆的 JS！从来没有！

【讨论】：

【解决方案4】：

在我们的大型 javascript 应用程序中，我们将所有代码编写在小的单独文件中 - 每个“类”或功能组一个文件，使用一种类似于 Java 命名空间/目录结构。然后我们有：

一个编译时步骤，它获取我们所有的代码并缩小它（使用 JSMin 的变体）以减少下载大小
一个编译时步骤，它采用总是或几乎总是需要的类并将它们连接成一个大包以减少到服务器的往返次数
一个“类加载器”，在运行时按需加载其余类。

【讨论】：

【解决方案5】：

为了提高服务器效率，最好将所有 javascript 合并到一个压缩文件中。

确定需要代码的顺序，然后将缩小后的代码按需要的顺序放在单个文件中。

关键是减少加载页面所需的请求数量，这就是为什么您应该将所有 javascript 放在一个文件中用于生产。

我建议将文件分开用于开发，然后创建一个构建脚本来组合/编译所有内容。

此外，作为一个好的经验法则，请确保在页面末尾包含 JavaScript。如果 JavaScript 包含在标头中（或页面早期的任何位置），它将停止发出所有其他请求，直到它被加载，即使打开了流水线也是如此。如果是在页尾，就不会有这个问题了。

【讨论】：

我以为 javascript 是要加载到头部的，但你是说将 js 推送到正文？
@SocialAddict 是的，几乎在所有情况下，您都希望您的 JS 成为 body 标签中的最后一件事。只有在您需要在处理页面上的其余内容之前执行它时，您才应该将 JS 放在顶部。因为 JS 会阻止渲染，所以将其放在底部会使加载速度更快，因为它允许浏览器异步加载更多内容。查看 Yahoo! 在 JS 上的最佳实践：developer.yahoo.com/performance/rules.html#js_bottom
+1 - 不知道，因为似乎总是暗示头部是为了包含 JS 文件。 :)

【解决方案6】：

阅读其他（好的）javascript 应用程序的代码，看看它们是如何处理事情的。但我从每个班级一个文件开始。但是一旦它准备好投入生产，我会将这些文件合并成一个大文件并缩小。

我不会合并文件的唯一原因是我不需要所有页面上的所有文件。

【讨论】：

【解决方案7】：

我的策略包括 2 个主要技术：AMD 模块（避免数十个脚本标签）和模块模式（避免应用程序部分的紧密耦合）

AMD 模块：非常简单，请参见此处：http://requirejs.org/docs/api.html 它还能够将应用程序的所有部分打包到一个缩小的 JS 文件中：http://requirejs.org/docs/optimization.html

模块模式：我使用了这个库：https://github.com/flosse/scaleApp你现在问这是什么？更多信息在这里：http://www.youtube.com/watch?v=7BGvy-S-Iag

【讨论】：