Discussion on: what is main.js and main.js.map? and other stuff

All of these files are generated by a JS build system, and JS build systems are going to try to compress the code at least a little bit to remove unnecessary characters like comments and whitespace. Also, while this specific process is splitting the code into 5 separate JS source files, it's definitely the case that the full project is composed of many more JS files that are all imported together and then combined in the build process. If an error happens in main.js, our browser dev tools are going to provide some incredibly obscure details, likely that the error happened on line one (out of one) and potentially thousands of characters into that line. How are we supposed to know where in our pre-compiled code this error took place?

Well, that's what all the *.js.map files are for. They are used in development environments to tell our debuggers where our errors actually come from. Your built-in browser dev tools should automatically detect the map files, and when an error occurs they should report where in the original source files an error is happening, and if you step into the debugger you'll be able to see the original lines as well. In these days where we're all using build systems with front end frameworks, you can see how important this is for development.

As for what polyfills.js, runtime.js, styles.js, and vendor.js are, they're specifically configured with the build system so it's hard to say exactly what they are (although their names are pretty good clues). But basically the different source JS files are compiled into these separate built files depending on what they specifically do. I'd suggest you read this article on code splitting if you wanna know the benefits of doing this.