O que são mapas de origem (e são necessários)?

Se você trabalha no front-end de um site em qualquer capacidade – seja para um plugin, um tema ou até mesmo algo fora do WordPress – provavelmente está trabalhando com ferramentas de minificação.

Os benefícios são óbvios, certo?

• diminui a carga útil,
• nos permite focar no desenvolvimento em nossos ambientes locais

Mas um dos recursos que acompanham o trabalho com essas tecnologias é a capacidade de gerar mapas de origem.

E isso levanta uma questão (ou talvez duas): O que são mapas de origem? E eles são mesmo necessários?

Você pode afirmar que é tarde para o jogo falar sobre isso, mas sempre há pessoas entrando na indústria que podem não conhecer esse material.

Então por que não cobrir?

O que são mapas de origem?

Em resumo, os mapas de origem são uma maneira de os navegadores modernos pegarem o código minificado e nos permitirem ler o código em seu estado não minificado.

Por exemplo, em um projeto no qual estou trabalhando, tenho um arquivo simples, plugin-setting.scss, que é reduzido para plugin-setting.css. Este arquivo é então enfileirado pelo WordPress.

Eu também, no entanto, tenho minha ferramenta de construção gerando um mapa de origem. Isso significa que também tenho um arquivo chamado plugin-settings.css.map.

Portanto, o código enviado com o plug-in se parece com isso:

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 */

Mas quando visualizado na ferramenta de depuração dos navegadores fica assim:

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;
}

E mapas de origem podem ser gerados para folhas de estilo e JavaScript.

Eles são necessários?

Não posso dar um sim ou não específico a isso; no entanto, descobri que quanto mais tempo trabalho neste setor e em projetos, acho-os muito mais úteis do que a alternativa (que geralmente é enfileirar o estilo unminified para fins de depuração).

Eu recomendo que você os gere e inclua porque facilita a depuração. Mas se eles são ou não necessários depende de você ou de sua equipe.