Skip to content
This repository has been archived by the owner on May 1, 2020. It is now read-only.

Futher optimize/cut CSS #1134

Closed
janpio opened this issue Jul 20, 2017 · 2 comments
Closed

Futher optimize/cut CSS #1134

janpio opened this issue Jul 20, 2017 · 2 comments

Comments

@janpio
Copy link

janpio commented Jul 20, 2017

Julien Renaux showed in his Optimized Ionic-Angular CSS Bundle for PWAs post how he removed 91% of the CSS for his app. He did this by:

  1. Change the mode of the app to one platform and filter out all CSS for the left out platforms: https://julienrenaux.fr/2017/07/20/optimized-ionic-angular-css-bundle-for-pwas/#Build_for_one_platform_only
  2. Removing Ionicons and getting rid of the associated CSS: https://julienrenaux.fr/2017/07/20/optimized-ionic-angular-css-bundle-for-pwas/#Remove_ionicons
  3. Removing CSS of components he doesn't use in his app: https://julienrenaux.fr/2017/07/20/optimized-ionic-angular-css-bundle-for-pwas/#Remove_CSS_that_you_do_not_use
  4. Using purify.css to get rid of even more CSS that is not used by his app: https://julienrenaux.fr/2017/07/20/optimized-ionic-angular-css-bundle-for-pwas/#Run_purify-css

I totally get that this cannot just be implemented in app-scripts as this has to follow after conscious decisions of the developer, but e.g. step 1 and 3 could (at least) partially be supported by app-scripts out of the box.

For PWAs this would make a real difference.

(Of course it would be a valid decision to say that this is out of scope and should be handled the way Julien did - manually)

@jgw96
Copy link
Contributor

jgw96 commented Jul 20, 2017

Hello @janpio , thanks for opening an issue with us. I agree that Julien's setup and his results are pretty awesome, but the cool thing is with some of the new stuff we have coming on the framework side of things, this issue is going to be solved without having to do any of the build magic that Julien was doing. In a future release of Ionic-Angular every component will lazy load only the css needed at that time. So if its on an Android device or on the web as a PWA it will only lazy-load the css needed for MD mode, and none of the other mode's css will get loaded. Also, as i said, its going to be lazy loaded per component, so you are only ever loading the css needed specifically for the components on that page. So, while this is a very cool setup, in the near future it will not be needed anymore.

@jgw96 jgw96 closed this as completed Jul 20, 2017
@janpio
Copy link
Author

janpio commented Jul 20, 2017

Even better. Thanks for the update.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants