Improve this

アプリサイズの削減

ここでは、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のカスタムのアイコンを使いたいもご覧ください。

ES Modules

Onsen UIはUMD(Universal Module Definition)バンドルの形で提供されています。このバンドルファイルはOnsen UIが持つ全てのコンポーネント、およびonsオブジェクトなどの内部機能を含んでいます。UMDバンドルは<script src="path/to/onsenui.js"></script>index.htmlに直接入れるというようなシンプルな状況では役に立ちます。

一方webpackRollupのようなバンドラーツールおよびビルドシステムを使用する場合は、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標準のimportexportを使用しています)。バンドラーを使うだけで十分です。ただしバンドラーにはモジュールファイルの場所を指定してください。

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;を実行してください(もしくは他のスコープでonsimportしてください)。

この際、onsenuiではなくonsenui/esmからonsをインポートするよう注意してください。間違えると、UMDバージョンのonsが読み込まれてしまい、Onsen UIの全てのコンポーネントが読み込まれてしまいます。

上記のコードはons-pageons-toolbarons-buttonons-navigatorをアプリに追加しています(他に必要な作業はありません)。なお、各コンポーネントは1回だけ読み込む必要がありますのでご注意ください(各コンポーネントはCustom Elements APIにグローバルに登録されるため)。

注意点として、ons.notificationユーティリティはons-alert-dialogons-toastに依存しているため、ons.notificationを呼ぶ場合はそれらのコンポーネントをインポートするようにしてください。

また、もしアプリがOnsenUIのほぼ全てのコンポーネントを必要とするような場合は、ES Modulesよりも効率的にminifyできるUMDバンドルの使用をお勧めします。

なぜこんなにも冗長(verbose)なのですか?

これはOnsen UIのES Modulesではtree shakingアルゴリズムが使えないためです。仮にtree shakingアルゴリズムを使おうとすると、以下のような短いコードになります:

import { page, toolbar, button, navigator } from 'onsenui/esm/elements'; // 動作しません!

上記は有効な構文ではありますが、tree shakingアルゴリズムが正しく動くことが必要条件となります(つまり、pagetoolbarbuttonnavigator以外のオブジェクトが正常にアプリから排除される必要があります)。しかし、現時点でのバンドラーのtree shakingアルゴリズムはObject.defineProperty(ES2015クラスをBabelでトランスパイルした際に生成されるコード)などの一部のトランスパイル済みコードをうまく扱えないため、正しく動きません。そのため、現時点でのOnsen UIのES Modulesでは、tree shakingアルゴリズムを使わずにpagetoolbarbuttonnavigatorなどの必要なオブジェクトを個別にimportする方が安全です。