Optimize file size by removing unused font files

Ionic Framework ionic-v3
1

I notice font files take up a significant portion of production apk file size (about 1MB). To my knowledge, only .woff is needed and the rest of the file types are for backward compatibility purpose. Would it be a good idea to optimize app script copy process for different platform? For example, android build would not copy noto-sans and non .woff ionicons file which could save about 700kB.

image
Screen-Shot-2017-02-04-at-11.14.52-AM.jpg800×441 53.3 KB

1 Like
2

In our case we use a different font and not any of the default which are copied and linked by the framework (roboto and noto-sans).
To remove these Ionic2 default fonts (except ionicons) and save about 12% of app bundle size do the following:

  • Add this to your package.json:
"config": {
  "ionic_copy": "./config/copy.config.js"
}
  • Create config/copy.config.js with the following content:
module.exports = {
  // overrides the default copyFonts task from node_modules/@ionic/app-scripts/config/copy.config.js
  // so that only ionicons are copied (and not roboto and noto-sans fonts)
  copyFonts: {
    src: ['{{ROOT}}/node_modules/ionicons/dist/fonts/**/ionicons*', '{{ROOT}}/node_modules/ionic-angular/fonts/**/ionicons*'],
    dest: '{{WWW}}/assets/fonts'
  }
}
  • Remove these two lines from src/theme/variables.scss:
@import "roboto";
@import "noto-sans";

_Side note_: If you want to override the default font you could set these variables in src/theme/variables.scss: $font-family-base: "SomeOtherFont"; $font-family-ios-base: "SomeOtherFont"; $font-family-md-base: "SomeOtherFont"; $font-family-wp-base: "SomeOtherFont";

Information on overriding the default behaviour of ionic-app-scripts tasks can be found it the documentation at https://github.com/driftyco/ionic-app-scripts#custom-configuration

6 Likes
3

This optimization is in new app script version.