バンドルサイズ：使うプラグインだけを読み込む

このドキュメントのすべての例と、ダウンロードに含まれるすべてのデモは、all_plugins.min.js を読み込みます。ページで使うかどうかにかかわらず、すべてのプラグインです。最初に動かすときには便利ですが、本番環境では無駄になります。実際に使うプラグインのファイルだけを読み込めば、エディターは gzip で 529 KB から 214 KB になります。ビルドの手順もバンドラーも、アプリケーションのコードの変更も必要なく、<script> タグを変えるだけです。

計測済みのプリセット

数値は、rte.js、既定のテーマの CSS、一覧にあるプラグインのファイルを合わせた gzip での転送サイズで、2.6.7 のビルドで計測したものです。その後、各プリセットをブラウザーで読み込み、起動すること、編集面が編集できること、プラグインの機能が存在して動作することを確認しました。最後の列は、既定の 58 個のツールバーボタンのうち、引き続き動作するものの数です。

現在読み込んでいるもの

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

より小さなエディター：blog プリセット

1 つのバンドルのタグを、プラグインごとに 1 つのタグに置き換えます。プラグイン同士はどの順序で読み込んでもかまいません。rte.js は最後にしてください。設定は別のファイルではなく、コンストラクターに渡す設定オブジェクトに書きます。rte.js にはすでに既定値が含まれており、ダウンロードのパッケージには、読み込むための独立した rte-config.js は含まれていません。

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

ほかのプリセットも、プラグインの一覧が違うだけで同じ形です。

コアのみ：プラグインのファイルは一切なし

コアは骨組みだけのものではありません。太字、斜体、下線、フォントとサイズ、色、配置、リスト、インデント、リンク、画像、表、検索と置換、元に戻す／やり直し、HTML ソースの表示、貼り付け時のクリーンアップは、すべて rte.js に含まれています。プラグインを読み込まなくても、既定の 58 個のツールバーボタンのうち 52 個が動作します。

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

外したプラグインのボタンを非表示にする

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

ツール名の全一覧はツールバーとメニュー項目のリファレンスにあります。

これでは解決しないこと

• コアが下限です。rte.js はそれだけで gzip 後 191 KB あり、これ以上分割できません。script タグをどう組み合わせても、core の行より小さくはなりません。
• 個々のプラグインのファイルは縮小されていません。縮小されているのは、まとめた all_plugins.min.js だけです。そのため、上の数値は縮小前のプラグインのソースで計測したもので、自分の縮小ツールにかければ、削減量は表の値より大きくなることはあっても、小さくなることはありません。
• コメントには aitoolkit.js が必要です。review と collab のプリセットでは、これは省略できません。コメントの永続化はそこにあり、これがないと editor.comments は存在していても、add() はすべてはっきりと失敗するのではなく null を返します。両方のプリセットの重さの大部分はこのファイルです。コメントが必要なら読み込んでください。
• ここでは何も遅延読み込みされません。これらは読み込み時の選択です。タグに含まれていないプラグインは、ページが存在する間ずっと使えません。

自分のページを確認する

ブラウザーのネットワークパネルを開き、richtexteditor で絞り込んで、圧縮前のバイト数を示すリソースサイズの列ではなく、転送サイズの列を見てください。一覧に all_plugins.min.js があれば、上の表の分だけまだ削減できます。