Pourquoi des cartes source en ligne?
Aujourd'hui, j'ai appris qu'il est possible de inclure des cartes source directement dans votre fichier JavaScript minifié, au lieu de les avoir dans un fichier example.min.map séparé. Je me demande: pourquoi quelqu'un voudrait-il faire quelque chose comme ça ?
L’avantage d’avoir des mappages source est clair pour moi: on peut par exemple déboguer des erreurs avec les fichiers source originaux non compressés lors de l’exécution des fichiers minifiés. L’avantage de la minimisation est également évident : la taille des fichiers source est considérablement réduite, ce qui accélère le téléchargement pour les navigateurs.
Alors pourquoi sur Terre, je voudrais inclure les cartes sources dans le fichier minifié, étant donné que les cartes ont une taille encore supérieure à celle du code minifié lui-même ?
J'ai cherché autour de moi et la seule raison pour laquelle je pouvais voir que les cartes source en ligne des personnes était destinée au développement. Les cartes source en ligne ne doivent pas être utilisées en production.
La raison pour laquelle les fichiers source sont alignés dans les cartes source est que le navigateur analyse exactement le même code JavaScript lors du développement et de la production. Certains minifiers tels que Closure Compiler font plus que "simplement" minifier le code. L'utilisation de options avancées peut également effectuer des opérations telles que: suppression du code mort, alignement de fonctions ou changement de nom agressif de variables. Cela rend le code minifié (potentiellement) fonctionnellement différent du fichier source.
Cela pourrait toujours être fait en référençant des fichiers de carte source externes bien sûr, mais certaines personnes semblent préférer l'inline pour leur processus de construction.
Si vous déboguez à distance Chrome sur un appareil Android, le débogueur de Chrome ne peut pas accéder uniquement aux fichiers de votre choix sur l'appareil et cela inclut des fichiers de carte distincts. Si vous les incluez en ligne, vous n’avez pas ce problème.
Les outils de regroupement JS tels que Browserify ou Webpack regrouperont tous vos fichiers .js et introduiront un ou plusieurs ensembles, même en mode développement. Ainsi, dans ce cas, l’ajout de mappe source en ligne aux ensembles générés est le moyen le plus simple d’aider au débogage sans apporter de fichiers supplémentaires.
Dans certaines situations, vous pouvez inclure des cartes source intégrées dans du code évalué. Par exemple, vous avez un champ de saisie Coffeescript et vous souhaitez activer le débogage du code dans Coffeescript. Il existe une question de stackoverflow sur les cartes source dans le code évalué:
Utiliser les cartes source avec le code évalué
Vous pouvez inclure @sourceURL dans vos commentaires pour spécifier une URL de votre code eval et charger un fichier map (voir page 8 de SourceMap Spec 3 ). Mais il n'est pas toujours possible d'écrire des fichiers à un endroit donné.
cheap-module-source-map est bien meilleur pour une construction en production.
inline-source-map est utilisé pour créer des builds rapides et sales lors des tests