How to minify vendor.js on ng serve

I had observed the recompilation of angular projects using ng serve with Visual Studio Code. Vendor.js is not recompiled when you make changes to the project. It is only compiled during the first execution of ng serve.

If you wish to improve compile speed in development mode, you might want to consider implementing lazy loading. If lazy loading is implemented, whenever you make changes to a component, only that component's module is recompiled. This can greatly save compilation time in the long run.

This had happened to me in one of my first Angular projects (a school assignment). To cut the long story short, I had read about lazy-loading, implemented it to the admin dashboard module, but my friend refused to implement it to the user module because he would had to shift a lot of code around and restructure the project. As the project became bigger... it became evident how important lazy-loading can be...

First compilation: (I will explain a bit) manage-* modules are feature modules belonging to the admin module. Every component in the user-module: sidebar, navbar, filter, search, etc, all belongs to the user module, hence it's significantly larger, 3.46MB compared to admin and it's feature modules.

E.g. Commenting 3 lines of html in one of the component in user module recompiles the entire user-module and takes 5523ms. If I am running photoshop, or other memory intensive programs, it'd take much much longer!

E.g. Commenting 3 lines of html and recompiling a feature module in admin dashboard module takes < 1s:

I am still new to Angular but lesson learnt: do lazy-loading, it does saves user's bandwidth and your development time =]

The solution to your problem isn't exactly what you think it is, this is a common problem across all front-end frameworks and webpack builds.

Webpack provides an elegant solution to handle this. It's called hot module replacement. I.e. webpack will change your code and styles on the fly without requiring to reload the page. Angular needs a bit of customisation to set this up which is outlined step by step here.

https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/configure-hmr.md

I think you are facing this issue in the wrong way.

I understand you are redesigning an angular app and using ng serve to see your work realtime in the browser, but you are suffering of slow build time as vendor.js is rebuilt on each change.

The problem is not that vendor.js is big (always is) but that is been built on each change. As other answers mentioned, changes on application code should not (usually) trigger the rebuild of vendor.js. This indicates another problem, probably you are messing something with scss imports.

Also, using ng serve --prod probably won't solve your problem at all. Build times are higher than non optimized builds and I don't think you problem was solved by minifying code (Again your problem is on the build time).

In any case, if you want to go ahead with your original question and run the ng serve and have the vendor.js file minified, you will need to create a custom webpack configuration, have a look on these sites:

• https://dev.to/meltedspark/customizing-angular-cli-6-buildan-alternative-to-ng-eject-1oc4
• https://angular-guru.com/blog/angular-webpack

In this last site, you can find the webpack configuration which corresponds to vendor.js

Hope this helps, I would need more details to provide a better answer.

Firstly, why do you need it so badly? Yes, vendor.js will not be minified, but it will not be re-compiled on SCSS/view-level changes either, right? So, at the end of the exercise, the advantage you are going to receive is only about first-time loading a ~2MiB file vs an 8.9MiB file, which would be marginal since you can choose to enable the browser's BFcache (by NOT checking "Disable cache" under DevTools>Network)

If you must do it, I guess an approach would be to go with Hot Module Replacement for the Component's module you would be working on.

EDIT:

Personally, I find too many reloads for small visual HTML/CSS changes an overkill. Sometimes I "Inspect" the elements, and change the HTML/CSS via devTools and copy the HTML/CSS to a temp place. Then I make those 5-6 changes to the Components and save and reload to verify.

It's always a better practice to "Inspect" element and make the visual changes (like minor CSS style changes) and check how it looks then and there, instead of making those changes in your real code and waiting for a whole re-build cycle just to see a minor CSS change.

You can use lazy loading in your app to reduce the bundle size . It also increases the speed of the application .