Shrinking Onsen UI app size

[wetfeet]

Is there any optional stuff in Onsen UI library that can be removed/stripped from the www/lib/onsenui directory?

The smallest Android APK that I can get is about 3 to 4 MB. And that is the barebone app. My own code probably just add another few more kilobytes that’s all.

I opened up the APK and found that of the 4 Mb, 3.2 Mb are in the www/lib directory. The breakdown is as follows (compressed size, not the unpacked uncompressed version):

• angular (~660 Kb) - Not a big deal in my opinion
• onsenui (~2,600 Kb) - This is the biggest directory
  • js (~1,000 Kb) - Has both the minified and un-minified version.
  • css (~1,330 Kb) - Mostly in 3 fonts in various formats (.svg, ttf, otf, woff, woff2, eot)

Questions:

• Is it safe to remove the un-minified .js?
• Is it safe to remove any of the font, or certain font formats?
• I am not quite sure if the fonts (font_awesome, ionicons, material-design-iconic-font) and icons inside them are actually used. How do we check or know?

If I can shrink an average app down to 1 Mb to 2 Mb only like a native app, that will be great. But provided those are fats that can be trimmed safely without breaking anything.

[Fran Diox]

@wetfeet

Is it safe to remove the un-minified .js?

Sure, you just need them for development in order to have better errors. When you deploy you only need the minified files (also for Angular).

Is it safe to remove any of the font, or certain font formats?

Fonts usually provide many different formats for browser compatibility and compression. SVG is only for Safari and mobile Safari, EOT only for IE.

TTF/OTF is supported by most of the major browsers and versions but it’s bigger than WOFF.
WOFF is generally acceptable if you don’t target Android <=4.3 (without Crosswalk).
WOFF2 is more compressed but not very well supported in recent versions of mobile OS.

You can remove the fonts you don’t want by removing the files and the references in the corresponding css file (lib/onsenui/css/[iconPackName]/css/[iconPackName].css)

I am not quite sure if the fonts and icons inside them are actually used. How do we check or know?

Since version 2.4.0 I think you can completely remove Font-Awesome because it’s not a core dependency anymore (removing files and also the import in onsenui.css). However, the other two are right now used for the ons-back-button icon. You can simply search for font-family in Onsen UI repository and see where the fonts are used.

Hope it helps!

[wetfeet]

I am curious which Javascript and CSS minification tool is used?

• JSCompress
• Javascript Minifier
• Uglify
• Google Closure
• Minify

[Fran Diox]

@wetfeet UglifyJS

[Fran Diox]

@wetfeet Font Awesome dependency was removed in 2.4.0 and the other 2 icon pack dependencies will be removed in 2.5.0. The core uses SVG images instead of icons so you can freely remove the packs you don’t need :+1: