Angular 2 Production build file is large

Question

I have just created a new angular app using "ng new appName" and put in some buttons (from ng-bootstrap). I wanted to try to deploy to aws to check it out. However, when I run ng build --prod, the one of the dist file (vendor.a9e57aafdd6abc88b94a.bundle.map) generated is 7.7mb. Here is a screen shot of the files. What is the best way to resolve this issue so the user does not have to download that big of a file upon load?

Answer 1

You are showing the file size of a .map file. A mapping file is used to let for instance the browser development tools map your compiled javascript to separate typescript files, which makes debugging easier. You've build this with a slightly older version of angular-cli. If you do not want these sourcemaps just build with a --no-sourcemap option, or upgrade to the latest version, where --prod will automatically disable sourcemapping. This will also greatly increase build times.

For a production build you only need your index.html, the css and js files, and your assets folder (+ favicon). If you manage to set up your webserver even better to serve static gzip files, you can even just place the js.gz and css.gz files on your webserver, and these will be served, which will increase performance even more.

Your users will not download a sourcemap file, unless you place it there, and they open up their browser console. This will give them insight in how you build your app. This can be unwanted

Answer 2

How To Keep Angular Deployment Size Small :

Take a look at the structure of my project .

Home page size is 922kb . demo