JavaScript 构建选项/工具

Posted 2023-02-24

【中文标题】JavaScript 构建选项/工具

【英文标题】：JavaScript build options/tools

【发布时间】：2010-10-26 17:25:54

【问题描述】：

这些天，我发现自己将越来越多的工作转移到客户端，因此我的 JS 文件越来越大。我已经到了大多数 html 页面在标题中有六个或更多 JS 导入的地步，我意识到这会损害加载时间。

我最近发现了这个script，它可以让你通过一个 HTTP 请求下载多个 JS 文件。它是用 php 编写的，作为 Django 的粉丝，我打算用 Python 重写它。我打算使用 HTTP 重定向到预先缩小和连接的文件，并且想知道 301 的成本是多少。如果这是一个愚蠢的想法，请告诉我。

另一方面，我不太担心将脚本逻辑引入到静态文件的服务中，我想知道是否有可行的构建替代方案，例如连接和缩小 JS 文件并替换多个 JS 下载的 ant 任务在一个带有一个大标题的 HTML 标题中，就像脚本一样。

【参考方案1】：

对于 PHP，我当然喜欢动态执行它，因为如果您引入构建步骤，您将失去使用 PHP 的主要好处之一。事实上，冒着自我推销的风险，我已经写了Supercharging javascript in PHP 来讨论这个问题。

当然，其他技术可能会有所不同。

再说一遍，它是 PHP，但它不仅仅是供您使用的代码块（尽管您可以直接跳转到 Part 6，如果您只想要一些完全工作的代码）并且在识别问题方面可能对您有价值并以正确的方式做事以及为什么要这样做。

我喜欢打包 Javascript 文件（可能整个应用程序只有一个），然后每个页面通过标准方式简单地激活它需要的行为，但所有代码体都在更大的缓存和缩小的 JS 文件中。这种方式效果最快，是一个不错的选择。

如果您确实希望它作为构建过程的一部分，如果您有构建过程，这是一个合理的解决方案，那么我建议您缩小代码。有很多工具可以做到这一点。看看YUI Compressor。

如果您对 JS 文件进行静态组合，则上面提到的其他内容（例如 gzipping 和相关问题）仍然相关。

【参考方案2】：

YUI 压缩器是一个不错的选择。如果您想了解如何设置基于 Ant 的构建过程，请查看此教程：http://www.javascriptr.com/2009/07/21/setting-up-a-javascript-build-process/

作为基于 Ruby 的替代方案，我会推荐 Sprockets