Arquivos source map [.map]

Neste post pretendo abordar o que são os arquivos source map (x.map) presentes em alguns frameworks e bibliotecas disponíveis na internet.

Os arquivos x.map são gerados a partir de pré processadores CSS ou JavaScrip, após compilar o código. Geralmente esses arquivos são utilizados por Devtools (ferramentas de desenvolvimento) para auxiliar na edição dos arquivos, linkando o código diretamente a suas funcionalidades. Esse processo facilita o processamento do navegador ao renderizar uma pagina, já que ele tem um “atalho” para o source solicitado. Frameworks e bibliotecas de códigos web a fora distribuem os arquivos source maps junto com os sources files.

Basicamente, um arquivo source maps cria uma maneira mais simples do navegador interpretar o código, mesmo em um arquivo comprimido.

Como funciona

Esse tipo de arquivo é utilizado pelo navegador como um mapa para o source original do arquivo. Você pode especificar diferentes source maps para cada arquivo comprimido.

Para sinalizar ao navegador que um source map está disponível é utilizado um comentário especial, como abaixo:

//# sourceMappingURL=/caminho/para/script.js.map

Esse comentário é inserido automaticamente no arquivo source map quando o mesmo é criado por um gerador.

O arquivo source map agrega um objeto JSON com as informações do próprio arquivo e do arquivo original a que se refere.

Exemplo:

{
    version: 1,
    file: "script.js.map",
    sources: [
        "app.js",
        "content.js",
        "widget.js"
    ],
    sourceRoot: "/",
    names: ["slideUp", "slideDown", "save"],
    mappings: "AAA0B,kBAAhBA,QAAOC,SACjBD,OAAOC,OAAO..."
}

Vamos analisar a função dessas propriedades.

  • Version – versão do arquivo source map.
  • File – nome do arquivo.
  • Sources – um laço com a URL dos arquivos originais.
  • SourceRoot – URL onde todos os arquivos do informados no sources vão estar alojadas, essa propriedade não é obrigatória.
  • Names – laço contendo todas as variáveis e funções do arquivo original.
  • Mappings – string [glossary slug=’base64′]Base64[/glossary] VLQs que agrega os mapeamentos, aonde tudo acontece.

Fiz alguns testes com o Bootstrap que traz dois arquivos sources maps na versão dist do framework.

Eis a diferença e como o Chrome interpreta arquivos source maps:

Com source maps ativadoArquivos Surce Maps - Web Social Dev
Com source maps desativadoArquivos Surce Maps - Web Social Dev

Com o recurso ativado no Google Chrome nós conseguimos visualizar a fonte de todo o arquivo CSS do bootstrap, pois ele tem um arquivo source map que mapeia a mesma, no caso o arquivo bootstrap.css.map.

Para ativar ou desativar a interpretação de arquivo source map basta seguir o caminho abaixo:

Arquivos Source Map - Web Social Dev
Clicar no simbolo de configurações para abrir as opções do modo dev.
Arquivos Source Map - Web Social Dev
rolar página de configurações até esta opção. Marcar habilita o recurso e vice-versa.

Como criar arquivos source maps

Existem várias ferramentas que possibilitam a criação de arquivo source map, uma delas é a UglifyJS que é utilizada para otimizar arquivos .js.

Para utilizar o UglifyJS você precisa ter instalado em seu sistema o NodeJS.

Para configurar e utilizar o UglifyJS: GitHub Doc