À quoi servent les fichiers en *.js.map ?

En ouvrant les outils de développement de votre navigateur, vous avez déjà :

• Vu le téléchargement de fichier *.js.map dans votre onglet réseau
• Ou au contraire un avertissement dans la console disant que ces fichiers sont manquants

Mais à quoi servent ces fichiers exactement, sont-ils utiles, voir indispensables ? C'est-ce que nous allons découvrir aujourd'hui.

Qu'est-ce qu'une "Source Map" ?

Lorsque vous minifiez du code source, ou que vous le transpilez d'un langage vers un autre (Typescript par exemple), alors votre code déployé est très différent du code que vous développez.

Plusieurs fichiers sont fusionnés en un seul, les variables sont renommées, etc... Le code est illisible en cas de debuggage avec le navigateur.

Les fichiers de mapping sont donc des fichiers générés en même temps que le code minifié/transpilé et contiennent les informations pour retrouver un code lisible.

En résumé : Code compilé + Source Map = Code source

Et c'est grâce à cela que votre navigateur peut vous montrer le code source depuis l'onglet "sources" de vos outils de développement !

Comment cela fonctionne ?

La première question que l'on se pose c'est : "Quel est l'intérêt de minifier un fichier si on sert un deuxième fichier à côté ?"

En réalité, les fichiers *.js.map ne sont pas téléchargés automatiquement au chargement du site, mais uniquement si les outils de développement de votre navigateur sont ouverts !

Donc cela n'alourdi pas votre site lors d'une utilisation classique !

Génération de la Source Map

C'est lors de la compilation de votre code que votre chaîne d'outil va (ou non) générer les fichiers de source, selon la configuration fournie.

Par exemple, le compilateur Typescript ne génère pas par défaut ces fichiers, et il faudra ajouter l'option de compilateur "sourceMap: true" comme indiqué dans la documentation.

Voici un exemple minimal de fichier .js.map généré :

// index.js.map
{
  "version": 3,
  "file": "index.min.js",
  "sourceRoot": "",
  "sources": ["src/index.ts"],
  "names": [],
  "mappings": ";;AAAa,QAAA,UAAU,GAAG,IAAI,CAAA"
}

L'idée de cet article n'est pas de détailler l'anatomie complète d'un tel fichier, mais si le sujet vous intéresse, voici un article complet de bugsnag !

Pour que votre navigateur sache à l'avance qu'il est censé pouvoir télécharger un tel fichier pour s'en servir, il est nécessaire d'ajouter une information précise dans votre fichier généré.

Cette information est une simple directive sous la forme d'un commentaire en Javascript, contenant l'url du fichier de mapping comme ceci :

//index.min.js

...
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.js.map

Et si jamais cette directive est présente mais que le fichier de mapping correspondant est absent du serveur, vous recevrez l'erreur suivante dans votre console :

DevTools failed to load SourceMap: Could not load content for http://example.com/path/to/your/sourcemap.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE