Source Maps em Produção? É uma pergunta válida. Um “source map” (“mapa de origem”) é um arquivo especial que conecta uma versão minificada de um asset (CSS ou JavaScript) à versão original criada.
Para os que desenvolvem mais no front end, que trabalham com pré-processadores CSS, não é preciso maiores explicações; mas, para os que estão um pouco em dúvida, vamos a algumas explicações preliminares.
Digamos que você tenha um arquivo chamado _header.scss que é importado em um global.scss, que, por sua vez, é compilado para global.css. Esse arquivo CSS final é o que é carregado no navegador. Por exemplo, quando você inspeciona um elemento nas DevTools, consta que o <nav> é display: flex porque assim está na linha 387 de global.css.
Mas como esse arquivo CSS final provavelmente está minificado (todo o espaço em branco removido), as DevTools provavelmente nos dirá que encontraremos a declaração que estamos procurando na linha 1! Lamentável…
É aí que entram os source maps.
Afinal, o que são os source maps?
Source maps são arquivos especiais que conectam o arquivo final de saída que o navegador está realmente usando aos arquivos criados com os quais você realmente trabalha e escreve o código no seu sistema de arquivos.
Como sabemos, source maps são para nós, desenvolvedores. Eles são particularmente úteis para ajudar em questões de debug e outros; em geral, eles são usados para o desenvolvimento local. Você pode até ignorá-los (.gitignore) ou não incluí-los em uma rotina de deploy para homologação/produção.
Enviar ou não source maps para produção?
Curiosamente, houve algumas conversas recentes sobre ter ou não Source Maps em Produção.
David Heinemeier Hansson escreveu:
Source maps há muito são vistos apenas como uma ferramenta de desenvolvimento local. Não é algo que você envia para produção, embora as pessoas também estejam fazendo isso, de modo que o debug ao vivo fique mais fácil. Isso por si só é um ótimo motivo para enviar source maps.
Além disso, o Rails 6 se comprometeu a enviar source maps por padrão para produção, também graças ao Webpack. Você poderá desativar esse recurso, mas espero que não. A Web é um lugar melhor quando permitimos que outras pessoas aprendam com nosso trabalho.
Confira esse tópico de discussão para obter uma conversa mais interessante sobre o envio de source maps para produção. Os benefícios se resumem a essas 2 coisas:
- Pode ajudar a rastrear erros na produção com mais facilidade
- Ajuda outras pessoas a aprenderem com seu site com mais facilidade
Ambos são legais, embora muitos se oponham a enviar código otimizado para desempenho apenas para fins de aprendizado.
Enviar source maps para produção não traz impacto negativo no desempenho — os mapas de origem não são carregados, a menos que você tenha as DevTools abertas, o que é, IMHO, irrelevante para uma discussão real sobre desempenho — com o benefício de oferecer benefícios de depuração e aprendizado.
Por outro lado, as desvantagens levantadas em discussões recentes se resumem a:
- Source maps requerem tempo de compilação
- Isso permite que as pessoas, não sei, roubem seu código ou algo assim
Sobre esses pontos, sinceramente, por aqui não nos importamos muito com o #2 (veja o licenciamento do dpw no rodapé), mas, para projetos de clientes, é algo a se pensar bem mais a respeito; o #1 geralmente parece insignificante para um site pequeno ou o que pensamos como um “site comum”.
Conclusão
Uma coisa que merece atenção é que source maps podem até ser gerados para ferramentas de CSS-in-JS; portanto, para aqueles que literalmente injetam estilos no DOM para você, esses source maps também são injetados.
Source maps podem causar grandes lentidão nessas situações, então, poderia se indicar para, definitivamente, não enviar mapas de origem para produção se você não puder separá-los dos seus principais pacotes.
Então, a resposta final, inequívoca e definitiva para a pergunta “Source Maps em produção?“, meus caros, é aquela clássica do desenvolvimento web: depende.
Para “sites normais” de autoria, projetos próprios, open source e afins, realmente parece não haver problemas; para projetos Web de clientes, pense se realmente vale a pena.
E você, envia ou não source maps para produção nos projetos que participa?