Originally published at: https://ionicframework.com/blog/5-tips-to-improve-ionic-angular-app-performance/
Everyone knows that building performant web apps is critical for retaining happy users. However, with the constant influx of bugs to fix and new features to build, this is easier said than done. Fortunately, there are several steps you can take to improve your Angular app’s performance substantially. Recently, Stephen Fluin from the Angular team…
2 Likes
Hey folks! We’re trying out a new commenting system that integrates the Ionic Forum with the Ionic Blog.
If you have any questions or comments regarding Angular App Performance, be sure to ask them
3 Likes
Great Article, but my limited knowledge of the stuff I am building on top of is tough to discern much.
My source map is showing two ES options (ES5 and ES2015) in the dropdown ~700k each for a total of 1.4mb. Is that two separate builds resulting in two separate packages that could be released or is that two separate builds that are one package total (and thus my app essentially has duplicate files and 2x the size)?
If it is the duplicate option, then how do i go about removing the older version?
I think the double builds is for support to various browser version
In the end the browser decides which bundle to pick up
If u monitor in devtools the actually load of files (network tab) u can see only one part of the bundle being picked up
The extra build TIME is the price you pay for diversity in browser landscape - not necessarily the build SIZE (unless your hosting party allows only 1mb - fairly unlikely)
5 Tips to Improve Ionic Angular App Performance for today business
1. Lazy Loading: By lazy loading, you can delay the loading of pages that are not immediately needed, which can improve the initial load time of your app. This can be achieved by using Angular’s built-in lazy loading feature.
2. Minimizing the use of Third-Party Libraries: Third-party libraries can slow down your app, so try to minimize their use. Only use libraries that are absolutely necessary for your app’s functionality.
3. Optimize Images: Large images can slow down your app, so make sure to optimize them before using them in your app. This can be achieved by compressing the images or using a web app that optimizes the images.
4. Use AOT Compilation: Ahead-of-Time (AOT) compilation can improve the performance of your app by compiling your app’s components and modules at build time, rather than at runtime.
5. Use Angular CLI’s production builds: Angular CLI provides a production build command that can optimize your app’s performance by minifying the code and removing any unnecessary comments and debugging code.
By following these tips, you can improve the performance of your Ionic Angular app and provide a better user experience for your users.