I am integrating different third paty tools with my project say newrelic, branchIO etc.., I am loading all of its js in the window object.
Currently i am trying to use one of the internationalization libraries. I have 2 plans. 1)To load the (en/es)translation-keys.json (a file which has key value pairs where values are the texts in corresponding languages) on window object. 2)To load the file in my application's globalState.
Also i have plans to add more 3rd party tools which would be loaded in the window object in future.
My question is, Will overloading browser's window object with many files cause performance issue? If it is so, is there any other way to improve the performance?
if you are using HTML and js you can use defer and async to control when and how the file.js can load. and for a more advanced option, you can create the import of js file with js
const script = document.createElement('script');
// 👇️ local file
// script.setAttribute('src', 'another-file.js');
// 👇️ remote file
script.setAttribute(
'src',
'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js',
);
script.setAttribute('async', '');
and that with the concept of (async, await, and promise) you can have full control of how & when to load your files.