0

I have 4 types of js file and here are the list:

bookmark.js, status.js, auth.js and photo.js

Question:

Should i load the js only for specific page or i will compile everything into 1 js?

Does affect loading webpage if i use specific js for each page?

ATG
  • 1,090
  • 10
  • 12
  • It's based on what you want – Garfield Dec 29 '16 at 14:05
  • 1
    For development you should keep them separate. For production using build tool join them so there is only one http request for entire js file can be a solution. All js are used on all page? – avck Dec 29 '16 at 14:07
  • It's usually better to only load what you need. – Hartesic Dec 29 '16 at 14:07
  • as for development yes. i usually do that but im talking with the production. – ATG Dec 29 '16 at 14:09
  • Even MB sized Js files does not create performance issues. You can combine them & use it. – Garfield Dec 29 '16 at 14:09
  • for css there is post in SO that we need to compile 1 css for whole website but what about the js? @LonelyPlanet do you have basis for answer? – ATG Dec 29 '16 at 14:11
  • @avck this is an example. each page use 1 js only. – ATG Dec 29 '16 at 14:15
  • Having a single file is easier than including multiple Js files, and you can have a less care on managing js files. I have 4MB sized file & it was served in GZIP by apache(50% reduced size). – Garfield Dec 29 '16 at 14:16
  • In that case do not merge them. they are at their optimal best. Just minify all of them. – avck Dec 29 '16 at 14:19

3 Answers3

1

So, it depends, exactly in what you're looking for.

In case you're looking for loading speed, I think the best solution is keep them separated, it will allow the browser to load more than one js file asyncronusly.

But, if you need to have smartest code you should keep them in one single file, trying to reduce it more and more.

Remember that you should only think about this on your production code, absolutely is better to have different file working on them.

As you can see if you try the first approach you'll be more fast on page load. An example is a web application who need to load big amount of js files.

loading 3 file of 1MB will be always more fast that loading a single one of 3MB because they will start their loading in the same time.

Another approach is to load js files when your page requires them, but remember that in this case, if you have big js files, the client will see a lot of loadings during his surf on the website your working on.

Here you can read more about js file managment

Community
  • 1
  • 1
LellisMoon
  • 4,810
  • 2
  • 12
  • 24
0

Are you using any JavaScript front-end framework like AngularJS? If you really only want to include the required JS files you can do that.

Gurdev Singh
  • 1,996
  • 13
  • 11
0

In case all html pages use separate javascript files, its better to keep them separate. Based on users action they will be cached on browser end.

To optimize load time you can do the following

  1. Use async inside your script tags so its not blocking rest of the page and,
  2. Use javascript minification on all of them this will reduce the size of the file and reduce the http payload.
avck
  • 3,535
  • 3
  • 26
  • 38