If you’ve ever built an Angular Application before, keeping your build lean and quick is key. With a labyrinth of configuration options and an endless sea of third-party libraries to use, it’s very easy to increase the time it takes to build your application if left unchecked. Even more so if you work on a large team where developers are working in parallel. So how can we get ahead of this potential pitfall so your build remains performant?
One great way is to use the webpack bundle analyzer tool. This tool takes in a stats file generated from the Angular CLI and provides an interactive FoamTree. The benefit here is to quickly identify problem areas where unnecessary files may be included in your application’s distribution. Let’s take a look at how to do this.
Step 1
First we need to install the webpack-bundle-analyzer package and save it to our package.json. We can do this with the below command.
npm install webpack-bundle-analyze --save-devStep 2
Now that the analyzer tool is installed, we need to generate a build of our application with the stats file. Run the below to generate a production build with the stats file.
ng build --prod --stats-json
Step 3
With the generated build, you can check your dist folder and see the generated stats.json file that was created. That’s the file we are going to hand to the analyzer to visualize for us.
npx webpack-bundle-analyzer dist/stats.json
This will boot up a local server on port 8888 with our FoamTree. When you hit the site it may feel a bit overwhelming with how many files are included in your bundle, but you’ll certainly find some weasels in there that could give your application a little boost. It’s that easy folks! More Angular tips and tricks to come; stay tuned!
About Rōnin Consulting – Rōnin Consulting provides software engineering and systems integration services for healthcare, financial services, distribution, technology, and other business lines. Services include custom software development and architecture, cloud and hybrid implementations, business analysis, data analysis, and project management for a range of clients from the Fortune 500 to rapidly evolving startups. For more information, please visit our website.
