How to properly deal with optimization?

Question

JavaScript

Essence of a question in the following:
Single page application. There are several categories of users. Depending on the category, certain application components are available to the user. Now it happens like this:
1. The user logs in.
2. PHP generates html of the environment, and depending on the category of the user, it adds the necessary javascripts to the footer. This is preceded by includes of various libs that are always needed (jquery, backbone, bootstrap, etc.).
As a result, we have a very solid stack of inclusions. Badly!.
I began to look towards RequireJS and along with it Grunt. Tools are new to me, I need to learn.
It turned out to collect everything in one js file, everything is there, and the libraries that are constantly needed, and all the modules. But this is also somehow not entirely good, if only three modules are available to the user, why pull a dozen more?
What is the best way to deal with this situation? I would be extremely grateful for the most detailed answer :)

Answer 1

1. Generate different entry points (scripts) on RequireJS and compress them with R.js (instead of any concat)
or
2. If all modules weigh, for example, 100kb, and the case when there are only 3 modules will weigh about 50kb, it is better to compress everything into one file and leave it to the browser cache.
Other bikes are possible but I haven't used them