Search code examples
javascriptimportcdnhead

How to join two+ separated JS libraries in a single file

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!

Solution

  • 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.