Skip to main content

Differential Loading in Angular


Differential Loading in Angular


Angular is a complete javascript framework with many inbuilt features like routing, dependency injection, form validation but the downside is the application bundle size. In order to overcome this issue, Angular 8 introduces the concept of differential loading.


Until angular 7 versions, when we do an ng build command, the typescript files are converted into js files that can support both modern and old browsers. Since the build bundle should contain js files for new and old browsers, this results in huge bundle sizes.


With angular 8 Differential loading, when we do an ng build two different bundles are created one for modern browsers (supports recent syntax changes in JavaScript such as arrow functions in ES2015 or async functions in ES2017) and other for older browsers (es5 ex. IE)


When the app is deployed, both the bundles get deployed and based on the browser the clients opens the app from, the specific bundle gets loaded by the browser


Basically, Differential loading means to send newer, flashier code to modern browsers and stable legacy code to older browsers since old browsers need both transpiled code and more polyfills to make things work and newer browsers are not affected by the huge bundle size.



For implementation, please refer this link - https://morioh.com/p/84a11d8e60bc
Labels:

Comments

Post a Comment

Popular posts from this blog

How to clear Visual Studio Cache

How to clear visual studio cache Many times, during development you would face situations where project references are not loaded properly or you get missing/error DLL's. This is because the Component cache gets corrupted randomly and without any warnings. The first option that needs to be done is to clear component cache and restart Visual Studio since the Cache might be holding onto previous DLL versions. Here are the steps on how to clear Visual Studio Cache, Clearing Component Cache: Close all Visual Studio Instances running in your machine. Also, make sure devenv.exe is not running in the Task Manager Delete the Component cache directory - %USERPROFILE%\AppData\Local\Microsoft\VisualStudio\1x.0\ComponentModelCache Restart Visual Studio The above steps should fix the cache issue most of the times, but some times that is not enough and you need to perform the below steps as well. Clearing User's Temp Folder: Open the temp folder in this locatio n -  %USERPROFILE%\AppData\Loc
231 comments
Read more

How to dependency inject to static class

.Net core supports dependency injection. There are many ways that you can inject services like constructor injection, action method injection, property injection. But there will be scenarios where you need to inject dependency services to static classes. For example, injecting services to extension methods. First, create a static class with a one property IServiceProvider type public void ConfigureServices(IServiceCollection services) { services.AddScoped<ILoggerEntry, LoggerEntry>(); services.AddTransient<IMongoRepository, MongoRepository>(); } Second, configure your services in ConfigureServices() method in Startup.cs and define the lifetime of the service instance using either Transient, Scoped or Singleton types. public void ConfigureServices(IServiceCollection services) { services.AddScoped<ILoggerEntry, LoggerEntry>(); services.AddTransient<IMongoRepository, MongoRepository>(); } For the next step to configure the Static class provider proper
Post a Comment
Read more

PCF Health Check Delay - Invocation timeout

In PCF we can set up the health check invocation timeout to execute X seconds after the instance has been created.  But before that, let's understand the PCF Health Check Lifecycle. Stage 1: The application is deployed to PCF Stage 2: When deploying the app, a health check type is specified and optionally a timeout. If a health check type is not specified, then the monitoring process defaults to a port health check Stage 3: Cloud Controller stages, starts, and runs the application Stage 4: Based on the type specified for the app, Cloud Controller configures a health check    that runs periodically for each app instance Stage 5: When Diego starts an app instance, the app health check runs every two seconds until a response indicates that the app instance is healthy or until the health check timeout elapses. The 2-seconds health check interval is not configurable Stage 6: When an app instance becomes healthy, its route is advertised, if applicable.                  Subsequent hea
1 comment
Read more