Is it possible to change the order in which assets are loaded for a specific page?

Question

JavaScript

in web.php

'bundles' => [
...
                'yii\bootstrap\BootstrapPluginAsset' => [
                    'js' => [YII_ENV_DEV ? 'js/bootstrap.js' : 'js/bootstrap.min.js',]
                ]

A widget is loaded on one of the pages, the widget itself loads JQueryUIAsset::register($this->view) in init.
I need that when the widget is loaded, jqueryui is loaded first, and only then bootstrap. How to implement?

Answer 1

The defer attribute
Supported by all browsers, including the oldest IE. The script also runs asynchronously, does not make the page wait, but there are two differences from async.
First, the browser ensures that the relative order of defer scripts is preserved.
That is, in such code (with async), the script that loads first will work first:

<script src="1.js" async></script>
<script src="2.js" async></script>

And in such a code (with defer), 1.js will always work first, and script 2.js, even if loaded earlier, will wait for it.

<script src="1.js" defer></script>
<script src="2.js" defer></script>

Therefore, the defer attribute is used in cases where the second 2.js script depends on the first 1.js, for example, it uses something described by the first script.
The second difference is that the defer script will work when the entire HTML document has been processed by the browser.
For example, if the document is large enough...

<script src="async.js" async></script>
<script src="defer.js" defer></script>
 
текст текст текст

...Then the async.js script will execute as soon as it loads - perhaps before the entire document is ready. And defer.js will wait for the entire document to be ready.
This can be convenient when we want to work with a document in a script, and we need to be sure that it is completely received.