{"id":51723,"date":"2022-05-09T09:26:11","date_gmt":"2022-05-09T07:26:11","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=51723&preview=true&preview_id=51723"},"modified":"2025-01-20T13:26:42","modified_gmt":"2025-01-20T12:26:42","slug":"minificar-javascript","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/minificar-javascript\/","title":{"rendered":"\u00bfC\u00f3mo minificar JavaScript? – Herramientas y m\u00e9todos recomendados"},"content":{"rendered":"

La mayor\u00eda de los usuarios desean una experiencia de navegaci\u00f3n web elegante, y JavaScript ha sido durante mucho tiempo el favorito de los desarrolladores para ofrecer esta experiencia elevada.<\/p>\n

Sin embargo, JavaScript no s\u00f3lo est\u00e1 ah\u00ed para hacer que los sitios sean m\u00e1s bonitos. Tambi\u00e9n influye directamente en el rendimiento y el \u00e9xito del sitio web. Acelerar un sitio web<\/a> o reducir el tiempo de carga de la p\u00e1gina -dos conceptos que son fundamentales para el desarrollo de JavaScript- son factores cruciales para mejorar la experiencia del usuario.<\/p>\n

Mira Nuestro Videotutorial sobre la Minificaci\u00f3n de JavaScript<\/a><\/h3>\n<\/kinsta-video>\n

Si quieres mejorar el rendimiento de tu sitio web en el menor tiempo posible, debes familiarizarte con la minificaci\u00f3n de JavaScript. Te ayudar\u00e1 a excluir todos los caracteres innecesarios de tu c\u00f3digo fuente JavaScript sin alterar su funcionalidad. Adem\u00e1s, reducir\u00e1 el tiempo de carga de tu sitio web y el uso del ancho de banda.<\/p>\n

La minificaci\u00f3n de JavaScript puede ser complicada. En este art\u00edculo, trazaremos una ruta para ayudarte a minificar tu c\u00f3digo JavaScript para sitios web de WordPress y de otros fabricantes.<\/p>\n

<\/div><\/kinsta-auto-toc>\n\n

\u00bfQu\u00e9 es JavaScript?<\/h2>\n
\"JavaScript\"<\/a>
JavaScript (Fuente de la imagen: Medium<\/a>)<\/figcaption><\/figure>\n

JavaScript<\/a> es un lenguaje de programaci\u00f3n orientado al texto para crear sitios web interactivos tanto en el lado del cliente como del servidor. Es un lenguaje m\u00e1s sencillo y menos complejo de aprender que la mayor\u00eda, lo que explica su amplio uso.<\/p>\n

Mientras que HTML<\/a> y CSS<\/a> construyen la estructura de un sitio web, JavaScript a\u00f1ade funciones complejas que aportan interactividad a tu sitio web para atraer a los usuarios. Por ejemplo, JavaScript ofrece elementos complejos como un video jukebox con desplazamiento, v\u00eddeos 2D\/3D y mapas interactivos.<\/p>\n

En particular, los navegadores web pueden entender JavaScript. Por lo tanto, junto con HTML y CSS, es una opci\u00f3n competente para elegir si est\u00e1s interesado en el desarrollo web. Si necesitas crear un sitio web altamente interactivo que funcione en todos los navegadores sin ninguna obstrucci\u00f3n, entonces JavaScript es la opci\u00f3n m\u00e1s fiable que puedes emplear.<\/p>\n

\u00bfQu\u00e9 es la minificaci\u00f3n de c\u00f3digo?<\/h2>\n

La minificaci\u00f3n tambi\u00e9n se conoce como minimizaci\u00f3n. La minificaci\u00f3n de c\u00f3digo significa optimizar el c\u00f3digo para ahorrar espacio, reducir los tiempos de carga de la p\u00e1gina y disminuir el uso del ancho de banda del sitio web<\/a>. Sin embargo, la mayor preocupaci\u00f3n es minimizar el c\u00f3digo sin alterar la funcionalidad.<\/p>\n

La minificaci\u00f3n del c\u00f3digo es posible en todas las tecnolog\u00edas de programaci\u00f3n principales, incluyendo HTML<\/a>, CSS<\/a> y -como vamos a ver- JavaScript. Sin embargo, el proceso no es instant\u00e1neo. Hay que trabajar un poco para hacer el c\u00f3digo m\u00e1s compacto sin que deje de ser funcional.<\/p>\n

Para minificar el c\u00f3digo JavaScript, debes analizarlo, comprimirlo y obtener el resultado. Una vez minificado, deber\u00eda ser casi ilegible a simple vista. Has eliminado todos los espacios en blanco innecesarios, los comentarios, los caracteres de nueva l\u00ednea y todo lo que inicialmente hac\u00eda legible el c\u00f3digo.<\/p>\n

Es posible que tengas que hacer algunos cambios m\u00e1s en el c\u00f3digo, por ejemplo, alinear funciones, eliminar delimitadores de bloque, utilizar condicionales impl\u00edcitos o reescribir variables locales.<\/p>\n

Ejemplos de c\u00f3digo JavaScript sin minificar y minificado<\/h3>\n

Veamos un ejemplo de c\u00f3digo. Este primer bloque es JavaScript normal, sin minificar:<\/p>\n

\/\/ program to check if the string is palindrome or not\n\nfunction checkPalindrome(str) {\n\n    \/\/ find the length of a string\n    const len = string.length;\n\n    \/\/ loop through half of the string\n    for (let i = 0; i < len \/ 2; i++) {\n\n        \/\/ check if first and last string are same\n        if (string[i] !== string[len - 1 - i]) {\n            return 'It is not a palindrome';\n        }\n    }\n    return 'It is a palindrome';\n}\n\n\/\/ take input\nconst string = prompt('Enter a string: ');\n\n\/\/ call the function\nconst value = checkPalindrome(string);\n\nconsole.log(value);<\/code><\/pre>\n
Ahora, veamos el aspecto de ese mismo c\u00f3digo una vez minificado:<\/p>\n
function checkPalindrome(n){const t=string.length;for(let n=0;n<t\/2;n++)\nif(string[n]!==string[t-1-n])return\"It is not a palindrome\";return\"It is a palindrome\"}\nconst string=prompt(\"Enter a string: \"), value=checkPalindrome(string);console.log(value);<\/code><\/pre>\n
Como puedes ver, el segundo bloque de c\u00f3digo es mucho m\u00e1s peque\u00f1o y compacto. Eso significa que se cargar\u00e1 y renderizar\u00e1 m\u00e1s r\u00e1pidamente, reduciendo el tiempo de carga de la p\u00e1gina y acelerando el contenido.<\/p>\n
Aqu\u00ed hemos reducido 529 bytes a 324 bytes, ganando 205 bytes de espacio libre y reduciendo la carga de la p\u00e1gina en casi un 40%.<\/p>\n
Es como coger un libro de 529 p\u00e1ginas y condensarlo en uno de 324. Por supuesto, a un humano le costar\u00eda leerlo, pero una m\u00e1quina lo leer\u00eda sin problemas.<\/p>\n
Al conectar varios archivos JavaScript en un archivo individual minificado, la minificaci\u00f3n del c\u00f3digo disminuye el n\u00famero de peticiones HTTP al servidor. Esto tambi\u00e9n reduce el consumo de ancho de banda del sitio. Adem\u00e1s, la minificaci\u00f3n del c\u00f3digo disminuye el tiempo de ejecuci\u00f3n de un script, lo que reduce el Tiempo al Primer Byte (TTFB)<\/a>.<\/p>\n
\u00bfPor qu\u00e9 deber\u00edas minificar el c\u00f3digo JavaScript?<\/h2>\n
Al escribir el c\u00f3digo inicial, la mayor\u00eda de los desarrolladores se centran principalmente en hacer las cosas. En ese camino, tienden a utilizar muchos comentarios, espacios y variables para que el c\u00f3digo sea m\u00e1s legible para otros que trabajen con \u00e9l en el futuro.<\/p>\n
A pesar de ser un excelente lenguaje de programaci\u00f3n, JavaScript afecta a las p\u00e1ginas web ralentiz\u00e1ndolas. Para recuperar espacio y mejorar la velocidad de carga de tu p\u00e1gina, debes minificar el c\u00f3digo JavaScript.<\/p>\n
La versi\u00f3n minificada del c\u00f3digo JavaScript puede reducir el tama\u00f1o del archivo hasta en un 30-90%. En consecuencia, la minificaci\u00f3n de JavaScript se ha convertido en un ritual familiar para todos los desarrolladores.<\/p>\n
Cada uno de los principales desarrolladores de bibliotecas JavaScript<\/a> (Angular, Bootstrap, etc.) proporciona una versi\u00f3n minificada de JavaScript para su despliegue en producci\u00f3n. Y cada uno utiliza una extensi\u00f3n min.js<\/strong> para indicarlo.<\/p>\n
Ventajas de minificar el c\u00f3digo JavaScript<\/h3>\n
He aqu\u00ed un breve resumen de los beneficios que conseguir\u00e1s tras emplear la minificaci\u00f3n de JavaScript:<\/p>\n