web-dev-qa-db-fra.com

Impact sur les performances de l'utilisation des cartes sources css / javascript en production?

  • Les cartes sources doivent-elles être utilisées dans l'environnement de production? Offrent-ils des avantages autres que le débogage?
  • Ont-ils un impact sur le temps de chargement des applications en raison des allers-retours supplémentaires sur le serveur? Les navigateurs sont-ils assez intelligents pour charger .map éléments après le chargement et le rendu de l'application?
  • Si un navigateur ne trouve pas le .map élément (404 erreur), y aurait-il un impact sur les performances? Dois-je me soucier de le réparer?

Notez que la fixation du dernier peut ne pas être aussi simple que de servir le .map actifs s'il y a des étapes de compilation concat/minify compliquées.

javascriptcsshttprequestproduction-environmentsource-maps
67
Ray Shan

Un test rapide utilisant Charles Web Proxy montre que les cartes sources sont uniquement chargées si les outils de développement sont ouverts. Si vous chargez une page sans outils de développement ouverts, il n'y a pas de requête http pour les cartes sources.

Le comportement était le même dans Chrome 43 et Firefox 38.

Il semble donc qu'ils n'auraient aucun impact sur l'environnement de production.

69
pnichols

De HTML5 Rocks:

Fondamentalement, c'est un moyen de mapper un fichier combiné/minifié à un état non construit. Lorsque vous générez pour la production, en plus de réduire et de combiner vos fichiers JavaScript, vous générez une carte source qui contient des informations sur vos fichiers d'origine. Lorsque vous interrogez un certain numéro de ligne et de colonne dans votre code JavaScript généré, vous pouvez effectuer une recherche dans la carte source qui renvoie l'emplacement d'origine. Les outils de développement (actuellement les versions WebKit nocturnes, Google Chrome ou Firefox 23+) peuvent analyser automatiquement la carte source et la faire apparaître comme si vous exécutiez des fichiers non minifiés et non combinés.

http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

2
Jason