1

I have some libraries (like semantic ui, jquery...) that I usually load separately in my <HEAD> tag directly from a CDN, each library with its own <SCRIPT> tag.

I then tried opening the contents of each JS file, copied each one and appened each content to a local single blank JS file. Then I imported this single file in my project. Ok, it worked fine and no errors on console. BUT somethings are not working.

Checking the NETWORK tab of Chrome Dev Tools I discovred that those libraries also try to download many css/image files dynamicaly. The browser tries to download those resources from my local domain, instead of the CDN - of course. So I would have to move all those files to my local server too.

But my question is this: is there anyway I can use something similar to the BASE tag, but to scripts?

For example, my single.js would be like this:

base_download = 'cdnjs.cloudflare.com';
//HERE COMES THE CONTENT OF JQUERY LIBRARY
//...

base_download = 'cdn.jsdelivr.com';
//HERE COMES THE CONTENT OF SEMANTIC UI LIBRARY
//...

base_download = 'cdnjs.cloudflare.com';
//HERE COMES THE CONTENT OF THE ANIMATE JS LIBRARY
//...

So the browser would know correctly where to download the content that each js code requests.

If I was not clear I say sorry and I am here to clarify whatever you need!

amandanovaes
  • 694
  • 2
  • 7
  • 20
  • Look here: https://stackoverflow.com/q/950087/6588498 – Rohit Sharma Aug 31 '18 at 18:31
  • What benefit do you think joining these files brings? I think that you may be trying to overcome an issue that CDN's don't actually have. It is a **good** thing that these scripts are separate and that each is an individual query. It is not a problem for **your** server, it is a problem for the CDN server since it is serving those resources. – zero298 Aug 31 '18 at 18:31
  • @zero298 downloading a single file is way faster than downloading 10 individual JS files for 10 different libraries. For each library the browser has to initiate a request, domain resolution and so on. Joining JS files make it load much faster and also PageSpeed Insights give you much better score when importing less JS files. – amandanovaes Aug 31 '18 at 18:35
  • @Rohit Sharma what you said is not related to my question! I want to join all files together. – amandanovaes Aug 31 '18 at 18:36

1 Answers1

0

From this question, and your other question, I think that you may be missunderstanding the purpose of a CDN.

In this question, you say that you want to copy the code hosted on a CDN, unify it into a single resource, and host that yourself. That is not a problem. However, the way to do that is not to use the CDN hosted files, but to use the actual library source and build your own bundle through a bundler like webpack, browserify, or rollup.

Those bundlers take the issues that you are encountering right now into consideration as they build. The static resources are either made correctly relative or added inline into the bundle.

Additionally, in one of your comments you say:

downloading a single file is way faster than downloading 10 individual JS files for 10 different libraries. For each library the browser has to initiate a request, domain resolution and so on. Joining JS files make it load much faster and also PageSpeed Insights give you much better score when importing less JS files

This is true if you have to actually download the resource. As I mentioned on your other question, the point of a CDN is to try and make it so that you do not have to download a copy of a library every time you visit a different website. Instead, if both Site A and Site B use somelib@2.0.0, and both load the resource by having a script with src: <script src="http://some.cdn.com/somelib@2.0.0"></script>, whichever site you visit first will have your user load the script and whenever your user visits the second site, the browser will say, "I already have that resource cached, I'll just use that".

This saves a network call for your user meaning there is no request overhead, only the overhead that it takes for the browser to realize that it already has the resource.

zero298
  • 25,467
  • 10
  • 75
  • 100
  • Thanks, I will accept your answer if no one finds a way to import many external libraries into a single file and still being possible to download the external css/images from the CDN. – amandanovaes Aug 31 '18 at 18:38
  • I must disagree a little bit with your answer cause clouflare itself used ROCKET LOADER to do exatly what I said, promising faster speeds on loading pages. I just dont get how do they handle external files loaded by the local unified file. – amandanovaes Aug 31 '18 at 18:40
  • @amandanovaes Then you should read [How does CloudFlare's Rocket Loader actually work (and how can a developer ensure compatibility)?](https://webmasters.stackexchange.com/a/60277/61229) because it is a much more involved process than just concatenating scripts together. – zero298 Aug 31 '18 at 18:47
  • Thanks for your comments and answer, very clarifying. Indeed, if the user has already a cache of a library on his browser, it will be much better I not include those libraries into a single file. Anyway, I was just curious if there was an easy way to concatenate JS/CSS files, it looks like it does not! – amandanovaes Aug 31 '18 at 18:49