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.
$ 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!
$ 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
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,
main.js have now been compiled together into a compact and minified main.js.
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! 😁🎄