In this tutorials 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 behavior 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 white space, 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 white spaces, 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 because 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 summaries the differences between a development build and a production build
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 behavior 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 white space, 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 white spaces, 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 because 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 summaries 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 |
2 comments
commentsNice Post. I like your blog. Thanks for Sharing.
ReplyWeb Development Institute in Noida
ReplyGood day. I was impressed with your article. Keep it up . You can also visit my site if you have time. Thank you and Bless you always.
Hire Angularjs Developer in India