In this video we will discuss the differences between a development build and a production build in angular.
To generate a development build we can use either
ng build
OR
ng build –dev
To generate a production build we use
ng build –prod
Here are some of the differences between a development build and a production build in angular.
Source Maps : Development build generate Source Maps where as production build does not.
What are Source Maps
To improve the performance, the application’s JavaScript and CSS files are combined and compressed. It is extremely difficult to debug those compressed files. A source map holds information about the original files and can be used to map the code within a compressed file back to it’s original position in a source file. So with the help of these source maps we can easily debug our applications even after the the files are compressed and combined.
By default, a development build produce source maps where as a production build does not. However, we can change this default behaviour by using –sourcemaps option along with the ng build command. It’s alias is -sm.
The following command produces a development build without source maps as we have set -sm option to false
ng build –dev -sm false
On the other hand, if you want source maps along with your production build set -sm option to true as shown below.
ng build –prod -sm true
Extracts CSS : With the development build global styles are extracted to .js files where as with the production build they are extracted to .css files. To change this default behaviour use –extract-css option or it’s alias -ec with the ng build command.
The following command produces a development build with global styles extracted to .css file(s) instead of .js ones.
ng build –dev -ec true
Minification & Uglification : A Prod Build is both minified and uglified, where as a Dev Build is not.
What is Minification
The process of removing excess whitespace, comments, and optional tokens like curly brackets and semicolons is called Minification.
What is Uglification
The process of transforming code to use short variable and function names is called uglification.
The minified and uglified version of the file is smaller in size than the full version, resulting in faster response times and lower bandwidth costs.
If you look at the bundles generated by the prod build, you will notice that they are minified and uglified. Notice, extra whitespaces, comments, and optional tokens like curly brackets and semicolons are removed. Also notice, the code is transformed by using short variable and function names. On the other hand, the bundles generated by the dev build, are not minified and uglified.
Tree Shaking : A Prod build is Tree Shaked, where as a Dev build is not.
What is Tree Shaking
Tree shaking is the process of removing any code that we are not actually using in our application from the final bundle. It’s one of the most effective techniques to reduce the application size.
If you look at the bundles generated by the production build, they are significantly less in size compared with the bundles generated by the development build. This is beacause with the production build the code is tree shaked to remove dead code i.e the code that is not referenced by the application.
Ahead-of-Time (AOT) Compilation : With a production build we get AOT (Ahead-of-Time) compilation, i.e the Angular component templates are pre-compiled, where as with a development build they are not. We will discuss Ahead-of-Time compilation in detail in our next video.
The following table summarises the differences between a development build and a production build
Feature Development Build Production Build
Source Maps Yes No
Extracts CSS .js file .css file
Minifaction No Yes
Uglification No Yes
Tree Shaking No Yes
AOT No Yes
Text version of the video
Slides
Angular CLI Tutorial
Angular CLI Text articles & Slides
All Dot Net and SQL Server Tutorials in English
All Dot Net and SQL Server Tutorials in Arabic
