Wie kann ich die Größe der Javascript-Datei auf dem Client reduzieren?

Hallo zusammen! In diesem Artikel möchte ich Ihnen erzählen, wie Sie die Größe von Javascript-Dateien dank einer Vorlagensprache wie hmpl um ein Vielfaches reduzieren können.

Der in dem Artikel vorgestellte technologische Ansatz ist nicht neu, aber dennoch heute so populär, dass es sich lohnt, darüber zu sprechen.

Durch die Reduzierung der Größe der Javascript-Datei können die Seiten schneller auf dem Client geladen werden. Wenn wir modernes SPA nehmen, stellt sich heraus, dass die Dateigrößen selbst unter Berücksichtigung aller Minimierungen immer noch recht groß sind. Wenn Sie eine Seite einmal geladen haben, ist es natürlich einfacher, darin zu navigieren, aber die erste Ladezeit selbst kann bei einer schlechten Internetverbindung zwischen einer Sekunde und beispielsweise mehreren Minuten liegen. Nur wenige Kunden werden so lange warten wollen.

Wenn Sie die meisten Frameworks und Bibliotheken zum Erstellen der Benutzeroberfläche verwenden, müssen Sie viel Boilerplate-Code schreiben. Jedes Symbol belegt Speicherplatz. Nehmen wir einen Vue.js-Clicker:

createApp({
  setup() {
    const count = ref(0);
    return {
      count,
    };
  },
  template: `<div>
        <button @click="count++">Click!</button>
        <div>Clicks: {{ count }}</div>
    </div>`,
}).mount("#app");

Ein supereinfacher Clicker, aber selbst er erfordert eine ganze Menge Codezeilen in js, ganz zu schweigen von den Fällen, in denen die Anwendung mehr oder weniger groß ist.

Auch ohne zwei Kommas könnten es ein paar Bytes weniger sein

Das ist nicht nur bei Vue ein Problem, sondern auch bei anderen Frameworks und Bibliotheken, die auf ähnliche Weise funktionieren. Aber das ist nicht der einzige Punkt. Es gibt eine große Anzahl zusätzlicher Module, die zu ihnen gehören, und zu ihnen gehört die gleiche Anzahl zusätzlicher Module und so weiter bis „unendlich“.

Tatsächlich wurde eine der Lösungen für dieses Problem schon vor langer Zeit vorgeschlagen und ist trivial einfach: Sie besteht darin, die Benutzeroberfläche auf dem Server vorzubereiten und sie einfach auf den Client zu laden. Dadurch kann die Größe der Bewerbungsdateien deutlich reduziert werden. Dies ist genau die Idee, die in HMPL verwendet wird.

Im Beispiel werde ich auch versuchen, einen Clicker zu erstellen, aber mit hmpl.js.

document.querySelector("#app").appendChild(
  hmpl.compile(
    `<div>
        <button>Click!</button>
        <div>Clicks: {{ src: "/api/clicks", after: "click:button" }}</div>
    </div>`
  )().response
);

Wie Sie sehen können, wird die Benutzeroberfläche dieselbe sein, aber die Dateigröße wird etwas kleiner sein.

Selbst wenn Sie die Dateien verkleinern und alle unnötigen Leerzeichen aus den Vorlagen entfernen, sind die Dateien möglicherweise gleichwertig oder etwas größer, aber das ist nur eine Annahme für kleine Beispiele. Wenn wir große Anwendungen nehmen, ist es offensichtlich, dass es bei diesem Ansatz viel weniger Js geben wird.

Wie aus dem Beispiel ersichtlich ist, kann die Funktionalität zur Berechnung und Speicherung des Anwendungsstatus auf Wunsch auf den Server verlagert werden.

Wie Sie dem Beispiel entnehmen können, kann die Funktionalität zur Berechnung und Speicherung des Anwendungsstatus auf Wunsch auf den Server verlagert werden. Es ist klar, dass bei einer großen Anzahl von Benutzern der Server einfach heruntergefahren wird, aber die Tatsache, dass die Benutzeroberfläche dieselbe ist, ist wichtig.

Ja, natürlich hat diese Methode nicht nur einen solchen Nachteil, sondern auch die Wiederverwendbarkeit der Benutzeroberfläche, wie man die Benutzeroberfläche zwischenspeichert, um nicht alles hundertmal zu laden und vieles mehr. Wichtig ist eine Alternative, die bei richtiger Konfiguration mit den meisten modernen Lösungen mithalten kann.

Vielen Dank an alle, die diesen Artikel gelesen haben!

Materialliste:

https://hmpl-lang.github.io/#/docs
https://vuejs.org/guide/quick-start.html

Das obige ist der detaillierte Inhalt vonWie kann ich die Größe der Javascript-Datei auf dem Client reduzieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!