Bundle-Größe: nur die Plugins laden, die Sie verwenden

Jedes Beispiel in dieser Dokumentation und jede Demo im Download lädt all_plugins.min.js – alle Plugins, ob die Seite sie nutzt oder nicht. Für einen ersten Test ist das bequem, in der Produktion verschwenderisch. Wenn Sie nur die Plugin-Dateien laden, die Sie tatsächlich verwenden, sinkt der Editor von 529 KB auf 214 KB gzip, und das ohne Build-Schritt, ohne Bundler und ohne Änderung an Ihrem Anwendungscode – nur mit anderen <script>-Tags.

Gemessene Vorgaben

Die Zahlen sind die gzip-Übertragungsgröße für rte.js plus das CSS des Standard-Themes plus die aufgeführten Plugin-Dateien, gemessen am Build 2.6.7. Jede Vorgabe wurde anschließend in einem Browser geladen: Sie startet, die Fläche ist bearbeitbar, und die Funktionen, die ihre Plugins versprechen, sind vorhanden und funktionieren. Die letzte Spalte gibt an, wie viele der 58 Standard-Schaltflächen der Symbolleiste noch funktionieren.

Was Sie heute laden

<!-- The default: every plugin, whether the page uses it or not. -->
<link rel="stylesheet" href="/richtexteditor/rte_theme_default.min.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.min.js"></script>

Ein kleinerer Editor: die Vorgabe blog

Ersetzen Sie das einzelne Bundle-Tag durch ein Tag pro Plugin. Die Plugins können untereinander in beliebiger Reihenfolge geladen werden; rte.js bleibt zuletzt. Einstellungen kommen in das Konfigurationsobjekt, das Sie dem Konstruktor übergeben, nicht in eine separate Datei – rte.js enthält bereits die Standardwerte, und die Downloadpakete liefern keine eigenständige rte-config.js zum Laden.

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.min.css">

<!-- Only the plugins this editor uses. Order among plugins does not matter. -->
<script src="/richtexteditor/plugins/blocktypes.js"></script>
<script src="/richtexteditor/plugins/todolist.js"></script>
<script src="/richtexteditor/plugins/insertcode.js"></script>
<script src="/richtexteditor/plugins/markdownexport.js"></script>
<script src="/richtexteditor/plugins/localdraft.js"></script>
<script src="/richtexteditor/plugins/tableofcontents.js"></script>

<script src="/richtexteditor/rte.js"></script>

Die anderen Vorgaben sind gleich aufgebaut, mit einer anderen Liste von Plugins:

Nur der Kern: überhaupt keine Plugin-Dateien

Der Kern ist kein Gerippe. Fett, kursiv und unterstrichen, Schriftart und -größe, Farben, Ausrichtung, Listen, Einzug, Links, Bilder, Tabellen, Suchen & Ersetzen, Rückgängig und Wiederherstellen, die HTML-Quelltextansicht und die Bereinigung beim Einfügen stecken alle in rte.js: 52 der 58 Standard-Schaltflächen der Symbolleiste funktionieren ohne geladenes Plugin.

<!-- No plugin files. 52 of the 58 default toolbar buttons still work. -->
<link rel="stylesheet" href="/richtexteditor/rte_theme_default.min.css">
<script src="/richtexteditor/rte.js"></script>

<script>
  var editor = new RichTextEditor("#div_editor");
</script>

Die Schaltflächen der entfernten Plugins ausblenden

// Dropping a plugin file does not remove its toolbar button - the button stays
// and does nothing when pressed. Name the tools you kept, and nothing else shows.
var config = {};
config.toolbar = "{bold,italic,underline}|{insertlink,insertimage}|{blocktypes}|{todolist,insertcode}";
var editor = new RichTextEditor("#div_editor", config);

Die vollständige Liste der Werkzeugnamen steht in der Referenz der Symbolleisten- & Menüeinträge.

Was das nicht löst

• Der Kern ist die Untergrenze. rte.js hat allein 191 KB gzip und lässt sich nicht weiter aufteilen. Keine Anordnung von Script-Tags kommt unter die Zeile core.
• Einzelne Plugin-Dateien sind nicht minifiziert – nur die kombinierte all_plugins.min.js ist es. Die Zahlen oben wurden daher an nicht minifizierten Plugin-Quellen gemessen; wenn Sie sie durch Ihren eigenen Minifier schicken, wird die Ersparnis größer als in der Tabelle angegeben, nie kleiner.
• Kommentare brauchen aitoolkit.js. In den Vorgaben review und collab ist die Datei nicht optional: Dort liegt die Speicherung der Kommentare, und ohne sie existiert editor.comments zwar weiterhin, aber jedes add() gibt null zurück, statt deutlich fehlzuschlagen. Sie macht den Großteil des Gewichts beider Vorgaben aus. Wenn Sie Kommentare brauchen, laden Sie sie.
• Hier wird nichts per Lazy Loading geladen. Das sind Entscheidungen zur Ladezeit: Ein Plugin, das nicht in Ihren Tags steht, fehlt während der gesamten Lebensdauer der Seite.

Ihre eigene Seite prüfen

Öffnen Sie den Netzwerkbereich des Browsers, filtern Sie nach richtexteditor und lesen Sie die Spalte für die Übertragung, nicht die Spalte für die Ressourcengröße, die unkomprimierte Bytes angibt. Steht all_plugins.min.js in dieser Liste, zeigt die Tabelle oben die Ersparnis, die Ihnen noch offensteht.