Hi guys just start playing with laravel 5.4 mix to improve performance , before used to include js files the old way without any minifications, so my question is : on every example I see that all the js scripts are minified into one app.js file and the file is included on every page is it really the right way? how do the "Pro" do that? I imagined the process like I minify js files for each page and the output will be like 'public/js/homepage/' , 'public/js/adminpage/' etc. or is it an overkill ? please enlighten me how do most "pro" guys do that, do they bother with page by page or do they just throw it into on app.js file?
how do the "Pro" do that?
Which Pro?
A site with a little js enhances, an over use makes for a mess sometimes. I like only using a little, popup calendar, popup lookup table etc.
Same with css, I custom write my own, and only load what's used per page.
Remember that the default setup in Laravel Mix is only a basic starting point. You are expected to change this to suit your project.
I imagined the process like I minify js files for each page and the output will be like 'public/js/homepage/' , 'public/js/adminpage/'
In most cases this is inefficient, because a lot of code is reused across different pages. It would be unusual for each page to have completely unique javascript.
On the other hand, it can be just as bad to throw everything into app.js. For example, let's say you have a website with a CMS for admins. You would not want to combine the CMS javascript (only needed by admins) with the public website javascript.
Generally the best approach is to combine your code into modules that can be reused across different pages. For some projects, this might just be one app.js module. For other projects, you might need more.
Depending on how often your javascript changes, you might want to separate your own code from any libraries (e.g. jQuery, Vue). Doing so means more HTTP requests, but better cache invalidation. This is increasingly recommended as HTTP2 becomes more widely used, because HTTP2 greatly reduces the cost of HTTP requests.
Please or to participate in this conversation.