javascript - multiple js files per request vs 1 js file with multiple unused lines of code? -

im building application nature has lot of flexibility , works on component system means page have 0-10's of components.

as pages coming database php code wont know components being used until after been compiled.

each component possibly have own set of js functions (im using vue js isnt pertinent question).

now im stuck thinking whats going best http/load point of view.

the choices have are:

1. create js file each component , selectively load each 1 when detect use (which means regex on content via php before displaying).

2. have 1 big js file containing components js , load 1 file.

3. have each component register js string through php , have dynamic url concatenate each used components js , send on page load

neither option "easier" 1 easier on js side requires more php detect , load files. , 2 can use gulp build main concatentated file. 3 easiest know sending js via php least performant of three.

option 1 mean 10's of http request of small files

option 2 1-2 http request larger file (in order of 10's)

option 2 possibly mean small percentage of js used (or none)

option 3 mean different js urls each page, more php compilation , less cacheability.

i can break down option 2 2 files (logged in js , logged out js) , load logged out , load logged in when user logged in help, , set serious caching on file.

so got opinions on whats route go down?

im leaning towards option 2 considering 1-2 requests , caching dont want built , rebuild if big pushbacks because wrong way (this open source project).

i know "test , see" likley response must stress project in stages , grow on time, there few components, there many in future need route thats going work based on 10's of components (i cant see going 100's if makes difference).

i may have confused few, question is:

load x number of js files per page based on pages component usage (only js used loaded)

or

load 1 file of js per page js file contains js if not used on page (file likley 10x larger individual file route)

the usual way go one/two files. don't sweat size, browser cache on first load , won't reload on each refresh. multiple files means multiple connections, , thats way slower