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
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
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.