Performance
Source Map Explorer
The X-ray vision for your app. Stop guessing why your bundle is large. See exactly which library takes up how much space.
I once had a project that loaded extremely slowly. I had no idea why. The code looked clean. Only when I started the Source Map Explorer did I see it: A single import line had accidentally imported an entire chart library, even though I only wanted one icon.
This tool generates a Treemap. The bigger the box, the more space the code takes up. This makes optimization almost like a game: "Find the biggest box and make it smaller."
1. Bundle Visualizer
Simulate an analysis. Check out the "Bloated" status: Do you see how much space moment.js takes up? Switch to "Optimized" to see what happens when we replace it with a lighter alternative (e.g., date-fns).
Your actual application code
Huge legacy date library (unused locales included)
Angular Framework Core
Utility library (full import instead of tree-shakable)
Reactive Extensions
Shared Component Library
Analysis: moment.js takes up almost 35% of your bundle! Consider switching to date-fns.
2. Implementation
The tool evaluates the so-called Source Maps. These are files that map the minified machine code (`a.js`) back to your readable code.
Step 1: Installation
npm install --save-dev source-map-explorerStep 2: Enable Config
By default, source maps are disabled in the production build (to save bandwidth). For analysis, we need to enable them in the angular.json (or via CLI flag).
// angular.json
"configurations": {
"production": {
// Important: Without source maps, the tool only sees minified code
"sourceMap": true,
"namedChunks": true,
// ... other settings
}
}Step 3: The Analyze Command
Instead of searching for the path to the dist folder every time, I create a shortcut in the package.json. A command that builds and directly analyzes.
{
"scripts": {
"start": "ng serve",
"build": "ng build",
// One command for everything: Build & Analyze
"analyze": "ng build --source-map && npx source-map-explorer dist/my-app/browser/main-*.js"
}
}Lazy Loading Check: The explorer not only shows you the main.js, but also your lazy chunks. This is perfect for checking whether your admin module is truly cleanly separated from the rest or if code is "leaking".