Angular Build Optimization | Part #4 | CDN
Increase your application speed approximately by 30%, without a single change in application code. Might be little surprising, But YES it's possible with the integration of some awesome tools!
One of the main requirements for any application is to perform well & fast for its users. For a given web application, the performance depends on a lot of factors such as output bundle composition, network parameters & available resources on the target machine. The size of the Bundle/JS & speed with which that gets to the browser is one of the parameters that can affect the performance in a significant way.
All the things explained in this article and the coming one have been tried with Angular 7 & 8, but should be pretty generic for later versions as well. Please feel free to share the feedback/queries if you get any.
I am planning this as a series of blogs to log all the experiments that will be carried out & the links can be found below. Before starting this, I would request you to go through my previous posts on the same thread linked below,
As shared above, we pretty much have covered how to build the code optimally with production build, build styles optimally for the app, transfer the code optimally with compression.
With all the optimizations done at code end, what happens when such apps are served over bad network routes, to geographically distant users & are served from a flaky server? All the goodness achieved by a developer is lost. This will not be an ideal, consistent experience for your users. So how can we ensure all the users experience a fast, secure & reliable service? Enter Content Delivery Network(CDN) which is designed specifically to solve all the issues of internet content delivery.
By definition, CDN is a set of geographically distributed servers that together enable fast, reliable & secure delivery of internet content including HTML, JS, CSS, Images, Videos, etc., CDNs perform exceptionally well for static content service.
CDNs consist of geographically distributed servers which are called Edge servers(or other names based on the service provider) which replicates the data to served to ensure high availability & low latency. With this design, respective of geographical location all the users can experience consistent load speeds & experience of the app.
How can Angular application leverage it?
As mentioned earlier, the CDN caches the content so it needs the source of data to be cached. Its called Origin Source. Origin source can be the server where an app is currently hosted or S3 bucket, Google Cloud Storage, etc.,
Configure the CDN service to fetch files from one of these origin servers. You can update your app/custom domain to serve files from CDN & done.
With CDN integration, we were able to observe ~30%-50% reduction in our download times of JS,CSS etc.., & our app load time improved by ~30%.
There are plenty of good documentation/blogs available on how to deploy your angular apps to different cloud providers. I tried on AWS with the help of below link,
For AWS:
https://firstclassjs.com/deploy-angular-application-to-aws-s3-and-cloudfront/
I Will keep this updated for other providers soon & if you find a link which you found helpful, please share!
