La minificación (también minimización o minimización ) es el proceso de eliminar todos los caracteres innecesarios del código fuente de lenguajes de programación interpretados o lenguajes de marcado sin cambiar su funcionalidad. Estos caracteres innecesarios por lo general incluyen caracteres en blanco el espacio , caracteres de nueva línea , comentarios , ya veces los delimitadores de bloque, que se utilizan para agregar legibilidad al código, pero no son necesarios para que se ejecute. 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, apuntar a un código fuente extremadamente reducido es el propósito de las competiciones de golf de código recreativo .
La minificación se puede distinguir del concepto más general de compresión de datos en que la fuente minificada se puede interpretar inmediatamente sin la necesidad de un paso de descompresión: el mismo intérprete puede trabajar tanto con la fuente original como con la fuente minificada.
Los objetivos de la minificación no son los mismos que los de la ofuscación ; el primero a menudo está destinado a revertirse utilizando una bonita impresora [ cita requerida ] o unminificador. Sin embargo, para lograr sus objetivos, la minificación a veces utiliza técnicas también utilizadas por ofuscación ; por ejemplo, acortando los nombres de las variables y refactorizando el código fuente . Cuando la minificación usa tales técnicas, la impresora bonita o el unminificador solo pueden revertir completamente el proceso de minificación si se le proporcionan detalles de las transformaciones realizadas por tales técnicas. Si no se proporcionan esos detalles, el código fuente invertido contendrá diferentes nombres de variables y flujo de control, 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 = []; para ( var i = 0 ; i < 20 ; i ++ ) { matriz [ 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] Fue seguido por 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 fuentes 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 del mapa fuente. [4] A partir de 2017, Alex Lam se hizo cargo del mantenimiento y desarrollo de UglifyJS2, reemplazándolo con UglifyJS3, que unificó la CLI con la API. [5]
Mapeo de fuente
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 diferente al que realmente ejecuta la computadora. Por ejemplo, para ayudar en la depuración del código minificado, "mapeando" este código al código fuente original no minificado .
El formato original fue creado por Joseph Schorr como parte del proyecto de minificación Closure Inspector. [6] Las versiones 2 y 3 del formato redujeron considerablemente el tamaño de los archivos de mapas. [6]
Tipos
Herramientas
Visual Studio Code viene con soporte de minificación para varios idiomas. Puede navegar fácilmente por Visual Studio Marketplace para descargar e instalar minificadores adicionales.
Los optimizadores de JavaScript que pueden minificar y generar mapas de origen incluyen UglifyJS y Google Closure Compiler . Además, ciertas herramientas en línea, tales como Microsoft Ajax Minifier, [7] el Yahoo! YUI Compressor o Pretty Diff , [8] pueden comprimir archivos CSS . [ cita requerida ] Para la minificación del código HTML existen las siguientes herramientas: HtmlCompressor, [9] HTMLMinifier [10] y WebMarkupMin. [11] Hay un script de Power-Shell llamado "minifyPS" [12] que puede reducir el código del script de PowerShell así como el código JavaScript.
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 la página al reducir el tamaño de varios archivos.
Los recursos de JavaScript y de hojas de estilo en cascada (CSS) pueden minimizarse, conservando su comportamiento y reduciendo considerablemente el tamaño del archivo. Las bibliotecas disponibles en línea son capaces de minificación y optimización en diversos grados. Algunas bibliotecas también combinan varios archivos de secuencia de comandos en un solo archivo para su descarga por parte del cliente. 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. [13]
Referencias
- ^ Crockford, Douglas (11 de septiembre de 2001). "JSMin: el minificador de JavaScript" . Crockford.com . Autoeditado . Archivado desde el original el 5 de abril de 2002.
- ^ a b "Minificación de código" . webplatform.github.io . El proyecto WebPlatform. Archivado desde el original el 24 de abril de 2016.
- ^ Paul, Ryan (6 de noviembre de 2009). "Google abre su caja de herramientas de desarrollo de JavaScript a todos" . Ars Technica . Condé Nast .
- ^ Bazon, Mihai (8 de noviembre de 2012). "¿Deberías cambiarte a UglifyJS2?" . lisperator.net . Autoeditado .
- ^ "uglify-js NPM" . npmjs.com .
- ^ a b "Propuesta de revisión 3 del mapa fuente" . 11 de enero de 2011. Archivado desde el original el 26 de noviembre de 2014 . Consultado el 16 de abril de 2016 .
- ^ Minificador de Microsoft Ajax . Ajaxmin.codeplex.com (13 de septiembre de 2012).
- ^ Pretty Diff . Pretty Diff.
- ^ HtmlCompressor . code.google.com/archive/p/htmlcompressor (11 de febrero de 2017).
- ^ HTMLMinifier . github.com/kangax/html-minifier (11 de febrero de 2017).
- ^ WebMarkupMin . github.com/Taritsyn/WebMarkupMin (11 de febrero de 2017).
- ^ minifyPS . Minifyps.codeplex.com (22 de febrero de 2012).
- ^ http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/