Minificador de código
Minifica JS, CSS, HTML, TypeScript, XML, JSON y SQL
Acerca de Minificador de código
«Minificador de código» reduce siete tipos de código en tu navegador, que eliges con los botones JS, TS, CSS, HTML, XML, JSON y SQL. El JavaScript pasa por Terser, que renombra las variables locales y elimina el código muerto; al TypeScript, Sucrase le quita primero los tipos y luego se minifica igual, así que el resultado es JavaScript. El CSS pasa por CSSO, que fusiona las reglas idénticas y acorta los valores. El HTML pierde sus comentarios, cada serie de espacios en blanco se convierte en un solo espacio, y el contenido de <pre>, <textarea>, <script> y <style> se queda tal como está escrito. El XML pierde sus comentarios y los espacios entre etiquetas; el JSON pierde sus espacios, sus comentarios y sus comas finales; el SQL pierde sus comentarios y los espacios de más, sin tocar sus cadenas. Un CSS o un HTML con errores no se señala.
Ejemplo
Modo HTML: el comentario desaparece, los espacios se reducen a uno y <pre> conserva sus espacios.
Entrada
<ul> <!-- main menu --> <li><a href="/">Home</a></li> <li> About us </li> </ul> <pre> keep this</pre>
Salida
<ul> <li><a href="/">Home</a></li> <li> About us </li> </ul> <pre> keep this</pre>
Cómo minificar JavaScript, CSS o HTML
- 1Haz clic en «JS», «TS», «CSS», «HTML», «XML», «JSON» o «SQL» para elegir el lenguaje.
- 2Pega el código en «Entrada», o haz clic en «Abrir un archivo» para cargar un archivo .js, .ts, .css, .html, .xml, .json o .sql (también .mjs, .cjs, .mts, .cts, .htm, .svg, .xsl, .xsd, .jsonc o .geojson); su extensión elige el lenguaje.
- 3Haz clic en «Minificar»; el resultado aparece en «Salida» y la línea de debajo indica los caracteres ahorrados.
- 4Haz clic en «Copiar», o en «Descargar» para guardar minified.js, minified.ts, minified.css, minified.html, minified.xml, minified.json o minified.sql, según el modo.
Formatos y límites
- Lenguajes de entrada
- JavaScript, TypeScript sin JSX, CSS, HTML, XML, JSON (se aceptan comentarios y comas finales), SQL
- Motores
- Terser (JavaScript y TypeScript), Sucrase (tipos de TypeScript), CSSO (CSS), los minificadores propios del sitio (HTML, XML, JSON, SQL)
- Errores
- Los errores de sintaxis de JavaScript, TypeScript y JSON se muestran como «Error:» seguido del mensaje del motor; el TSX y los espacios de nombres que contienen código se rechazan con un mensaje que explica el motivo; el XML y el SQL se rechazan, con la línea, cuando una etiqueta, un comentario, una cadena o un nombre entre comillas queda sin cerrar, o cuando una etiqueta de cierre no coincide; el CSS y el HTML nunca se rechazan
- Nombre del archivo
- minified seguido del modo: .js, .css, .html, .xml, .json o .sql; en el modo TS el archivo se llama .ts aunque contiene JavaScript
Dónde se procesa tu código
Los siete minificadores funcionan en tu dispositivo; Terser, Sucrase o CSSO se descarga la primera vez que se usa su modo, y el código que pegas no se sube. Si se muestra un error, su mensaje, sin los pasajes entre comillas, los números largos ni las direcciones, se envía a nuestro registro de errores junto con el nombre de la herramienta y el nombre y la versión de tu navegador.
Preguntas frecuentes
¿El JavaScript minificado se comporta igual?
Sí. Terser analiza el código antes de comprimirlo, así que el código sin punto y coma, un return seguido de un salto de línea y expresiones como a - -b conservan su significado. El código que no se puede analizar da un error en lugar de un archivo roto.
¿El modo TS admite TSX o espacios de nombres?
No del todo. Un espacio de nombres que solo contiene tipos se elimina, como hace tsc; uno que contiene código se rechaza con un mensaje que indica su nombre y su línea, porque quitar los tipos no puede convertirlo en JavaScript: saca antes ese código del espacio de nombres. El TSX se rechaza con un mensaje que dice que Terser no puede leer JSX: compílalo antes con tu propia herramienta de compilación.
¿El modo HTML elimina todos los espacios entre etiquetas?
No. Un espacio entre elementos en línea puede verse: dos palabras en negrita separadas solo por un salto de línea quedarían pegadas sin él. Por eso cada serie de espacios y saltos de línea se convierte en un solo espacio en lugar de desaparecer.
¿El modo CSS revisa mi CSS?
No. CSSO repara u omite sin avisar lo que no puede leer: se añade una llave de cierre que falta, y el texto que no es CSS puede desaparecer de la salida. Revisa el resultado de una hoja de estilos de la que no estés seguro.
¿El modo SQL conserva mis cadenas y mis indicaciones?
Sí. Las cadenas, los nombres entre comillas (dobles, invertidas o corchetes) y los cuerpos $$ de PostgreSQL se copian tal cual, aunque contengan -- o /*. Los comentarios desaparecen, salvo las indicaciones /*! */ de MySQL y /*+ */ del optimizador. Se conserva un salto de línea después de #, que abre un comentario en MySQL, y alrededor de DELIMITER, GO y los comandos \ de psql, donde quitarlo cambiaría el script.
¿Los modos XML y JSON cambian mis datos?
No. El XML solo pierde sus comentarios y los espacios entre etiquetas, nunca dentro de un elemento xml:space="preserve" ni entre las palabras de un contenido mixto, como <p>Hello <b>big</b> <i>world</i></p>; el texto, los valores de los atributos y las secciones CDATA se quedan tal como están escritos. El JSON pierde sus espacios, sus comentarios y sus comas finales; los números conservan todas sus cifras, mientras que JSON.parse seguido de JSON.stringify convierte 12345678901234567890 en 12345678901234567000.
Consejos y trucos
- ✓La línea de caracteres ahorrados solo aparece después de una minificación que ha funcionado; tras un error, «Salida» muestra el mensaje en su lugar.