Tamaño del bundle: carga solo los plugins que usas

Todos los ejemplos de esta documentación, y todas las demos de la descarga, cargan all_plugins.min.js: todos los plugins, los use la página o no. Es cómodo para una primera prueba y un desperdicio en producción. Cargar solo los archivos de plugin que realmente usas reduce el editor de 529 KB a 214 KB con gzip, y no necesita ningún paso de compilación, ningún bundler ni ningún cambio en el código de tu aplicación: solo unas etiquetas <script> distintas.

Presets medidos

Las cifras son el tamaño de transferencia con gzip de rte.js más el CSS del tema predeterminado más los archivos de plugin indicados, medido en la compilación 2.6.7. Después, cada preset se cargó en un navegador: arranca, la superficie se puede editar y las funciones que prometen sus plugins están presentes y funcionan. La última columna indica cuántos de los 58 botones predeterminados de la barra de herramientas siguen funcionando.

Lo que cargas hoy

<!-- 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 editor más pequeño: el preset blog

Sustituye la etiqueta única del bundle por una etiqueta por plugin. Los plugins pueden cargarse en cualquier orden entre sí; deja rte.js al final. Los ajustes van en el objeto de configuración que pasas al constructor, no en un archivo aparte: rte.js ya contiene los valores predeterminados, y los paquetes de descarga no incluyen ningún rte-config.js independiente que cargar.

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

Los demás presets tienen la misma forma con otra lista de plugins:

Solo el core: ningún archivo de plugin

El core no es un esqueleto. Negrita, cursiva y subrayado, fuente y tamaño, colores, alineación, listas, sangría, enlaces, imágenes, tablas, buscar y reemplazar, deshacer y rehacer, la vista de código HTML y la limpieza al pegar están todos en rte.js: 52 de los 58 botones predeterminados de la barra de herramientas funcionan sin ningún plugin cargado.

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

Oculta los botones que quitaste

// 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 lista completa de nombres de herramientas está en la referencia de elementos de la barra de herramientas y los menús.

Lo que esto no resuelve

• El core es el mínimo. rte.js ocupa 191 KB con gzip por sí solo y no se puede reducir más. Ninguna combinación de etiquetas script baja de la fila core.
• Los archivos de plugin individuales no están minificados; solo lo está el all_plugins.min.js combinado. Por eso, las cifras de arriba se midieron con los fuentes de los plugins sin minificar, así que pasarlos por tu propio minificador hace que el ahorro sea mayor de lo que indica la tabla, nunca menor.
• Los comentarios necesitan aitoolkit.js. En los presets review y collab no es opcional: ahí está la persistencia de los comentarios, y sin él editor.comments sigue existiendo, pero cada add() devuelve null en lugar de fallar de forma visible. Es la mayor parte del peso de ambos presets. Si necesitas comentarios, cárgalo.
• Aquí no hay nada con carga diferida. Son decisiones en el momento de la carga: un plugin que no está en tus etiquetas no existe durante toda la vida de la página.

Comprueba tu propia página

Abre el panel de red del navegador, filtra por richtexteditor y lee la columna de transferencia en lugar de la de tamaño del recurso, que indica los bytes sin comprimir. Si all_plugins.min.js está en esa lista, la tabla de arriba es el ahorro que todavía tienes a tu alcance.