How to reduce app size in Ionic2? - ionic-framework

I am new to Ionic, recently I developed One app.But my app size was 8mb.
How should I reduce app size,and I am not using any Images and plugins also, but it took 8mb size. please help me.

For production builds you can use ionic cordova build [android/ios] --prod --release. This can reduced the size of your application.
The prod and release flags will minify code and remove debugging utilities.
Documentation: https://ionicframework.com/docs/intro/deploying/#production-builds

You can use one of $ ionic cordova build options
--no-build - Do not invoke an Ionic build
--prod - Build the application for production
--aot - Perform ahead-of-time compilation for this build
--minifyjs - Minify JS for this build
--minifycss - Minify CSS for this build
--optimizejs - Perform JS optimizations for this build
...
For example: ionic cordova build android --prod --aot

Related

how to do prod build in ionic capacitor

In ionic 4, how to do a release aka prod build?
The angular part can be build in prod mode by ionic build --prod
Now how to copy this build to android? If I do ionic capacitor run android it will do normal build first and then copy assets to android. But I want to build in prod mode and take assets to android.
(I know how to generate apk in Android studio)
After doing
ionic build --prod
Assuming you have already installed Capacitor, otherwise you can follow this and thereafter,
You can do the following
npx cap copy android
Which copies the built code to android folder.
Then you can do
npx cap open android
Which opens android studio if you havent opened it already, then you should go to Build -> Generate Signed Bundle / APK option and the rest is quite straightforward.
More info can be found here
You can use the simple way.
ionic capacitor build android --prod
after the command, the android studio will open automatic
Development:
android stdio: Build-> Build Bundle(s)/APK(s)->Build APk(s)
Production: android stdio: Build-> Generate Signed Bundle(s)/APK(s)-> Android App Bundle or APk-> release

How to make a prod build in "Ionic upload" command?

I want to use Ionic deploy service in Ionic cloud.
When I run ionic upload command, a dev build is immediately triggered instead of prod build.
Is it possible to create a --prod build and upload?
One of major reasons is that multiple configurations in my code are bundled with --prod build only.
ionic upload --deploy=dev
[INFO] Running app-scripts build:
[09:55:59] build dev started ...
[09:55:59] clean started ...
[09:55:59] clean finished in 1 ms
You could pipe the npm scripts to run the ionic --prod first and then ionic upload
"scripts":{
"custom-upload":"ionic cordova build --prod | ionic upload"
}
and then run in the terminal
$: npm custom-upload
This will still run the dev build i think but your prod build should be packaged as well. It does not look like you can specify a build type in the ionic upload command, which makes me think that the ionic upload does not upload the production build to ionic view. And if that is that case then you might want to consider changing the configurations setup in a prod build to be set to only be used if not on localhost instead on based on the build.

Ionic 2 Android Production Build loads very slow

I have finished my Ionic 2 App for Android.
For testing I generated my builds with:
cordova build android
These APKs work but the device ready event takes quite a while to fire. No problem.
No I build the productions APK:
cordova build --release android
And the device ready event still happens only after a few seconds. I hoped that this would not be the case in the production version.
ionic run android --prod
This creates a build for debugging and in this build the device ready events fire very fast. But the build is called app-debug.apk.
How can I build a production build that loads fast?
For production (the --prod uses aot which makes load time faster). Also make sure to use ionic middleware instead of cordova
ionic build --release --prod android
To debug in aot:
ionic run android --aot

Tasks for production prepared Ionic app

I'm trying to figure out what's the best process to pass from the code to the final deployable apk/ipa.
So far I have a testsuite using Karma + Jasmine, which transpiles the TypeScript to JS and runs some unit tests. I start that process via gulp.
After that all I know is to ionic build android --release what generates (an unsigned yet) apk.
But I'm not sure of how ofuscated/minificated the generated apk is.
So, keeping in mind the code has to be as private as possible, is the minification and the ofuscation of the ionic build enough or should I do all those prebuild tasks manually via gulp?
And in that case, whats are the right tasks I should run, do I have to transpile all the TypeScript files to JS manually? and in what order should I run the tasks?
E.g. transpile -> tests -> minify -> uglify -> build apk or minify -> uglify -> transpile -> tests -> build apk
I'm a bit lost with this, and the only thing I can figure out is that the tests should be ran first, because is case of test failure the process should be aborted.
Try ionic-app-scripts >= 0.0.48 to config build.
Production:
ionic build android --prod
To check the minified file, open the apk file with GNOME Archive Manager (or similiar) and extract /assets/www/build/js/app.bundle.js file.
Preparing an Ionic Cordova app for release in production
1. Building
In your terminal execute the following command according to your platform (android / ios):
ionic build android --prod --release
2. Releasing
In order to be able to install a production application on a device and furthermore in order to be able to publish it in app stores, your .apk or .ipa
file needs to be signed. How you do that depends on the platform.
Here is the procedure in detail for Android and for iOS.
Preparing an Ionic Progressive Web App (PWA) for release in production
1. Building
In your package.json file, you should make sure to have something like the following:
"scripts": {
// ...
"build:www": "rm -rf www && ionic-app-scripts build --prod",
// ...
},
Now in your terminal run:
npm run build:www
2. Releasing
Your app is built in the folder www ready for you to serve in production using any webserver like NginX, Apache or a custom Node + Express webserver.
Valid as of Ionic v3.3
Learn more about ionic-scripts, what they do and which other scripts you could possibly find useful.

Ionic: How to uglify and minify my code before release?

I am getting ready to release my first app build in ionic. I am interested in how I can minify and uglify my code? Are there any plugins for that?
Thanks
uksz
Running ionic build --prod did the trick for me. I am using ionic to deploy my app as a website.
Using ionic cordova build <platform> --prod --release will create you a release version of the app with the code uglyfied and minified.
Also running a simple ionic cordova build <platform> will also do the job. The minified and uglyfied js is located on the www folder as main.js
Take in count that what minifies and uglyfies the source code is ionic-app-scripts.
There is an automated task runner for JavaScript called Gulp ( gulp.js ). It has packages like:
gulp-minify-css and gulp-uglify
Hope it helps.