Tamanho do bundle: carregue só os plugins que você usa

Todos os exemplos desta documentação, e todas as demonstrações do download, carregam all_plugins.min.js — todos os plugins, quer a página os use ou não. Isso é conveniente na primeira execução e um desperdício em produção. Carregar só os arquivos de plugin que você realmente usa leva o editor de 529 KB para 214 KB com gzip, sem etapa de build, sem bundler e sem alterar o código da sua aplicação — apenas com tags <script> diferentes.

Predefinições medidas

Os números são o tamanho de transferência com gzip de rte.js, mais o CSS do tema padrão, mais os arquivos de plugin listados, medidos no build 2.6.7. Em seguida, cada predefinição foi carregada em um navegador: ela inicializa, a área é editável e os recursos que os plugins dela prometem estão presentes e funcionando. A última coluna mostra quantos dos 58 botões padrão da barra de ferramentas continuam funcionando.

O que você carrega hoje

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

Um editor menor: a predefinição blog

Substitua a tag única do bundle por uma tag por plugin. Os plugins podem ser carregados em qualquer ordem entre si; mantenha o rte.js por último. As configurações vão no objeto de configuração que você passa ao construtor, e não em um arquivo separado — o rte.js já contém os padrões, e os pacotes de download não incluem um rte-config.js separado para carregar.

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

As outras predefinições têm a mesma forma, com outra lista de plugins:

Só o core: nenhum arquivo de plugin

O core não é um esqueleto. Negrito, itálico e sublinhado, fonte e tamanho, cores, alinhamento, listas, recuo, links, imagens, tabelas, localizar e substituir, desfazer e refazer, a visualização do código-fonte HTML e a limpeza ao colar estão todos no rte.js: 52 dos 58 botões padrão da barra de ferramentas funcionam sem nenhum plugin carregado.

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

Oculte os botões que você removeu

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

A lista completa de nomes de ferramentas está na referência de itens da barra de ferramentas e do menu.

O que isso não resolve

• O core é o piso. O rte.js sozinho tem 191 KB com gzip e não pode ser reduzido mais. Nenhuma combinação de tags script fica abaixo da linha core.
• Os arquivos de plugin individuais não são minificados — só o all_plugins.min.js combinado é. Por isso, os números acima foram medidos sobre os fontes não minificados dos plugins; passá-los pelo seu próprio minificador torna a economia maior do que a tabela indica, nunca menor.
• Os comentários precisam de aitoolkit.js. Nas predefinições review e collab ele não é opcional: a persistência dos comentários fica nele e, sem ele, editor.comments continua existindo, mas todo add() retorna null em vez de falhar de forma visível. Ele responde pela maior parte do peso das duas predefinições. Se você precisa de comentários, carregue-o.
• Nada aqui é carregado sob demanda. São escolhas feitas no carregamento: um plugin que não está nas suas tags fica ausente durante toda a vida da página.

Verifique a sua própria página

Abra o painel de rede do navegador, filtre por richtexteditor e leia a coluna transfer (transferência), e não a de tamanho do recurso, que informa os bytes sem compressão. Se all_plugins.min.js estiver nessa lista, a tabela acima mostra a economia que ainda está ao seu alcance.