CODEWITHSUNDEEP
angularwebpack
House M.D.
House M.D.

Reputation: 51

Separate Angular modules to different bundles

In my case I need separate main bundle.

I need each module to build into its own bundle. I have a very large application, with a lot of code. I do not want, that at the slightest change, patch or hotfix users pumped the entire application again. This is the first long, in the second creates a load on the server. I use the serviceworker in my application and all its resources are cached on the client side.

I need to be able to transfer only the popup.bundle.js file when changes are made to pop-ups module. And with changes in the controls module, only the controls.bundle.js file were transferred. I do not need a lazy load. I just need to make sure that each module is going to its bundle and that's it.

Upvotes: 2

Views: 1941

Answers (1)

G. Stoynev
G. Stoynev

Reputation: 7783

If you haven't done it already, group the components you want to bundle in discrete modules, say popup.module and controls.module. Once you have them, tell webpack that you want them bundled individually: 

// in angular.json, under projects/{your project}/architect/build/options, add
"lazyModules": ["src/app/popup/popup.module", "src/app/controls/controls.module"]

You could also couple that technique with Angular Elements for event greater separation.

Upvotes: 1

Related Questions