Taille du bundle : ne charger que les plugins utilisés

Chaque exemple de cette documentation, et chaque démo du téléchargement, charge all_plugins.min.js — tous les plugins, que la page les utilise ou non. C’est pratique pour un premier essai, et inutilement lourd en production. Ne charger que les fichiers de plugins que vous utilisez réellement fait passer l’éditeur de 529 KB à 214 KB en gzip, sans étape de build, sans bundler et sans modification du code de votre application — seulement des balises <script> différentes.

Préréglages mesurés

Les chiffres correspondent à la taille de transfert gzip de rte.js, plus le CSS du thème par défaut, plus les fichiers de plugins indiqués, mesurée sur le build 2.6.7. Chaque préréglage a ensuite été chargé dans un navigateur : il démarre, la surface est modifiable, et les fonctionnalités promises par ses plugins sont présentes et fonctionnent. La dernière colonne indique combien des 58 boutons de la barre d’outils par défaut fonctionnent encore.

Ce que vous chargez aujourd’hui

<!-- 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>

Un éditeur plus léger : le préréglage blog

Remplacez la balise unique du bundle par une balise par plugin. Les plugins peuvent se charger dans n’importe quel ordre entre eux ; gardez rte.js en dernier. Les réglages vont dans l’objet de configuration que vous transmettez au constructeur, et non dans un fichier séparé — rte.js contient déjà les valeurs par défaut, et les packages de téléchargement ne fournissent aucun rte-config.js autonome à charger.

<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>

Les autres préréglages ont la même forme, avec une autre liste de plugins :

Le cœur seul : aucun fichier de plugin

Le cœur n’est pas un squelette. Gras, italique et souligné, police et taille, couleurs, alignement, listes, retrait, liens, images, tableaux, rechercher et remplacer, annuler et rétablir, la vue source HTML et le nettoyage du collage se trouvent tous dans rte.js : 52 des 58 boutons de la barre d’outils par défaut fonctionnent sans aucun plugin chargé.

<!-- 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>

Masquer les boutons que vous avez retirés

// 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);

La liste complète des noms d’outils figure dans la référence des éléments de barre d’outils et de menu.

Ce que cela ne règle pas

• Le cœur est le plancher. rte.js pèse à lui seul 191 KB en gzip et ne peut pas être réduit davantage. Aucune combinaison de balises script ne descend sous la ligne core.
• Les fichiers de plugins individuels ne sont pas minifiés — seul le fichier combiné all_plugins.min.js l’est. Les chiffres ci-dessus sont donc mesurés sur les sources non minifiées des plugins : les passer dans votre propre minifieur rend le gain plus important que ce qu’indique le tableau, jamais plus faible.
• Les commentaires nécessitent aitoolkit.js. Dans les préréglages review et collab, il n’est pas facultatif : c’est lui qui gère la persistance des commentaires, et sans lui editor.comments existe toujours, mais chaque add() renvoie null au lieu d’échouer de façon visible. Il représente l’essentiel du poids de ces deux préréglages. Si vous avez besoin des commentaires, chargez-le.
• Rien n’est chargé à la demande ici. Ce sont des choix faits au chargement : un plugin absent de vos balises est absent pendant toute la durée de vie de la page.

Vérifier votre propre page

Ouvrez le panneau Réseau du navigateur, filtrez sur richtexteditor, et lisez la colonne de transfert plutôt que celle de la taille des ressources, qui indique les octets non compressés. Si all_plugins.min.js figure dans cette liste, le tableau ci-dessus représente le gain qui vous reste à faire.