Performance Optimization, Is your application slower than a snail.

Posted By : Pushpinder Singh | 08-Dec-2021

Angular Application is way slower than it should be ?

 

Have you ever opened your network tab before loading an angular website, if not? Try it next time you encounter an angular project. Open console by ctrl+shift+I Head towards filters row and check JS in horizontal bar as shown in figure. Keep the tab open and try switching different routes/ components on your application and notice if there is any change ( addition of new JS file ) or not.

 

What Does this mean

 

So, the JS files you see in networks tab is the game of your angular's javascript module bundler ( webpack by default, other examples are : Closure Compiler, Browserify, Rollup etc. ). Your JS files transpiled as a result of bundler are the ones responsible for your events on browser (mouse events, keyboard events, media events, cookies etc.). Talking about the browser, they only understand Javascript so bundler is a need for Angular as it uses Typescript to enhance development experience from VanillaJS.

Glance at Webpack : 

While processing you application, it builds a Dependancy Graph and divides your application on the basis of code elements and non-code elements (Fonts, images, icons etc.). Hence creating entry points and blending every module your project as per requirement into one or more bundles, which are consistent assets to present your content from.

Core concepts of Webpack 

Entry : First module to begin building dependancy graph.

Output : Where to emit these files, default ./dist folder with file name ./dist/main.js

Loaders : Converting files other than Javascript or JSON into valid modules and hence into dependancy graph.

Plugins : Like the name says, Injection of environment variables, bundle optimization and assets management.

Mode : Amongst the three either Development, production or none you can control your built-in configurations for various environments. By default it is set only for production.

Browser Compatibility : All browser are supported except Internet Explorer versions lower than 8. In case you find any issues in your browser, you will need to load a pollyfill before accessing.  Webpack needs Promise for import() and require.ensure().

 

What Should be done ??

 

(Best option as per my view) We can control loading of an angular application's JS with 3 pre-provided ways i.e : 

1. Eager Loading : This one is by default loading style of an angular application under webpack. Here all modules are loaded simultaneously as soon as the application starts.

2. Lazy Loading :  This is a scenerio of on demand loading of modules.

3. Pre Loading : This is a scenerio where intially first module is loaded and application is good to go, But all other modules will be loaded after first module is loaded (Similar to .then(), .catch() and .finally() under promises of javascript. ) 

 

 

read more about Eager Loading, Lazy Loading, Pre Loading here.

About Author

Author Image
Pushpinder Singh

He loves to design new things and tries to bridge the gap between people's problems and solutions using his key skills in front end area.

Request for Proposal

Name is required

Comment is required

Sending message..