One of the most significant ways to improve the load time of an angular application is to make the main-bundle file as small as possible. The main.bundle file constitutes a very big chunk of an angular application and is very essential as it contains vendor modules and all other code that is not lazy-loaded.
As an angular application grows and dependencies increase so does the main.bundle. A large main-bundle file means application load time is slowed down because of the following:
- Slower parsing and execution of JavaScript
- It takes longer to download the contents of the main-bundle
Today we will use Webpack-bundle-analyzer, a freely available tool, to analyze the bundle size of an angular application. Information from the bundle-size analysis will help you in making an informed decision in order to optimize application load time.
To get started, let us install the webpack-bundle-analyzer package globally via npm using the following command:
$ npm install webpack-bundle-analyzer -g
Once installed you can build the angular app for production and pass in --stats-json argument. Run the command:
$ ng build --prod --stats-json.
The command above builds the angular application for production and in addition create a stats.json file under the applications dist folder. The output should be similar to this:
Now you can run the webpack-bundle-analyzer to give you a report on the status of your main-bundle. To achieve this, simply run the following command.
$ npx webpack-bundle-analyzer dist/MwVotesGui
Where_ “dist/MwVotesGui”_ is the location of stats.json file as seen in the figure above.
Note: make sure to give the correct relative path of the stats.json file based on which folder you are running the command from.
The command above creates a report that looks similar to the one below.
#javascript #programming #coding #angular #front-end-development
