Advertisement
  1. Web Design
  2. JavaScript
Webdesign

Cómo externalizar y minificar JavaScript 

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Claudia Márquez (you can also view the original English article)

Uno de los métodos más valiosos para optimizar su código JavaScript puede sorprenderlo, eliminándolo por completo de sus archivos HTML. En este video de mi curso The Designer's Guide to JavaScript Optimization, aprenderá cómo externalizar y minificar JavaScript. 

Cómo externalizar y minificar JavaScript  

Cómo externalizar el código de JavaScript 

Una excelente forma de aumentar la eficiencia de nuestro código es externalizando y minimizando nuestro código. 

Cuando hablamos de externalizar nuestro código, de lo que estoy hablando es de sacar todo nuestro JavaScript de nuestras páginas HTML y poner ese JavaScript en un archivo JavaScript separado, un archivo .js.

Es muy fácil de hacer. Simplemente tomará todo dentro de las etiquetas de script, lo eliminará y luego creará un nuevo archivo de texto con la extensión .js. Entonces, simplemente usaría una etiqueta de script para apuntar a ese archivo. 

Así que aquí hay un ejemplo. Tengo un archivo index.html con código JavaScript dentro. Así que simplemente destaco todo dentro de las etiquetas del script y lo corto.

highlight everything inside the script tags and cut it

Y luego podemos deshacernos de las etiquetas de guiones por completo resaltándolos y eliminándolos.

get rid of the script tags

Y luego voy a crear un nuevo archivo JavaScript dentro de mi carpeta JavaScript y solo llamarlo site.js. 

No importa qué editor de texto estés usando. Estoy usando el código de Visual Studio aquí, pero también podría usar corchetes o cualquier otro editor de texto sin formato. Pero lo estoy guardando como site.js, y simplemente pegaré todo ese código JavaScript en él.

Sitejs file

Ahora no va a funcionar aún porque todavía no estamos apuntando a este JavaScript en nuestro archivo HTML. 

Pero podemos volver a nuestro index.html. Y luego, después de haber cargado todas nuestras dependencias, crearemos nuestra propia etiqueta de script para cargar el archivo que acabamos de crear.

Así que está en su carpeta JavaScript js/ y luego lo llamé site.js, entonces el código es: 

Script code in indexhtml

Eso es todo lo que se necesita para externalizar tu JavaScript. 

Cómo minificar el código de JavaScript 

Uno de los grandes beneficios de tener su JavaScript en un archivo separado es que puede minimizar o minimizar fácilmente ese código JavaScript. Y cuando tienes una versión miniaturizada de tu código, esa versión minificada se ejecutará mucho más rápido, porque tendrá un tamaño de archivo más pequeño.

Va a ser difícil leer o editar ese archivo modificado. Es por eso que guarda la copia original de su JavaScript para que, si necesita realizar cambios, realice cambios en ese archivo JavaScript original y luego lo vuelva a minimizar. 

Ahora, ¿cómo minizas? Hay varias opciones. 

Plugins de código de Visual Studio

La mayoría de los editores de código modernos tienen complementos que minimizarán su JavaScript para usted. Por ejemplo, estoy usando Visual Studio Code. Si vamos a nuestras extensiones y hacemos una búsqueda de "minify", puede ver varias opciones para minificar su código. 

Visual Studio Code minifying extensions

Brackets Plugins 

Otro editor de texto en línea gratuito llamado Brackets también tiene extensiones que puede usar para minificar el código. Entonces, si accedes al gestor de extensiones para corchetes y haces una búsqueda para "minimizar", verás un minificador de JavaScript. 

Brackets extensions for minifying code

Tenga en cuenta que, después de minificar su código, debe cambiar el archivo que está señalando en el archivo HTML. Entonces, si minimizaste site.js, entonces tendrías una nueva versión probablemente llamada site.min.js.  Y así en su HTML, querría apuntar a esa versión minimizada en lugar de la versión original de su código. De lo contrario, toda esa minificación no tiene sentido 

JSCompress

Si por alguna razón simplemente le gusta usar el bloc de notas para hacer toda la edición de su código, aún puede minimizar, y una forma de hacerlo es yendo a un sitio web como JSCompress. 

Básicamente, esto solo le permite pegar su código y luego hacer clic en el botón Comprimir JavaScript, y verá que esto comprimió nuestro código en un 74%.

JS code compressed on JSCompress website

Aquí solo se trata de una pequeña porción de JavaScript, por lo que puede imaginarse que si tuviera mucho JavaScript en su página, esto realmente le ahorraría mucho tamaño de archivo. Y cuando tienes un sitio web con mucho tráfico, eso realmente ayudará mucho.

Beneficios de externalizar y minificar JavaScript 

Una ventaja de externalizar y minificar su JavaScript es que le permite manejar el almacenamiento en caché un poco mejor. 

Digamos, por ejemplo, que tiene un fragmento de código JavaScript que va a utilizar en varias páginas diferentes de su sitio web. Tendría sentido poner ese pequeño fragmento de código JavaScript en su propio archivo JavaScript, de modo que una vez que el usuario lo visite una vez, ya esté almacenado en la memoria caché de su navegador.  Luego, cuando visitan otra página que apunta al mismo archivo JavaScript, no tiene que volver a cargar ese JavaScript. Eso reducirá la cantidad de solicitudes que se realizan para esa pieza de JavaScript en particular. 

Si desea llevar esto al siguiente nivel, puede usar una Red de entrega de contenido (CDN) para almacenar versiones de sus archivos JavaScript en ubicaciones geográficamente diversas. Por lo tanto, puede tener su JavaScript almacenado en servidores de todo el mundo.

El beneficio de esto es que si ha creado su sitio web en Texas y alguien en el Reino Unido quiere acceder a su sitio web, entonces sin un CDN, ese usuario tendría que conectarse a su servidor para obtener todos los archivos que necesita. 

Pero si su JavaScript está en un CDN, entonces es probable que haya una versión de ese archivo JavaScript en un servidor, ya sea en el Reino Unido o en algún lugar de Europa. Por lo tanto, estaría mucho más cerca de la ubicación de ese usuario, lo que significa que se descargaría más rápido y funcionaría sin problemas. 

Tenga en cuenta que una CDN cuesta dinero, por lo que es realmente solo algo que desea seguir si está listo para el siguiente nivel. Pero realmente puede ayudar a acelerar su sitio web. 

Ver el curso completo

En el curso completo, The Designer's Guide to JavaScript Optimization, aprenderá más técnicas de optimización que son perfectas para los diseñadores web. Le mostraré algunas técnicas fáciles de implementar para hacer que su JavaScript, y por lo tanto sus sitios web, se ejecuten sin problemas. 

Puede tomar este curso de inmediato con una suscripción a Envato Elements. Por una sola tarifa mensual baja, tiene acceso no solo a este curso, sino también a nuestra creciente biblioteca de más de 1.000 cursos de video y libros electrónicos líderes en la industria en Envato Tuts+. 

Además, ahora obtienes descargas ilimitadas de la enorme biblioteca Envato Elements de más de 460,000 elementos creativos. Cree con fuentes únicas, fotos, gráficos y plantillas, y entregue mejores proyectos más rápido. 

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.