ここでは、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
する方が安全です。