asp.net core docker Angular dev build vs prod build

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
http://csharp-video-tutorials.blogspo...

Slides
http://csharp-video-tutorials.blogspo...

Angular CLI Tutorial
https://www.youtube.com/watch?v=rJ9o4...

Angular CLI Text articles & Slides
http://csharp-video-tutorials.blogspo...

All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenka...

All Dot Net and SQL Server Tutorials in Arabic
https://www.youtube.com/c/KudvenkatAr...

asp.net core docker Angular dev build vs prod build
194 Likes	194 Dislikes
27,978 views views	524K followers
Science & Technology	Upload TimePublished on 28 Nov 2017

Related keywords

tutorialspoint,sql server management studio,tutorials dojo,central park 5,asp.net core github,craigslist nj,asp.net core 3,server status,server jobs nyc,asp.net core swagger,sql formatter,credit karma,services group,tutorials by hugo,mvc design pattern,server error in '/' application,servers for minecraft,asp.net core dependency injection,services windows,asp.net core 3.0,sql injection,tutorialspoint c#,services angular,calculator,sql insert,tutorialspoint tableau,services google play apk,sqlyog,asp.net core 3 release date,sql server,server job description,tutorials by a,servicenow,mvc hours,tutorialspoint python,sql join,services briefcase,asp.net core web api,craigslist ny,server pro,server status ffxiv,cheap flights,server memes,asp.net core hosting,services sas,sql date format,services online,chase,tutorialspoint java,serverless architecture,tutorialspoint java compiler,server resume,server books,tutorialspoint javascript,mvcc connect,services technologies gps,college football,server jobs,cvs,cnn,mvc tutorial,costco hours,tutorialspoint sql,server side rendering,tutorialspoint spring,serverless,sql server 2017,mvc nj,tutorialspoint spark,asp.net core download,cool math games,services & training hse colombia sas,servicestack,citibank,asp.net core identity,sql union,sql database,asp.net core logging,tutorialsystems,mvconnect,cunyfirst,services fms publish announcement,services.msc no abre,asp.net core razor pages,server duties,asp.net core environment variables,tutorials near me,server 2019,chernobyl,century 21,serverminer,services consultores,services consulting,mvcsd,mvcsc,services.msc,asp.net core configuration,sql like,sql update,mvc medical,asp.net core tutorial,sqlite,mvc architecture,mvc2,asp.net core mvc,server hosting,chase online,costco,server jobs near me,sql meaning,sql tutorial,capital one,server rack,sql commands,tutorialspoint html,craigslist,tutorialsteacher,tutorialspoint reactjs,asp.net core 2.2,services desk,tutorialspoint python 3,sql developer,services transmission company sas,sql group by,asp.net core signalr,services manager,mvc framework,mvc near me,mvc pattern,mvcu,tutorialspoint spring boot,asp.net core middleware,mvc map,sql between,services tag dell,mvc webadvisor,mvcc,mvci,mvctc,