New in Onsen UI 2.8: App size is much smaller than before!

From Onsen UI 2.8, the app size will be much smaller than before!

The new version of Onsen UI (2.8.x) was released some days ago with some interesting changes:

Bundle Size 50% Down!

Since v2.2.0 we have been refactoring all the code (class inheritance, etc.) in order to reduce the size of Onsen UI. Thanks to this, the size did not increment too much even though we were adding new components and features in every release. However, the overall size was still high.

In version 2.8, we have reduced the bundle size by more than 50%. From 657kB in 2.7.2 to 327kB in 2.8.0 (onsenui.min.js) . The main reason was switching the bundling tool from Webpack to Rollup. If you are creating a library, seriously consider Rollup for your project. Rich Harris and the community have made an incredible job!

Self-Contained ES Modules - Import Components Separately

Our Custom Elements and Vue Components are now self-contained (JS wise) and can be imported separately. This means that you can further reduce your app’s size by just importing the necessary components. It requires an environment that supports ES Modules (e.g. by using Webpack or Rollup) but it is not necessary to compile/transpile them (already provided in pure ES5).

Even though this was theoretically possible before, it relied on tree shaking algorithms to drop the non imported components. Based on some tests, these algorithms still struggle with features like Object.defineProperty (which is automatically added by ES2015 transpilers) and will end up bundling all the components instead. Therefore, let’s take tree shaking algorithms out of the equation for now and import the components we need manually.

For pure JavaScript projects, simply import the components from the new onsenui/esm directory:

// main.js
import ons from 'onsenui/esm'; // ons object
// Custom Elements
import 'onsenui/esm/elements/ons-page';
import 'onsenui/esm/elements/ons-toolbar';

The previous code imports the ons object and only two Custom Elements that will automatically be available as ons-page and ons-toolbar.

In Vue apps it is only necessary to import from vue-onsenui/esm (nothing from onsenui):

// main.js
import Vue from 'vue';
import VueOnsen from 'vue-onsenui/esm';
// Vue Components
import VOnsPage from 'vue-onsenui/esm/components/VOnsPage';
import VOnsToolbar from 'vue-onsenui/esm/components/VOnsToolbar';
Vue.use(VueOnsen); // Register $ons object in Vue's prototype
Vue.component(VOnsPage.name, VOnsPage); // Register component
Vue.component(VOnsToolbar.name, VOnsToolbar); // Register component

Since this can become a bit verbose if we import many components, the recommended way is to create a separate file which re-exports all the necessary components:

// vue-ons-components.js
export { default as VOnsPage } from 'vue-onsenui/esm/components/VOnsPage';
export { default as VOnsToolbar } from 'vue-onsenui/esm/components/VOnsToolbar';
export { default as VOnsButton } from 'vue-onsenui/esm/components/VOnsButton';

And then register all of them:

// main.js
// ... import Vue and VueOnsen
import * as VOns from './vue-ons-components.js';
Object.values(VOns).forEach(comp => Vue.component(comp.name, comp));

In addition, the Vue PWA template has also been updated to take advantage of these changes. You can start a new app by running:

vue init OnsenUI/vue-pwa-webpack myProject

Custom Icon Packs

Originally, Onsen UI used to bundle Font Awesome, Ionicons and Material Design Icons. These icon packs are not precisely small and chances are that you only need one or two of them (or even none) in your app. Since v2.8.0, it is possible to leave them out of your app by importing onsenui-core.css file instead of onsenui.css.

<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui-core.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">

You will need to import any custom icon pack that you want manually (e.g. Icomoon). Also, for custom icon packs you will need to call ons.disableIconAutoPrefix() in order to avoid adding fa- prefix automatically to your icons. More information here.

Conclusion

Even though there are no new components or visible features added in 2.8, we regard this as one of the most important releases. The app’s size (UI wise) has been halved while still maintaining the same functionality! We hope you enjoy these changes and share with us your thoughts.