0

I have an Angular project and it uses a bunch of Javascript Libraries, starting with jQuery, going through Modal Forms, Tooltips and many more, mostly from third party providers. The thing is that, even when my Angular website makes use of these Libraries, the Website does not make exactly FULL use of the complete Libraries, but at the moment of Building the Dist files, the styles.xx.css and main.js are quite big files containing all these Libraries and Styles inside.

So, I was thinking there must be a way to only include in the final Distribution, only the "actual" code that is used by the Website and not the complete Libraries that includes the used and unused code. There are many features in those Libraries that the Website actually does not use, but these are at the same time, big files that make it difficult to just get in there and remove code by hand.

If there would be some sort of Code Coverage test that I can run on the complete website, just to "mark" all the actual used code and remove/discard from Dist compilation, all the unused code, that would be just awesome. This would be no-doubt a very efficient way to put on diet the Production compilations on any website.

Anyone knows if something like this exists?

Joe Almore
  • 4,036
  • 9
  • 52
  • 77
  • 1
    Dead code should have been removed already if you use `ng build`, which default build with production configuration. You may find more information at [https://angular.io/cli/build](https://angular.io/cli/build) for optimization and production – Ricky Mo Nov 30 '21 at 04:15
  • And see [this post](https://stackoverflow.com/questions/46567781/angular-cli-output-how-to-analyze-bundle-files) for analyzing bundle size. – Ricky Mo Nov 30 '21 at 04:19

1 Answers1

1

You can certainly think of:

  1. Implementing Lazy loading -> Helps in reducing main file sizes and only chunks are produced with less size
  2. Go with modular architecture
  3. Import the package as provider for the particular modules
vsnikhilvs
  • 456
  • 1
  • 3
  • 10
  • Yes, these techniques actually help to improve the performance. However, I was more like looking to improve the efficiency of the overall load of the application by removing unused code. There is plenty of unused code which is being downloaded again and again by the Users and that makes no sense. Something must come up to solve this. – Joe Almore Nov 30 '21 at 03:24
  • https://stackoverflow.com/questions/46722701/is-there-a-way-to-remove-unused-imports-and-declarations-from-angular-2 Maybe this would help. – vsnikhilvs Dec 02 '21 at 01:47