Multiple JS files per page

@sergiz You are making it unnecessarily complicated. Layout.js is needed in every view, so add it to your layout view.

pagea.js,pageb.js,pagec.js will be added in dedicated page views.

Now the only question remains is for a common.js. You have two option, either add it in the layout file or manually add it to only pagea.js and pageb.js only.

If you are using build toold for example webpack, then, merge common.js to pagea.js or pageb.js OR import functionalities in those scripts from common.js (if its a module).

Yeah, I guess I am. I checked the size, and all JS code I have (for all pages) is less than 100KB (non-minified).

I guess the best solution is to simply combine everything in one file? But how do I then make the JS code execute only on the page it needs to?

@sergiz The browser will execute all files you include on the web page. The only way to make this work correctly is by creating separate JS files. The question you should ask yourself is if this is worth all the trouble to load 100k less on the page.

You can use Laravel Mix to create multiple JS files. You just need to include in each file what you need per page.

mix
    .js('resources/js/app.js', 'public/js')
    .js('resources/js/pagea.js', 'public/js')
    .js('resources/js/pageb.js', 'public/js');

@sergiz This way you can import only those functions that you need. You need to decide whether it is worth it to break your head around this or just simply import all files :)

resources/js/common.js

function f1() {
  //
}

function f2() {
	//
}

module.exports = {
  f1: f1,
  f2: f2
};

resources/js/pagea.js

//importing only needed function
import f1 from './common.js'

//use it wherever you want

webpack.mix.js

mix.js('resources/js/pagea/js','public/js')

Thank you for all your inputs. I solved the problem using dynamic imports in webpack.