Quiero concatenar todos mis archivos JS para reducir la cantidad de solicitudes HTTP crea un navegador cuando va a mi sitio web. Por supuesto, todavía hay valor en mantener estos archivos separados durante el desarrollo. La solución ampliamente aceptada es realizar la concatenación como parte de la compilación.

La parte de concatenación es bastante sencilla ... pero ¿qué pasa con todos los archivos HTML que todavía tienen un montón de etiquetas <script src="*.js"> que hacen referencia a los archivos js preconcatenados? Ahora deben apuntar al único archivo JavaScript concatenado.

¿Cómo puedo cambiar esas referencias como parte de la compilación?

5
pepsi 16 sep. 2011 a las 00:50

6 respuestas

La mejor respuesta

Una solución basada en Ant podría derivarse de este ejemplo. Insertaré el descargo de responsabilidad estándar de que 'analizar' HTML con expresiones regulares puede no ser una buena idea.

La idea es:

  • Elimine o convierta a comentarios todas las etiquetas <script>.
  • Inserte una sola etiqueta <script> que haga referencia a su Javascript amalgamado.

He insertado el js único aquí justo antes de la etiqueta de cierre </body>, pero puede ajustarlo según sea necesario. Los archivos de origen aquí están en un directorio llamado 'sucio'; los archivos ajustados en uno llamado 'limpio'.

<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>
4
martin clayton 16 sep. 2011 a las 06:15

Dependiendo de la tecnología que esté utilizando, podría tener una referencia JS en su html, a un controlador que concatena todos los archivos JS en un directorio en un archivo JS. Luego, puede administrar fácilmente los archivos individuales durante el desarrollo con el beneficio de una solicitud HTTP en tiempo de ejecución. Hay complementos que comprimirán el JS, eliminarán espacios en blanco y guardarán en caché los resultados, pero nuevamente, depende de su tecnología.

1
Chris Pont 15 sep. 2011 a las 20:56

Una manera de hacer esto es hacer que el html cargue solo un script, pero en el desarrollo ese script es solo una especie de "envoltorio" que obliga a cargar los otros scripts individuales utilizando la técnica enumerado aquí. En producción, el contenido de ese script se reemplaza con la unión de todos los scripts (preferiblemente por alguna concatenación del lado del servidor).

1
Jonathan M 15 sep. 2011 a las 20:56

Puede usar modconcat, que es el complemento de Apache. Ayuda a concatenar archivos fácilmente así.

De:

<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>

Para:

<head>
    <link rel="stylesheet" href="/css/reset.css,master.css,forms.css" type="text/css" media="screen" />
</head>
0
Sanghyun Lee 16 sep. 2011 a las 02:10

Hay un proyecto de Google llamado minify: http://code.google.com/p/minify/ que probablemente sea exactamente lo que estás buscando.

0
endyourif 15 sep. 2011 a las 20:54

Hay una biblioteca llamada wro4j que se puede usar como una solución de tiempo de compilación (complemento maven) o una ejecución en tiempo real (filtro) y le ayuda a mantener todos sus recursos descritos en una única ubicación tan simple como:

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

De esta manera, puede cambiar todas las referencias de recursos en html desde:

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

Para

<script src="all.js">

Descargo de responsabilidad: esta es una respuesta parcial, ya que estoy trabajando en este proyecto.

1
Alex Objelean 16 sep. 2011 a las 07:43