0

I am creating a new angular application and want to be able to load all project dependencies such as angular libraries, rxjs, moment-js, etc externally from a common location (CDN) in the production build.

Is there a way to configure angular project in so that the dependencies / dev-dependencies mentioned in package.json are not bundled within the production build generated using "ng build --configuration production", there-by resulting in a smaller bundle size?

I generated angular build by changing the dependencies to dev-dependencies, but that had not been fruitful. I did not find any related options in the angular command-line documentation. Multiple searches on the Internet including Stack Overflow for the same did not land me on related topics.

Prasanth
  • 1
  • 3
  • It makes your bundle smaller, but you actually download them too, so the total downloaded sources would be similar. Also, using dev-dependency has no effect on the bundle size. I don't think angular reads it when packaging. It only sees what are your imports in your components/modules. – Random Jul 09 '23 at 21:42
  • I believe you can ask angular-cli to make multiple bundles, in the angular.json. So if you ask to make a separate bundle for RxJs, then remove it from the index.html, and add your cdn in the index.js, it may do the trick. But you may have compatibility issue if the RxJs used in your app is not the same as your CDN (and you would have no warning while building). Is that a possible solution for you ? – Random Jul 09 '23 at 21:46
  • Thank you for the information. I am exploring at ways to reduce the overall cost on band-width and it occurred to me that we might be able to do it if multiple apps refer to the same shared libraries such as angular instead of bundling them separately with the apps. Considering that browsers cache the files, it might result in an overall reduction in bandwidth. Of course, it depends on how many requests are from browsers with cached files vs browsers without cached files (ex. new users). I wanted to try it out and gauge the metrics and so is this attempt... – Prasanth Jul 22 '23 at 14:49

1 Answers1

0

You can modify index.html to have them added in the head section.

<head>
  <script src="..." async defer></script>
</head>
msrumon
  • 1,250
  • 1
  • 10
  • 27
  • If you add RxJs (for instance) this way, Angular will still include it in the bundle, since you import it in your components. – Random Jul 09 '23 at 21:43
  • When you add libraries as external sources, you don't "import" it in your components. By the time the component gets initialized, the libraries are already available on global `window` object. – msrumon Jul 10 '23 at 17:24
  • but when you use `switchMap` in your component, you'd have to use `import { switchMap } from 'rxjs/operators` in the TS. Don't you ? This import will include switchMap's sourcecode into the main bundle. – Random Jul 11 '23 at 08:45
  • No. You import everything from the global `rxjs` object. Have a look at the [official guide](https://rxjs.dev/guide/importing#cdn). – msrumon Jul 11 '23 at 14:15
  • ok, that's the same trick than jquery then, ty – Random Jul 12 '23 at 20:44
  • Thank You. I know we can add a script tag to point to the angular files. But I was not sure about generating a angular build without including angular files in the build output... – Prasanth Jul 22 '23 at 14:52