ここでは、Onsen UIアプリのサイズを削減するいくつかの方法を紹介します。
v2.8.0以降では、Onsen UIにバンドルされているデフォルトのアイコンパック(Font Awesome、Ionicons、およびMaterial Design icons)を除去することができるようになりました。今後はonsenui.cssの代わりにonsenui-core.css(およびそれらのminifiedバージョン)を使うことで最低限必要なCSSだけをアプリに含めることができます:
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui-core.min.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
より詳しい情報については、FAQのカスタムのアイコンを使いたいもご覧ください。
Onsen UIはUMD(Universal Module Definition)バンドルの形で提供されています。このバンドルファイルはOnsen UIが持つ全てのコンポーネント、およびonsオブジェクトなどの内部機能を含んでいます。UMDバンドルは<script src="path/to/onsenui.js"></script>をindex.htmlに直接入れるというようなシンプルな状況では役に立ちます。
一方webpackやRollupのようなバンドラーツールおよびビルドシステムを使用する場合は、ES Modulesが有用です。Onsen UIはv2.8.0からES Modules形式のファイルも提供しています。ES Modulesを使うとOnsen UIの各コンポーネントを独立したモジュールとして扱い、必要なコンポーネントだけをアプリに含められるようになります。必ず含めなければならない共通オブジェクト(onsオブジェクトといくらかの内部ロジックなど)もありますが、基本的にはES Modulesを使うことで大量の不要な要素を除去してアプリサイズを削減することができます。Onsen UIのコンポーネントは既にかなり小さいものとなっていますが、特にPWAにおいては、ES Modulesを使った更なるアプリサイズの削減がプラスになるでしょう。
全てのモジュールは既にES5にトランスパイル済みであるため、BabelやBubleのようなトランスパイラー/コンパイラーに再度かける必要はありません(モジュール同士の依存関係の記述にはES標準のimportとexportを使用しています)。バンドラーを使うだけで十分です。ただしバンドラーにはモジュールファイルの場所を指定してください。
Onsen UIがnode_modules(もしくはバンドラーが検出できる任意の場所)にインストールされていると仮定すると、ES Modules環境の例は以下のようになります:
import ons from 'onsenui/esm';
import 'onsenui/esm/elements/ons-page';
import 'onsenui/esm/elements/ons-toolbar';
import 'onsenui/esm/elements/ons-button';
import 'onsenui/esm/elements/ons-navigator';
これだけです!これでOnsen UIのコンポーネントを一切含まないES Modulesバージョンのonsが使えるようになります(このスコープ内でのみ)。なお、グローバルスコープの汚染を防ぐため、onsは自動ではグローバルスコープに登録されません。グローバルスコープでonsを使いたい場合はwindow.ons = ons;を実行してください(もしくは他のスコープでonsをimportしてください)。
この際、onsenuiではなくonsenui/esmからonsをインポートするよう注意してください。間違えると、UMDバージョンのonsが読み込まれてしまい、Onsen UIの全てのコンポーネントが読み込まれてしまいます。
上記のコードはons-pageとons-toolbar、ons-button、ons-navigatorをアプリに追加しています(他に必要な作業はありません)。なお、各コンポーネントは1回だけ読み込む必要がありますのでご注意ください(各コンポーネントはCustom Elements APIにグローバルに登録されるため)。
注意点として、ons.notificationユーティリティはons-alert-dialogとons-toastに依存しているため、ons.notificationを呼ぶ場合はそれらのコンポーネントをインポートするようにしてください。
また、もしアプリがOnsenUIのほぼ全てのコンポーネントを必要とするような場合は、ES Modulesよりも効率的にminifyできるUMDバンドルの使用をお勧めします。
これはOnsen UIのES Modulesではtree shakingアルゴリズムが使えないためです。仮にtree shakingアルゴリズムを使おうとすると、以下のような短いコードになります:
import { page, toolbar, button, navigator } from 'onsenui/esm/elements'; // 動作しません!
上記は有効な構文ではありますが、tree shakingアルゴリズムが正しく動くことが必要条件となります(つまり、pageとtoolbar、button、navigator以外のオブジェクトが正常にアプリから排除される必要があります)。しかし、現時点でのバンドラーのtree shakingアルゴリズムはObject.defineProperty(ES2015クラスをBabelでトランスパイルした際に生成されるコード)などの一部のトランスパイル済みコードをうまく扱えないため、正しく動きません。そのため、現時点でのOnsen UIのES Modulesでは、tree shakingアルゴリズムを使わずにpageやtoolbar、button、navigatorなどの必要なオブジェクトを個別にimportする方が安全です。