The loading order of partial JavaScript files is different from what is in the code

Question

I put the JS files so that they load in order to avoid errors in the console and get anything, however, when I look at the network tab in the developer tools, the files load differently in what’s on the web page ...

Here is the order in the code:

<script src="/js/lib/jquery-3.3.1.min.js"></script>
<script src="/js/lib/jquery-ui.min.js"></script>
<script src="/js/lib/bootstrap.bundle.min.js"></script> <!-- Includes popper.js -->
<script src="/js/lib/toastr.min.js"></script>

<!-- Page specific scripts -->

<script src="/js/lib/moment.min.js"></script>
<script src="/js/lib/daterangepicker.js"></script>
<script src="/js/lib/Chart.min.js"></script>

<script src="/js/partials/daterange.js"></script>
<script src="/js/partials/utils.js"></script>
<script src="/js/partials/charts.js"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.16/b-1.5.1/b-html5-1.5.1/b-print-1.5.1/cr-1.4.1/datatables.min.js"></script>

<script src="/js/partials/dataTable.js"></script> 

<script src="/js/mainBundle.js"></script>

And this is what I get in dev tools:

• errors in the console that jQuery loads too late ... (this is the first in the code ...)

Things that I think might affect - I use some JS files stored locally, some of which come from cdnjs.

I use templates (blades) inside Laravel (some of the script calls from the main template, some of the "for the page"). But I would think that php parses everything together in advance.

Answer 1

JavaScript ( 5). .

. , ( defer async, ).