¿Cómo mejorar el rendimiento al minimizar y comprimir archivos?

La minificación es un proceso muy ampliamente reconocido y útil que nos ayuda a mejorar el rendimiento de una aplicación web eliminando las partes innecesarias, generalmente los espacios en blanco, los saltos de línea y los comentarios de los archivos HTML , CSS y JavaScript .

Minificación: es el proceso de minimizar el tamaño de un código o archivos de marcado dentro de su aplicación web sin cambiar el comportamiento y la salida de la aplicación. En palabras simples, la minificación es el método de eliminar todas las cosas innecesarias, incluidos los espacios en blanco y los comentarios del código HTML, CSS y JavaScript que no afectan nuestra salida. Reduce el tamaño del proyecto y mejora el rendimiento.

¿Cómo funciona la minificación?

Los desarrolladores escriben HTML, CSS y JavaScript primero porque, mientras desarrollan, el código debe ser legible y comprensible. Por lo tanto, necesitamos los comentarios, los saltos de línea y los espacios en blanco durante el desarrollo.
Después de que la aplicación esté completa y ahora esté lista para su implementación. Vamos a minimizar todos los códigos HTML, CSS y JavaScript antes de la implementación. Vamos a eliminar todos los saltos de línea, espacios en blanco y comentarios de nuestros archivos de código.
Implemente la aplicación optimizada en el servidor.

Métodos de minificación: generalmente existen tres métodos mediante los cuales podemos minimizar nuestros archivos HTML, CSS y JavaScript. Están

Minificación manual: este proceso es sencillo y el desarrollador elimina todas las partes innecesarias de los archivos de nuestra aplicación. Pero si el tamaño del proyecto es grande, entonces este método no es óptimo, ya que costará mucho tiempo desde el lado del desarrollo y la implementación.
Minificación por Herramientas Online Existen diferentes webs que nos ayudan a minificar nuestro código de forma automática. Pero estos sitios web son diferentes para diferentes lenguajes de programación y marcado. A continuación se indican los sitios web más utilizados para tales tareas. Copie y pegue el código original y generará la versión minificada automáticamente. Este es el método más óptimo.

Para HTML:
```
https://html-minifier.com/
```
Para CSS:
```
https://cssminifier.com/
```
Para JavaScript:
```
https://javascript-minifier.com/
```

Extensiones del editor: las diferentes extensiones que proporcionan los editores de código como Visual Studio Code o Atom también pueden ser muy útiles y generar una versión reducida de los códigos HTML, CSS o JavaScript automáticamente. La búsqueda de Google según el editor específico que utilice le mostrará el camino para hacerlo. JS & CSS Minifier (Minify) de olback es una de las extensiones de minificador de JavaScript y CSS más populares en Visual Studio Code.

Ventajas de la minificación: El aspecto principal de la minificación es que reduce el tamaño de la aplicación web. Eso trae muchas ventajas. son los siguientes

Mejora el tiempo de carga: la página que se minifica tarda menos en cargarse que el tiempo que tardaba en cargarse antes de la minificación. La minificación puede reducir el tiempo de carga de la aplicación hasta en un 60% y este hecho lo convierte en uno de los pasos más importantes para desarrollar una aplicación web basada en producción.
Menor uso de espacio: a medida que se reduce el tamaño de la aplicación web, se necesita muy poco almacenamiento y espacio en el servidor para construir y almacenar. Eso reduce el costo del servidor de la empresa mientras aloja la aplicación web.
Mejor experiencia de usuario: el tiempo de carga mejorado debido a la minificación brinda una experiencia mejor y optimizada para el usuario y hace que la aplicación web sea rápida y receptiva. Cuanto más rápida sea la aplicación, mejor será la experiencia del usuario.

Ejemplo:

HTML:

HTML antes de la minificación:

HTML

<!DOCTYPE html>
  
<html>
  
  <head>
  
      <title>Page Title</title>
  
  </head>
  
  <body>
  
      <h2>Welcome To GeeksforGeeks</h2>
  
      <p>How to improve performance by Minify and Compress Files.</p>
  
  </body>
  
</html>

HTML después de la minificación:

HTML

<!doctype html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h2>Welcome To GeeksforGeeks</h2>
  
<p>How to improve performance by Minify and Compress Files.</p>
  
</body>
</html>

CSS:

CSS antes de la minificación:

CSS

body {

  background-color: #282c34;

  color: white;

  padding: 40px;

  font-family: Arial;

  text-align: center;

}
CSS después de la minificación:

CSS

body{background-color:#282c34;color:#fff;padding:40px;font-family:Arial;text-align:center}

JavaScript:

JavaScript antes de la minificación

JavaScript

function helloWorld() {

console.log("Hello World!");

}
JavaScript después de la minificación:

JavaScript

function helloWorld(){console.log("Hello World!")}

El cambio en la salida: ahora vamos a verificar si hay algún cambio en la salida debido a la minificación de los archivos CSS. Vamos a mantener el documento HTML sin cambios a lo largo de los ejemplos.

Antes de la minificación:

HTML

<!DOCTYPE html>
<html>
<head>
  <title>GFG</title>
  <style>
  body {
    background-color: #282c34;
    color: white;
    padding: 40px;
    font-family: Arial;
    text-align: center;
  }
  </style>
</head>
<body>
  <h2>Welcome To GFG</h2>
  <p>How to improve performance by Minify and Compress Files</p>
</body>
</html>

Producción:

Después de la minificación:

HTML

<!DOCTYPE html>
<html>
<head>
  <title>GFG</title>
  <style>body{background-color:#282c34;color:#fff;padding:40px;font-family:Arial;text-align:center}
  </style>
</head>
<body>
  <h2>Welcome To GFG</h2>
  <p>How to improve performance by Minify and Compress Files</p>  
</body>
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por akashkumarsen4 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

HTML

CSS

CSS

JavaScript

JavaScript

HTML

HTML

Deja una respuesta Cancelar la respuesta