Скачать или смотреть 'ng build --dev' vs 'ng build --prod' || Angular 7 || Swapnil Thaware

Description of this video:

There are mainly 5 major differences -

Source Map(.map files)
Development build produces source map files whereas production builds not.

Source map files help us easily debug our application even after the files are compressed and compiled. It holds information about original files and can be used to map the code within a compressed file back to its position in source files.

So, we can easily debug our development build code. If you don’t want to generate source map with development build, then you can fire ng build --dev -sm false command and vise versa if you want to generate source map with production build set sm flag to true.

Extract CSS
In development build global styles are extracted to .js files whereas with production build they are extracted to .css files.

You can see this difference if you build your code with the development and production build. If you want to extract styles with .css in development build then you can fire ng build --dev -ec true where ec stands for extract CSS and vise versa to extract styles with .js in the production environment then set ec flag to false.

Minification and Uglification
Development build files are not minified and uglified, but production builds files are minified and uglified.

Minification is the process of removing excess whitespace, comments and optional tokens like curly brackets and semicolons.

Uglification is the process of transforming code to use short variable and function name.

Minification and uglification generally used to reduce the bundle size.

Tree Shaking
Development build files are not tree shaked, but production build files are.

Tree shaking is a process of removing any code that we are not actually using in our application from the final bundle.

So for example, you created a new component in your application, but you are not using or referencing(except App(or any other) module file) it anywhere in your application, then that new component files will be automatically removed from the main bundle in tree shaking process.

AOT(Ahead-Of-Time) Compilation
With development build files will be compiled with JIT compiler, but in the production build we get AOT compilation.

AOT compilation means angular component and templates are pre-compiled. So, when the user hits the application URL, they will get a response quickly. JIT compilation means angular component and templates are compiled in the browser at runtime. So, when the user hits the application URL, they will have to wait for the compilation process and then after they will get the results.

AOT compilation also reduces the vendor bundle size to smaller as it should not load compiler related files in vendor bundle as files are pre-compiled.

Another benefit of AOT compilation is, it gives template binding errors at build time itself.

=====================================================
Do reach out to me on
⋆ ✢ ✥ ✦ ✧ ❂ ❉ ✱ ✲ ✴ ✵ ✶ ✷ ✸ ❇ ✹ ✺ ✻ ✼ ❈ ✮ ✡

FACEBOOK:
  / swapnilgthaware  

INSTAGRAM:
  / swapnil_g_thaware  

GMAIL:
[email protected]

SKYPE:
swapnilgthaware

LinkedIN:
  / swapnilgthaware  

YOUTUBE :
   / swapnilthaware  

________________________________________________________________________