Frontend assembly. How to collect only the files you need?

Question

gulp.js

For different pages of the site, you need to use a different set of css / js files (collect into one, minify and compress using gzip). As I understand it, gulp can do all this. But I have not seen anywhere that they showed how to collect a different set of files for different pages. I do NOT want to use extra css/js where they are not needed. For example, if there is a contact page, I want to have a final app.js on it that includes jquery, bootstrap and custom contacts.js , but I don’t want front.js to end up in the same file, which is decent in size and not related at all to the contact page.

Answer 1

Webpack is for you ( Screencast on it )
It allows you to divide applications into modules and collect them into one file including styles. It also allows you to divide the application into chunks, that is, the common one for all pages goes into the main assembly, and the rest into additional ones for each page separately or as you configure.
You can also translate ES6 to ES5 for correct work in browsers and so on.

Answer 2

It doesn't make sense. It is better for the client to download and cache one large 500kb file than one different file for each page. At the same time, on some pages the JS code will intersect (jquery, for example) and load 10 times for nothing.

Answer 3

And where does a person get to the contact page? From other pages of the site? Then what's the point of the operation?

Answer 4

I advise you to immediately load the entire working shell of the SPA application for all pages, and what will need to be loaded as pages with separate functionality are requested along with such modules (HTML + JS / CSS markup + JSON data).
This is done by organizing a tree URI router with client-side dependencies.
As a result - just get the division as you need: general (basic for everyone) and additional data (as needed).
I wrote includeHTML and am now gradually developing for myself to make it easier to manage modularity and load the necessary data without reloading the entire page.

Answer 5

Almost everyone advised to ship everything at once to the client at the first visit. Maybe from the point of view of users this is correct, but what about search engines? For such a site it will be worse to rank.