如何将多个JavaScript文件的请求合并为一个http请求?

时间:2020-03-06 14:25:57  来源:igfitidea点击:

这个概念对我来说是一个新概念-我首先在YUI依赖项配置器中遇到了这个概念。基本上,不是对多个文件有多个请求,而是将文件链接到一个http请求中,以减少页面加载时间。

有人知道如何在LAMP堆栈上实现它吗? (我已经问过类似的问题,但这似乎是针对ASP的。

谢谢!

更新:这两个答案都很有帮助...(我的代表还不够高,无法发表评论,因此我在这里添加了一些分开的想法)。我还遇到了另一篇有关PHP特定示例的博客文章,这些示例可能会有用。不过,David的构建答案使我考虑了另一种方法。谢谢大卫!

解决方案

有多种方法,最明显的两种是:

  • 构建像YUI这样的工具,该工具将根据我们所需要的组件构建定制的唯一版本,以便我们仍可以将文件作为静态文件使用。当我们下载MooTools和jQuery UI的软件包时,它们都提供了这样的软件包生成器,从而为我们提供最简化和最有效的库。我确定那里有通用的通用工具。
  • 创建一个简单的Perl / PHP / Python / Ruby脚本,该脚本根据请求提供一堆JavaScript文件。因此," onerequest.js?load = ui&load = effects"将转到一个PHP脚本,该脚本加载文件并以正确的内容类型为其提供服务。有很多这样的例子,但是我个人不是粉丝。

我不想通过任何脚本来提供静态文件,但是我也喜欢用10个左右的小类文件开发代码,而无需10个HTTP请求。因此,我想出了一个自定义构建过程,该过程将所有最常见的类和函数结合在一起,然后将它们最小化为一个文件(例如project.min.js),并且在我所有的视图/模板中都有一个条件,其中包括正在生产的该文件。

编辑"自定义构建过程"实际上是一个非常简单的perl脚本。它会读取我作为参数传递的每个文件,并将它们写入新文件,并有选择地自动将整个内容传递给JSMIN(所有我们喜欢的语言都可用)。

像这样的命令看起来像:

perl build-project-master.pl core.js class1.js etc.js /path/to/live/js/file.js

在此http://www.hunlock.com/blogs/Supercharged_Javascript上有一篇不错的博客文章。

我们想要的是缩小。我只是写了一个如何设置它的演练。