When we started to work with ionic, we quickly realized that the
./www folder quickly started to contain files that had no business being in the packaged app. We also wanted to add some additional features to the build process that are not present today. Namely eliminating unnecessary changes to the git repo.
These changes have lead to our
./www folder going from 55.6MB down to 3.8MB, and the packaged app gone from 12.49MB to 2,77MB!
Before we begin, you can get the code here
We moved the
./vendor, thus removing all the bower vendor files from the packaged app, like uncompiled ionic scss files etc.
I also prefer a per feature structure of my app, so all the different features of the angular app are contained in their own directory inside
All files are concatenated and minified via uglify. Source maps are saved for easier debugging.
- App files are annotated with ngAnnotate before minification. At the moment ionic js throws errors if run threw ngAnnotate, so they are skipped, (Probably already annotated)
- All HTML files used for templates are suffixed with
.tpl.htmland those then get compiled into angular template cache at build time, for faster performance.
- All gulp tasks include a in-memory cache for faster parsing when files gets updated.
./www directory now contain the following:
index.htmlthat won’t change every time a js file is added or removed.
- New files get automatically added to the app without having to manually link/InjectJS them into
New file and folder structure:
|- src | |- <feature folder> | | |- featureCtrl.js | | |- feature.tpl.html | |- app.js |- vendor | |- <Bower packages> |-www |- assets | |- fonts | |- <font files> |- css | |- ionic.app.css |- js | |- all.min.js | |- templates.min.js | |- vendor.min.js |- maps | |- <Sourcemap files> |- index.html
- Add unit tests
- improve font copy task to be more ubiquitous.
Comments and ideas on improvements are most welcome