Search code examples
angularjstypescriptwebpackes6-module-loader

Module bundling vs loading - serving only what is needed by the client

We have recently migrated over to using TypeScript in our Angular 1.x project and are using Webpack for our module bundling, allowing us to generate the concatenated version of our sources for including in our index.html page.

We have been careful to follow best practices when it comes to modularising our angular application, following the likes of John Papa's style guide, etc.

Something I have been pondering lately is the fact that all our angular feature modules get bundled in the final file that webpack creates for us.

Users that will login to the application will not necessarily be permitted to access all the features on offer based on their account permission settings (which we read in at the point of login). If a user can only access say 2 out of 5 features, then in their browser the source code downloaded will still include the entire set of features developed (yes we do uglify our source).

I have seen module loaders mentioned and wondered could these be used to only serve what the client needs as they navigate around the application?

So on loading the application, they would only get the core modules\features that are needed as minimum, e.g. get them to a home page with navigation, etc.

And then as they click into feature areas they have access to, could only those related module sources get pulled down and perhaps cached for revisits later on?

I realise this would ultimately be more network requests, but the initial load on first visit the application would be much quicker?

I'm fairly new to module bundling and loading, and I think I have a basic understanding of the differences. What approaches have others used out there when it comes to this sort of thing?

Thanks

Solution

  • I think you will not find one best answer. All you will hear: it depends.

    For example:

    • If you have an application full of modules that loads dynamically on the fly and initial loading time is crucial - go with systemjs/jspm.
    • If the responsiveness is absolutely critical - go with webpack.

    There are some nice comparisons/discussions on this issue: here, here, or here, and many more - but the bottom line is - you must evaluate and make informed decision yourself.