Here are listed some tips for reducing the size of Onsen UI apps.
Since v2.8.0 it is possible to remove default icon packs originally bundled inside Onsen UI (Font Awesome, Ionicons and Material Design icons). A new onsenui-core.css file is provided which can be included instead of onsenui.css (and their minified versions):
<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">
See also How can I use custom icon packs? section for related information.
Onsen UI core is distributed as a UMD bundle (Universal Module Definition). This bundle file contains every element provided in the library together with all the internals (ons object and the like). This is great for simple environments, i.e. directly dropping it in index.html as <script src="path/to/onsenui.js"></script>.
However, for users who already have a build system with a bundler tool such as Webpack or Rollup, since v2.8.0, Onsen UI is also provided as ES Modules. This means that every element becomes a separate and independent module that can be optionally imported. There are some common stuff that must be included as well (ons object and necessary interal logic) but, generally speaking, it is possible to leave out a bunch of non required elements and reduce the app’s size. Onsen UI components are already quite small but, especially for PWA, this could be a good plus.
All the modules are already transpiled to ES5 and use standard ES import and export. Therefore, there is no need to use any transpiler/compiler like Babel or Buble. Just tell the bundler where the files are located.
Assuming Onsen UI has been installed and is available in node_modules (or any other place as long as the bundler is aware of it), an example in ESM environment would be as follows:
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';
That’s it! Now a simplified version of ons which does not register any element by default is available in the current scope. It is not registered globally either in order to avoid global pollution, so just run window.ons = ons; if needed (or additionally include it in other scopes).
Make sure you import ons from onsenui/esm, not from onsenui. Otherwise, every element will be directly included.
The previous code adds ons-page, ons-toolbar, ons-button and ons-navigator to the app, there is no need to do anything else. Elements should only be included once (because they are globally registered as Custom Elements).
ons.notification utilities rely on ons-alert-dialog and ons-toast, so make sure these elements are imported once before calling ons.notification.
If the app requires almost every element in Onsen UI, the UMD bundle would still be preferred since it can be minified more efficiently.
Because, in this way, we do not relay on tree shaking algorithms. Otherwise:
import { page, toolbar, button, navigator } from 'onsenui/esm/elements'; // Does not work!
This is in fact a possible syntax but it relies on tree shaking algorithms to drop all the other components. Unfortunately, tree shaking algorithms don’t play well with some transpiled code like Object.defineProperty (generated by Babel when transpiling ES2015 classes). Therefore, it is safer to don’t rely on them for this purpose currently.