Should styles be collected in 1 file or split into several when connecting to different HTML documents?

Y

Yuri Kalnin2018-07-17 07:09:04

Layout

Yuri Kalnin, 2018-07-17 07:09:04

On the site , the pages are presented in the form of landings,
I divided each landing into blocks and each block has: its own html, its own less and its own js
for example:
block-offer.html
block-offer.less
block-offer.js
then with the power of gulp I this is all I collect
, it turns out such a structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

   <link rel="stylesheet" href="lending.dist.css">

</head>
<body>
  
  тут html

    <script src="lending.dist.js"></script>
</body>
</html>

Each landing page compiles its own script and style file. The question is, is it good?
i.e. if you collect all the styles and scripts of all blocks in one file, their size will turn out to be very large, but the user will only need to load these resources once, then they will be taken from the cache.
now the user will navigate through the pages and every time he enters the page he will load styles and js
I'm interested in your opinion. What is really the best thing to do. Either load 2MB js + css once and then take it from the cache, or is it better to load 10 times 800KB each and then it will also be in the cache?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

S

Sergey delphinpro, 2018-07-17
@delphinpro

For landing, it is advisable to connect a separate style file, due to the purpose of the page itself - usually the visitor must perform an action directly on it, and not walk further.