javascript html performance bundling-and-minification content-security-policy

Page Specific JavaScript using Content Security Policy (CSP)

I want to use Content Security Policy (CSP) across my entire site. This requires all JavaScript to be in separate files. I have shared JavaScript used by all pages but there is also page specific JavaScript that I only want to run for a specific page. What is the best way to handle page specific JavaScript for best performance?

Two ways I can think of to workaround this problem is to use page specific JavaScript bundles or a single JavaScript bundle with switch statement to execute page specific content.

Solution

there is lots of ways to execute page specific javascript

Option 1 (check via class)

Set a class to body tag

<body class="PageClass">

and then check via jQuery

$(function(){
  if($('body').hasClass('PageClass')){
    //your code
  }
});

Option 2 (check via switch case)

var windowLoc = $(location).attr('pathname'); //jquery format to get window.location.pathname

switch (windowLoc) {
    case "/info.php":
        //code here
        break;
    case "/alert.php":
        //code here
        break;
}

Option 3 Checking via function

make all the page specific script in the function

function homepage() {
    alert('homepage code executed');
}

and then run function on specific page

homepage();