## Sunday, 8 September 2019

### Building Angular apps with source maps and vendor chunk

Here is a quick tip about controlling the generation of source maps and vendor chunks in Angular 8 apps. Sourcemaps are built default in Angular according to the documentation @ https://angular.io/cli/build To be specific, the following command worked for me:


ng build --prod --sourceMap


In addition, the vendor chunk is now baked into the main chunk. To create a separate vendor chunk, run this: Angular 8 will put the vendor chunk into the main for optimizing the js code.
ng build --prod --sourceMap --vendor-chunk=true

In addition, it is recommended to analyze the bundle size with for example Webpack Bundle Analyzer like this:  npm install -g webpack-bundle-analyzer  Then add the following Npm run scripts to package.json:
    "buildwithstats": "ng b --sourceMap --prod --stats-json",
"analyze": "webpack-bundle-analyzer --port 9901 dist/stats.json",

Now we have an interactive TreeMap view we can zoom into and see what is taking up space in our bundle!