Load external javascript based on current URL

  • 25 October 2018
  • 1 reply
  • 6 views

Hello,

We have close to 1000 pages and have a need to place 2 javascript across these pages.

The issue: the 2 javascript files can not be loaded on the same page or it will cause issues with our backend.

I found this script:

<script>
  // Script will NOT fire on URLs containing "check"
  // Change the below variable to look for a different string in the URL (You can add an entire URL)
  var excludeFromSM = "check";
  
  if (document.location.href.indexOf(excludeFromSM) === -1){ 
    // Your code goes here
  } 
</script>

I set that variable excludeFromSM as an array and loaded about 100 urls.

var excludeFromSM = ["list", "of", "websites"];

I’m not sure if that even works because I keep getting “Uncaught SyntaxError: Unexpected token (” in my console.

Also, how would I get it to load an external javascript file? I know document.write wouldn’t work in this case as it would load the script after everything else has loaded, I believe. Please help. Thanks!


1 reply

Though there’s been a lot of research on ways to load JavaScript without blocking, there really is just one way that I’d recommend as a best practice. There should really be no need to load anything more than two scripts to get your site to initialize and interactive. Make the initial JavaScript file as small as possible and then load in the larger one dynamically to avoid blocking. This is the simplest, easiest way to get all of your JavaScript onto the page without affecting the user experience.

You can also import javascript modules into your project. With the intro of ES6, now you can import any javascript library via commonjs or standard es6 import method.

You can even lazy load the module based on your requirement asynchronously.

Lazy loading is a follow up of code splitting. Since the code has been split at logical breakpoints, we load things when they are needed. In this way, we can dramatically improve performance. Although the overall amount of loading time may be the same, the initial loading time is improved.

Best Regards,

Reply