stringtranslate.com

Minificación (programación)

Minificación (también minimización o minimización ) es el proceso de eliminar todos los caracteres innecesarios del código fuente de los lenguajes de programación interpretados o lenguajes de marcado sin cambiar su funcionalidad. Estos caracteres innecesarios suelen incluir caracteres de espacio en blanco , caracteres de nueva línea , comentarios y, a veces, delimitadores de bloque , que se utilizan para agregar legibilidad al código pero que no son necesarios para su ejecución. La minificación reduce el tamaño del código fuente, lo que hace que su transmisión a través de una red (por ejemplo, Internet) sea más eficiente. En la cultura de los programadores, el objetivo de las competiciones de golf de código recreativo es apuntar a un código fuente extremadamente minimizado .

La minimización se puede distinguir del concepto más general de compresión de datos en que la fuente minimizada se puede interpretar inmediatamente sin necesidad de un paso de descompresión: el mismo intérprete puede trabajar tanto con la fuente original como con la minimizada.

Los objetivos de la minimización no son los mismos que los de la ofuscación ; a menudo se pretende revertir la primera utilizando un programa de impresión bonita [ cita requerida ] o un desminificador. Sin embargo, para lograr sus objetivos, la minimización a veces utiliza técnicas que también utiliza la ofuscación ; por ejemplo, acortar los nombres de las variables y refactorizar el código fuente . Cuando la minimización utiliza dichas técnicas, el programa de impresión bonita o el desminificador solo pueden revertir completamente el proceso de minimización si se le proporcionan detalles de las transformaciones realizadas por dichas técnicas. Si no se proporcionan esos detalles, el código fuente invertido contendrá nombres de variables y flujo de control diferentes, aunque tendrá la misma funcionalidad que el código fuente original .

Ejemplo

Por ejemplo, el código JavaScript

// Este es un comentario que será eliminado por el minificador var array = []; for ( var i = 0 ; i < 20 ; i ++ ) { array [ i ] = i ; }               

es equivalente a pero más largo que

para ( var a = [], i = 0 ; i < 20 ; a [ i ] = i ++ ); 

Historia

En 2001, Douglas Crockford introdujo JSMin , [1] que eliminó los comentarios y los espacios en blanco del código JavaScript. [2] Le siguió YUI Compressor en 2007. [2] En 2009, Google abrió su kit de herramientas Closure, incluido Closure Compiler , que contenía una función de mapeo de origen junto con una extensión de Firefox llamada Closure Inspector. [3] En 2010, Mihai Bazon introdujo UglifyJS , que fue reemplazado por UglifyJS2 en 2012; la reescritura fue para permitir el soporte de mapas de origen. [4] A partir de 2017, Alex Lam se hizo cargo del mantenimiento y desarrollo de UglifyJS2, reemplazándolo por UglifyJS3, que unificó la CLI con la API. [5] En 2018, Terser se bifurcó de uglify-es [6] [7] y ha ganado impulso desde entonces; en 2020 superó a UglifyJS cuando se midió en descargas diarias. [8]

Mapeo de fuentes

Un mapa de origen es un formato de archivo que permite que las herramientas de software para JavaScript muestren a un usuario un código distinto del código que realmente ejecuta la computadora. Por ejemplo, para ayudar a depurar el código minimizado, "mapear" este código con el código fuente original sin minimizar .

El formato original fue creado por Joseph Schorr como parte del proyecto de minimización Closure Inspector. [9] Las versiones 2 y 3 del formato redujeron considerablemente el tamaño de los archivos de mapas. [9]

Tipos

Herramientas

Visual Studio Code incluye compatibilidad con minificadores para varios lenguajes. Puede explorar fácilmente Visual Studio Marketplace para descargar e instalar minificadores adicionales.

Los optimizadores de JavaScript pueden minimizar y generar mapas de código fuente. Además, ciertas herramientas en línea pueden comprimir archivos CSS . [10]

Desarrollo web

Se han desarrollado componentes y bibliotecas para aplicaciones web y sitios web para optimizar las solicitudes de archivos y reducir los tiempos de carga de las páginas al reducir el tamaño de varios archivos.

Los recursos de JavaScript y de hojas de estilo en cascada (CSS) se pueden minimizar, conservando su comportamiento y reduciendo considerablemente el tamaño de archivo. Las bibliotecas disponibles en línea son capaces de minimizar y optimizar en distintos grados. Algunas bibliotecas también fusionan varios archivos de script en un solo archivo para que el cliente los descargue. Los mapas de código fuente de JavaScript pueden hacer que el código sea legible y depurable incluso después de que se haya combinado y minimizado. [11]

Referencias

  1. ^ Crockford, Douglas (11 de septiembre de 2001). "JSMin: The JavaScript Minifier". Crockford.com . Autopublicado . Archivado desde el original el 5 de abril de 2002.
  2. ^ ab "Reducción de código". webplatform.github.io . El proyecto WebPlatform. Archivado desde el original el 24 de abril de 2016.
  3. ^ Paul, Ryan (6 de noviembre de 2009). "Google abre su caja de herramientas de desarrollo de JavaScript a todos". Ars Technica .
  4. ^ Bazon, Mihai (8 de noviembre de 2012). "¿Deberías cambiar a UglifyJS2?". lisperator.net . Autopublicado .
  5. ^ "uglify-js NPM". npmjs.com . 6 de mayo de 2017.
  6. ^ "terser · Kit de herramientas de compresión y descompresión de JavaScript para ES6+". terser.org . Consultado el 29 de enero de 2023 .
  7. ^ https://github.com//terser/commit/3ef6879ecafd12b57e575ec85e6104e71d5a1b6f [ URL vacía ] [ enlace roto ]
  8. ^ "Terser vs uglify-js". Tendencias de NPM . Archivado desde el original el 27 de enero de 2024.
  9. ^ ab "Propuesta de revisión 3 del mapa fuente". 11 de enero de 2011. Archivado desde el original el 8 de marzo de 2016 . Consultado el 16 de abril de 2016 .
  10. ^ Megida, Dillion (18 de mayo de 2022). «Minificar CSS: explicación de la compresión y minificación de CSS». Free Code Camp . Consultado el 29 de marzo de 2024 .
  11. ^ Seddon, Ryan (21 de marzo de 2012). "Introducción a los mapas de código fuente de JavaScript". HTML5 Rocks . Archivado desde el original el 28 de diciembre de 2021.