Was sind Source Maps (und werden sie benötigt)?

Last updated 6. August 2022

Inhalt

Wenn Sie in irgendeiner Funktion am Frontend einer Website arbeiten – sei es für ein Plugin, ein Design oder sogar etwas außerhalb von WordPress – arbeiten Sie wahrscheinlich mit Minimierungstools.

Die Vorteile liegen auf der Hand, oder?

es verringert die Nutzlast,
es erlaubt uns, uns auf die Entwicklung in unserer lokalen Umgebung zu konzentrieren

Aber eines der Features, die mit der Arbeit mit diesen Technologien einhergehen, ist die Möglichkeit, Source Maps zu generieren.

Und das wirft eine Frage (oder vielleicht zwei) auf: Was sind Quellkarten? Und werden sie überhaupt benötigt?

Sie können behaupten, dass es zu spät ist, darüber zu sprechen, aber es gibt immer Leute, die in die Branche eintreten, die dieses Material möglicherweise nicht kennen.

Warum also nicht abdecken?

Was sind Quellkarten?

Kurz gesagt, Source Maps sind eine Möglichkeit für moderne Browser, den minimierten Code zu übernehmen und es uns zu ermöglichen, den Code in seinem nicht minimierten Zustand zu lesen.

In einem Projekt, an dem ich gearbeitet habe, habe ich beispielsweise eine einfache Datei, plugin-setting.scss, die in plugin-setting.css verkleinert wird. Diese Datei wird dann von WordPress in die Warteschlange gestellt .

Ich habe jedoch auch mein Build-Tool, das eine Quellkarte generiert. Das bedeutet, dass ich auch eine Datei namens plugin-settings.css.map habe.

Der mit dem Plugin ausgelieferte Code sieht also so aus:


form label{font-weight:normal}form input[type="text"],form textarea{width:100%}.admin-featurebox{background:#FFF;border:1px solid #CCC;margin:20px 0;padding:10px 20px}

/*# sourceMappingURL=plugin-settings.css.map */

Aber wenn es im Browser-Debug-Tool angezeigt wird, sieht es so aus:


form {
  label {
    font-weight: normal;
  }

  input[type="text"],
  textarea {
    width: 100%;
  }
}

.admin-featurebox {
  background:#FFF;
  border:1px solid #CCC;
  margin:20px 0;
  padding:10px 20px;
}

Und Quellkarten können sowohl für Stylesheets als auch für JavaScript generiert werden.

Werden sie benötigt?

Ich kann dazu kein spezifisches Ja oder Nein geben; Ich habe jedoch festgestellt, je länger ich in dieser Branche arbeite, und je länger ich in Projekten arbeite, desto hilfreicher finde ich sie als die Alternative (die normalerweise darin besteht, den nicht minimierten Stil für Debugging-Zwecke einzureihen).

Ich empfehle, dass Sie sie generieren und einschließen, da dies das Debuggen erleichtert. Aber ob sie benötigt werden oder nicht, liegt bei Ihnen oder Ihrem Team.

Aufnahmequelle: tommcfarlin.com