Angular dev build vs prod build

this is part 24 of angular CLI tutorial in this video well discuss some of the common differences between a development build and production build in angular in our previous videos in this series we discussed that to generate a development build we use this ng Pearl command you can also explicitly specify that we want a development build by using - - dev option if we want a production world we use - - prod option so let's discuss some of the common differences between a development build and a production well now by default a development build produces source Maps whereas a production world does not so the obvious question that comes to our mind is what are source Maps and why do we use them to improve the performance the applications 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 its original position in a source file so with the help of these source maps we can easily debug our application even after the files are compressed and combined so by default a dev build produces source Maps where as a production build does not but we can change this default behavior using the - SM option so with a dev well if you don't want source maps to be generated simply set this - as some option to false along the same lines if you want source maps with a production build you simply set that option to true let's try one of these commands so by default with a prod bail we don't get source Maps but let's say we want to generate source Maps with a broad bail all we have to do is set this SM option to true let's quickly look at this in action so ng pearl - - prod is going to generate a production bail and by default it doesn't generate source maps but we do want to generate those Maps so I'm going to use - SM option the it's an alias and it stands for source map so to set this to true so this command is going to generate a production build but it is also going to generate source Maps there we go our production build is completed and if we look at the distal de within our routing demo project folder notice along with the compressed and mini find bundles we also have their respective source map files generated as expected with the development build by default global styles are extracted to a dot JS file whereas with the prod build they're extracted to a dot CSS file we have just done a production well so if we look at that dist:4 de once again notice the global styles are present in a file that has got dot CSS extension so that's the default behavior with the prod world the global styles are extracted to a dot CSS file whereas with the development world they're extracted to a dot JS file we can change this default behavior if we want to by using this - EC alias EC stands for extract CSS now with a prod well we know by default they are extracted to a dot CSS file but if you don't want that default behavior use this option so let's say we want the global styles to be present in a dot GS file with a prod well to achieve that all we have to do is set this option to false so let's quickly look at that in action let's execute this build command once again but this time let's use this extract CSS option and set this to false so this is going to generate a prod bail but this time the global styles are going to be in a file with dot J's extension well completed now if we take another look with the test folder notice the Styles are present in a file with dot J's extension next we have minification and uglification a prod bail is both minified and a glyph ID whereas the dev bail is not first let's understand what both these terms mean so what is minification it's a process of removing excessive white spaces comments and any optional token like curly brackets and semicolons adla fication is the process of transforming code to use short variable and function names we use both these techniques to reduce the bundle sizes now to understand minification and uglification let's flip over to visual studio code we have our routing demo project here that's open the home component and with no home component class I'm going to introduce a function and there's a pretty straightforward function we named it add numbers as the name implies this is going to add two numbers the first parameter is called first number second parameter is called second number and this function returns a number that is the sum of those two numbers within the body we have created a constant which holds the sum of first and second number and finally we are returning that result and then I'm also going to introduce a comment here let's call this my constructor so let's save these changes and then let's do a build let's do a dev build first weld completed now let's go take another look at that dist folder this main bundle contains the code that we have written so let's open that with notepad and then search for our comment my constructor notice we still have our comment there and also notice the code is very much readable I didn't remove any of the white spaces and if you look at our add numbers function look at these parameters first number and second number they are not renamed and same is the case with this variable result it's not renamed as well so with a terrible we don't get minification and uglification but a better prod we do now let's do a prod bill and see how things are going to change but before that let's close this notepad and then let's go back to our console and execute this in jebel command but - - prod option there we go our production build is complete now let's take another look at that test folder let's open our main bundle file with notepad first of all notice the code here it's not very much readable because it has removed all the excessive white spaces let's see if we still have our comment my constructor notice we are not able to find a comment that means it has been removed and let's look at our add numbers function so here is our add numbers function look at the function parameters first number and second number are renamed to L and then respectively and within the function body notice we don't have our result variable at all it has rewritten that to return the sum of L and n that is our first number and second number so this proves that with the production build we get both minification and uglification next we have tree-shaking a prod build is tree shaked whereas a dev build is not so what do we mean by tree shaking it's the process of removing any code that we are not actually using within our application from the final bundle it's one of the most effective techniques to reduce our application size to understand tree shaking I'm going to create a new component so I'm going to slip to a command prompt window and then generate a new component so let's use this command ng G C let's name or component X X X our component is generated successfully now let's flip to visual studio code we have a component right here let's look at the view template of this component which is right here and there's the message that the view component displays xxx works at the moment we are not referencing this new component anywhere within our application first let's do a dev build bell complete now let's take another look at that test folder we have our main bundle here so let's open this with notepad one more time and let's search for this message ex ex ex works now we know there's a new component but we are not referencing it anywhere within our application but notice within the final bundle they still have that new component code right here we know a dev Bell is not reshaped so the code that we are not actually using within our application is still there in the final bundle now let's see how things are going to change with prod well let's do a production bills now let's close this notepad first and let's go back to the console and then do a prod well bailed complete now let's take another quick look at that main bundle here it is let's open it with notepad and let's search for that message once again xxx works notice we don't have that component at all so we know a prod Bell is tree-shaped meaning any code that you are not actually using within our application is removed from the final bundle there's one of the most effective techniques to reduce our application size next we have a ot ahead-of-time compilation with a production build we get a ot compliation that is the angular component templates are precompiled whereas for the development build they are not in our next video we'll discuss a ody compilation in detail finally let's quickly summarize the differences between a dev build and a prod bell with the dev build we get source Maps whereas with a prod world we don't with a dev build we don't have minification and uglification tree-shaking and ahead of time compilation with a broad belt we get all of those in our next video we'll discuss a OT in detail thank you for listening and have a great day

Channel: kudvenkat

Views: 46,104

Keywords: angular prod build generate source maps, angular cli source maps, ng build sourcemap, angular minification, angular uglify, angularjs uglification, angular 2 minification and bundling, angular tree shaking, angular cli tree shaking, angular 2 tree shaking, what is tree shaking in ngular, Angular dev build vs prod build

Id: GfeUrQ-xQN4

Length: 10min 45sec (645 seconds)

Published: Tue Nov 28 2017