07 A look at webpack bundle analyzer and source map explorer - prosoft-edv/newcomer-experience GitHub Wiki
After we updated Angular in the last step we will now take a brief look at two bundle size analysis tools. You generally use those bundle analyzers to see if the tree shaking and lazy loading works as expected. We will take a look at Webpack Bundle Analyzer and source-map-explorer.
Install the packages using npm install --save-dev webpack-bundle-analyzer source-map-explorer first. If you chose to continue with the provided solution in Step 2 the required packages have already been installed for you. Note that you need to use npm install in this case because you want to add them as dev dependencies.
To simplify usage in the future we will add some scripts to the package json.
"build:stats": "ng build --prod --source-map --stats-json"runs a build with production configuration, creates a source map and a stats.json."analyze-wba": "webpack-bundle-analyzer <stats_json_path>"runs webpack bundle analyzer. For this project, the path is "./dist/newcomer-experience/stats.json"."analyze-sme": "source-map-explorer <target_path>/*.js"runs source map explorer. For this project, the target path is "./dist/newcomer-experience".
You first need to run build:stats. After its completion you can start either of the analyzers using the respective command.
Both analyzers will display bundle sizes of the project in your browser. Source map explorer is recommended by the Angular devs as it is more accurate but webpack bundle analyzer shows more information and displays it in a more readable way.
The total size of this project should be around 840KB at this point. Almost all of it should come from installed dependencies. The project should be split into four bundles with the main bundle being the biggest one.
You should take a few moments to compare the results of both analyzers against each other. As a little task, you can try to find the Pokémon detail page. If you really want to spend some time with the analyzers you can try to find the list page. If you can find it in both of them please leave a message in this project. I couldn't.
If you want to see some changes in the bundling you can change the loading behavior of the list page to lazy loading and take a look at the bundle analyzers again.
You can see the changes we made in this commit.
This rounds up the introduction to bundle size analysis.. This tutorial continues with Step 8.