Ionic-cli: Minifying the app.bundle.js and the css files automatically during ionic build

[adamdbradley]

_From @mhartington on January 18, 2016 23:27_

_From @krz37 on December 18, 2015 8:47_

Minifying the app.bundle.js and the css files automatically would drastically reduce de size and so the load of the JS and CSS files. HTML could also be included but I guess it needs a bit too much work compared to the outcome it would bring

_Copied from original issue: driftyco/ionic2#774_

_Copied from original issue: driftyco/ionic#5044_

[adamdbradley]

_From @mhartington on January 18, 2016 23:27_

_From @tlancina on December 18, 2015 18:39_

@krz37 so I'm not sure this is a good idea during development because it would take a significantly longer time to reminify the bundle on every single change. For a good idea of the time difference, compare the running time of webpack and webpack -p, and that is without CSS minification.

What if instead there was a production CLI option that you run when you are ready to deploy your app into production that would handle minifying all of your assets?

[adamdbradley]

_From @mhartington on January 18, 2016 23:27_

_From @krz37 on December 18, 2015 19:28_

@tlancina That's right yes. Do you think it could be included in the "ionic build --release android" for example? A CLI option could be very nice as well.
Another thing I noticed is that currently the JS is included 2 times in the APK. If I am not mistaking it is in the /build/app.bundle.js and all the .js written are kept in /app when you extract it.

[adamdbradley]

_From @mhartington on January 18, 2016 23:27_

_From @tlancina on December 18, 2015 19:37_

@krz37 ah sorry I see the issue was for build specifically. Yes I like the idea of doing it then, since the only time you would be using build is to release, if I understand it correctly (since run and emulate will compile for you automatically).

Regarding the code duplication, that should go away soon as we're most likely going to pull app out of www. You can take a look at https://github.com/driftyco/ionic-conference-app/issues/98 for more of the discussion there.

[adamdbradley]

_From @mhartington on January 18, 2016 23:27_

_From @krz37 on December 18, 2015 19:40_

Thank you

[adamdbradley]

_From @manucorporat on February 10, 2016 16:2_

One more step of the production build should be calling enableProdMode().

import {enableProdMode} from 'angular2/core';

enableProdMode();

[tonyawad88]

@adamdbradley Any chance we can have it minify during ionic serve? For desktop applications or for applications using non-ionic IDE / build system, ionic build won't be helpful ? Thanks.

[eithe]

For anyone else coming here, I had the same requirement as @adamdbradley, and I just add in minification manually when I am about to release my www folder to the web.

E.g. something like this for watch (ionic serve):

gulp.task('watch', ['clean'], function(done){
  runSequence(
    ['sass', 'html', 'fonts', 'scripts'],
    function(){
      gulpWatch('app/**/*.scss', function(){ gulp.start('sass'); });
      gulpWatch('app/**/*.html', function(){ gulp.start('html'); });
      buildBrowserify({
        watch: true,
        minify:true,
        uglifyOptions: {
          mangle: false
        }
      }).on('end', done);
    }
  );
});

[mhfen]

@adamdbradley Hi Adam - Do you have an update on this issue? Ionic 2 is nearing RC1, which means its nearing an initial release. The CLI should be ready for production deployments by then, right?

Gathering the info from this thread and from my own specific opinions / needs, here is what makes sense to me:

Minify JS and CSS assets on ionic build ios --release and the Android equivalent

Developers should not need this for serve, run or emulate since those are commands used while creating and debugging their apps. Adding it to those wouldn't be a bad thing with the --release flag, but not necessary for launch IMHO.

Call enableProdMode() behind the scenes when using ionic build ios --release and the Android equivalent

This would be helpful so developers don't need to add that call manually every time they want to prepare an app for publishing.

Update the CLI documentation with this information

I know the Ionic team is very busy and you guys do a great job with this Open Source software, but the documentation almost always lags behind where the project is significantly.

[jthoms1]

Thanks for opening the issue. It seems that issue has been resolved. I am going to close this issue but please feel free to reopen another issue if this occurs again.

[MikeyBeLike]

@jthoms1 where can I find information about how this issue was resolved?

[rsanchez]

@Lyricalz I believe the explanation is in the last few comments here: https://github.com/driftyco/ionic/issues/8551

[RamKinkar]

how could i deploy the code with minified images and fonts in reactjs