Angular Build File Size - Dev vs Prod
When you run ng build (or ng b for short) to build an Angular project, by default the cli will build for development mode. This is a bigger package with more error checking and messages, and is not minified.
When you deploy for real, you should use Production mode.
On your local machine, this is as easy as ng b --prod which is shorthand for ng build --configuration=production.
How does it affect file size?
I ran a development build and a production build on a small personal project.
Dev
$ ng b
Initial Chunk Files | Names | Size
vendor.js | vendor | 2.97 MB
polyfills.js | polyfills | 141.27 kB
main.js | main | 94.75 kB
styles.css | styles | 72.34 kB
runtime.js | runtime | 6.15 kB
| Initial Total | 3.28 MB
When I inspect the output within the dist folder, the folder size of the output is actually 6.53 MB (6.55 MB on disk).
The CLI output doesn’t name-drop every file it actually created. The discrepancy between 3.28 MB and 6.53 MB seems to be mostly .js.map files, which are for helping browser DevTools understand compiled JS sources… usually when the sources are minified… which these aren’t, so I’m not sure why they’re here!
Production
$ ng b --prod
Initial Chunk Files | Names | Size
main.3b47cea228f0ba630cea.js | main | 365.68 kB
styles.6236c9c45a2cce6e180f.css | styles | 71.25 kB
polyfills.bf99d438b005d57b2b31.js | polyfills | 36.00 kB
runtime.359d5ee4682f20e936e9.js | runtime | 1.45 kB
| Initial Total | 474.38 kB
Within the dist folder, the output is 493 KB (504 KB on disk) - much closer to the CLI’s quoted size - and that’s because we no longer have extra .js.map files and fewer files in general. For one example, vendor.js and main.js have now been compiled together into a compact and minified main.js.
Takeaway
I, like a noob, have been compiling my Angular sites on Netlify with ng build and it’s obvious that I should change the build command to ng b --prod because it will make the sites many times smaller!
In fact in this case, the prod file size here is 7.3% of the development version.
So I’m going to go and fix that now 😅
Merry Christmas and a Happy New Year. Well done for making it through 2020, and God bless you! 😁🎄