Import a file containing script and link tags

You can use RequireJS to manage your scripts.

In this case you will only have 3 scripts, one with RequireJS itself, one configuration, and another with the scripts needed for your page.

Include RequireJS

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.js"></script>

Configuration.:

requirejs.config({shim:{"bootstrap" : { "deps" :['jquery'] },
        "datatables" : { "deps" :['jquery'] },
        "theme" : { "deps" :['bootstrap','datatables'] }
    },
    paths: {
        "jquery" : "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js",
        "bootstrap" : "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js",
        "datatables" : "https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/js/jquery.dataTables.js",
        "theme" : "https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/js/dataTables.bootstrap.js"   
    }
});

So the script on your page would look something like this. :

require(['jquery', 'bootstrap', 'datatables', 'theme'], function($){
    $(function(){
        $("#outdoor").carousel();
        $("#tabela").Datatables();
    });
});

Like @jbueno commented , if you use some language on the server side, this treatment will be made much easier on it, be it PHP, Python, C #, Java or any other. Not only easier as recommended. However, if you even want to do something of the type on the client side, you can do as I described below. Already advanced: I do not give guarantees that is the best solution, nor if it is recommended to use it in production. It works, but that does not mean it can be used. Be at your discretion and at your own risk.

One way is to manage all files through JavaScript. You maintain a list of CSS files and one of the JS files you want to insert into the page, and as a JavaScript you go through these lists by adding each file, using createElement to define a new element on the page and configuring it according to the file to be inserted.

See an example:

// Lista de arquivos CSS a serem carregados na página:
const styles = [
  "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css",
  "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css",
  "https://getbootstrap.com/examples/starter-template/starter-template.css"
];

// Lista de arquivos JS a serem carregados na página:
const scripts = [
  "https://code.jquery.com/jquery-2.2.4.min.js",
  "https://getbootstrap.com/dist/js/bootstrap.min.js"
];

// Objetos de manipulação do DOM:
const head = document.getElementsByTagName('head')[0];
const body = document.getElementsByTagName('body')[0];

// Insere os arquivos CSS na página:
for (let i in styles) {
  let style = document.createElement("link");

  style.rel = 'stylesheet';
  style.type = 'text/css';
  style.href = styles[i];

  head.appendChild(style);
}

// Insere os arquivos JS na página:
for (let i in scripts) {
  let script = document.createElement("script");

  script.src = scripts[i];
  script.type = "text/javascript";

  body.appendChild(script);
}

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">
  <div class="starter-template">
    <h1>Bootstrap starter template</h1>
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div>
</div>

The JS file would be inserted into all pages, and to add a CSS or JS file, you would simply add it to the styles or scripts list.

  

It works, but I do not know if it is recommended to do something like this in production and what are the weaknesses of the solution.