Question

我希望将我的所有JS文件连接到浏览器进入我的网站后reduce the number of HTTP requests。当然，在开发期间保持这些文件是分开的仍然是有价值的。广泛接受的解决方案是将连接作为构建的一部分来执行。

连接部分非常简单..但是所有仍然有一堆<script src="*.js">标签的HTML文件引用了预连接的js文件呢？他们现在需要指向单个连接的javascript文件。

如何将这些引用替换为构建的一部分？

Answer 1

可以从此示例派生基于Ant的解决方案。我将插入标准免责声明“用正则表达式解析HTML”可能不是一个好主意。

这个想法是：

删除或转换为评论所有<script>代码。
插入一个引用您的合并Javascript的<script>标记。

我在</body>结束标记之前插入了单个js，但您可以根据需要进行调整。这里的源文件位于一个名为'dirty'的目录下;调整后的文件名为'clean'。

<property name="single.js" value="single.js" />
<copy todir="clean" overwrite="true">
    <fileset dir="dirty" />
    <filterchain>
        <tokenfilter>
            <replaceregex
             pattern="(&lt;)(\s*SCRIPT\s+SRC=['&quot;][^'&quot;]+['&quot;]\s*)/(&gt;)"
             replace="\1!--\2--\3"
             flags="gi"/>
            <replaceregex
             pattern="(&lt;/BODY&gt;)"
             replace="&lt;SCRIPT SRC=&quot;${single.js}&quot; /&gt;${line.separator}\1"
             flags="i"/>
        </tokenfilter>
    </filterchain>
</copy>

Answer 2

这样做的一种方法是让html只加载一个脚本，但在开发中，脚本只是各种各样的“包装”，强制使用listed here技术加载其他单个脚本。在生产中，该脚本的内容将替换为所有脚本的并集（最好通过某些服务器端串联）。

Answer 3

根据您使用的技术，您可以在html中使用一个JS引用，将一个目录中的所有JS文件连接成一个JS文件的处理程序。然后，您可以在开发期间轻松管理单个文件，并在运行时使用一个HTTP请求。有插件可以压缩JS，删除空格并缓存结果，但同样取决于你的技术。

Answer 4

有一个名为wro4j的库，它可以用作构建时解决方案（maven插件）或运行时解决方案（过滤器），并帮助您将所有描述的资源保存在一个位置为：

<groups xmlns="http://www.isdc.ro/wro">
  <group name="all">
    <css>/asset/*.css</css>
    <js>/asset/*.js</js>
  </group>
</groups>

这样，您可以从以下位置切换html中的所有资源引用：

<script src="script1.js">
<script src="script2.js">
<script src="script3.js">
...
<script src="script99.js">

到

<script src="all.js">

免责声明：这是一个有偏见的答案，因为我正在研究这个项目。

Answer 5

有一个名为minify的Google项目：http://code.google.com/p/minify/可能正是您正在寻找的。

Answer 6

您可以使用apache插件modconcat。它有助于像这样轻松地连接文件。

自：

<head>
    <link rel="stylesheet" href="/css/reset.css" type="text/css" media="screen" />

    <link rel="stylesheet" href="/css/master.css" type="text/css" media="screen" />

    <link rel="stylesheet" href="/css/forms.css" type="text/css" media="screen" />
</head>

要：

<head>
    <link rel="stylesheet" href="/css/reset.css,master.css,forms.css" type="text/css" media="screen" />
</head>

将JS和CSS文件组合为构建的一部分

6 个答案: