¿Qué son los mapas de origen (y son necesarios)?

Si trabaja en el front-end de un sitio en cualquier capacidad, ya sea para un complemento, un tema o incluso algo fuera de WordPress, es probable que esté trabajando con herramientas de minificación.

Los beneficios son obvios, ¿verdad?

• disminuye la carga útil,
• nos permite centrarnos en el desarrollo de nuestros entornos locales

Pero una de las características que vienen con el trabajo con estas tecnologías es la capacidad de generar mapas de origen.

Y esto plantea una pregunta (o tal vez dos): ¿Qué son los mapas fuente? ¿Y son necesarios?

Puede afirmar que es tarde para hablar de esto, pero siempre hay personas que ingresan a la industria que pueden no conocer este material.

Entonces, ¿por qué no cubrirlo?

¿Qué son los mapas de origen?

En resumen, los mapas de origen son una forma en que los navegadores modernos toman el código minimizado y nos permiten leer el código en su estado no minimizado.

For example, in a project on which I’ve been working, I have a simple file, plugin-setting.scss, that gets minified into plugin-setting.css. This file is then enqueued by WordPress.

I also, however, have my build tool generating a source map. This means that I also have a file called plugin-settings.css.map.

So the code that’s shipped with the plugin looks like this:

form label{font-weight:normal}form input[type="text"],form textarea{width:100%}.admin-featurebox{background:#FFF;border:1px solid #CCC;margin:20px 0;padding:10px 20px}

/*# sourceMappingURL=plugin-settings.css.map */

But when viewed in the browsers debug tool looks like this:

form {
  label {
    font-weight: normal;
  }

  input[type="text"],
  textarea {
    width: 100%;
  }
}

.admin-featurebox {
  background:#FFF;
  border:1px solid #CCC;
  margin:20px 0;
  padding:10px 20px;
}

And source maps can be generated for both stylesheets and JavaScript.

Are They Needed?

No puedo dar un sí o un no específico a esto; sin embargo, descubrí que cuanto más tiempo trabajo en esta industria y en proyectos, los encuentro mucho más útiles que la alternativa (que generalmente es poner en cola el estilo no minimizado para fines de depuración).

Te recomiendo que los generes y los incluyas porque facilita la depuración. Pero si se necesitan o no depende de usted o de su equipo.