How to load js file first in Magento 2

Question 1

I'm using Magento 2 and I have a js file that was called like this:

default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <body>
 <referenceContainer name="after.body.start">
 <block class="Vendor\Module\Block\Ajax\Login\Js" template="Vendor_Module::login-ajax.phtml" name="login.ajax" as="login.ajax" before="head.components" ifconfig="loginpopup/general/enabled" />
 </referenceContainer>
 </body>
</page>

login-ajax.phtml

<script type="text/x-magento-init">
{
 "*": {
 "vm/loginajax" : <?php echo $block->getJsOptions(); ?>
 }
}

requirejs-config.js

var config = {
 map: {
 '*': {
 'vm/loginajax': 'Vendor_Module/js/login-ajax'
 }
 }
};

Vendor_Module/js/login-ajax

define([
 'jquery',
 'mage/translate',
 'jquery/ui',
 'mage/validation/validation',
 'vm/mycustom'
], function (,ドル $t)

the js file size is 3KB , i noticed the js file is rendered not at the very beginning, how can i set the priority so this js file will load first?

Question 2

check this link - stackoverflow.com/questions/48167553/…

Question 3

magento.stackexchange.com/questions/102347/…

Question 4

You cannot manually manage the sort order of JS files within core Magento 2 to the level you are asking for, and even if you could you do not want your file to load first as you have dependencies:

'jquery',
'mage/translate',
'jquery/ui',
'mage/validation/validation',
'vm/mycustom'

You have to wait until your dependencies have loaded else you will just run into a lot of errors. If for some reason you really do want your file to load first then do not use Require JS at all.

Question 5

Totally right 👍🏼

Question 6

Ben is right here. Question is what do you want to achieve? I mean not what you want to do on code level but what you want to do in you store from user perspective? Perhaps there is some other way. However looking at the name of js script and the list of dependencies I guess it will be difficult to make it in different way.

Question 7

If your goal is to load this js file first then instead of added after body, you can added then into head section like this.

default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <body>
 <referenceBlock name="head.additional">
 <block class="Vendor\Module\Block\Ajax\Login\Js" template="Vendor_Module::login-ajax.phtml" name="login.ajax" as="login.ajax" before="-" ifconfig="loginpopup/general/enabled" />
 </referenceBlock>
 </body>
</page>

Question 8

is not this still inside the <body> tag?

Question 9

Do you want this in body tag or head tag?

Question 10

i want this js file should be loaded up first, should not be matter in head or body

Question 11

Then you can use above code.

Question 12

Add your login-ajax JS file in the default.xml file of your custom module Vendor\Module\view\frontend\layout\default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <head>
 <link src="Vendor_Module::js/login-ajax.js"/>
 </head>
</page>

Keep the file login-ajax.js at Vendor\Module\view\frontend\web\js\login-ajax.js

And finally,

Run setup:upgrade and setup:static-content:deploy commands.

Hope this helps!

Question 13

Need to override root.phtml instead of using require.js.

Copy default root.phtml from vendor/magento/module-theme/view/base/templates/ to your theme location app/design/frontend/<your_vendor_name>/<your_theme_name>/Magento_Theme/templates/.

Edit the file to include your script right before or after where require.js is included.

<!doctype html>
<html <?= /* @noEscape */ $htmlAttributes ?>>
 <head <?= /* @noEscape */ $headAttributes ?>>
 <script type="text/javascript" src="path/to/your/custom.js"></script>
 <?= /* @noEscape */ $requireJs ?>
 <?= /* @noEscape */ $headContent ?>
 <?= /* @noEscape */ $headAdditional ?>
 </head>
 <body data-container="body"
 data-mage-init='{"loaderAjax": {}, "loader": { "icon": "<?= /* @noEscape */ $loaderIcon ?>"}}'
 <?= /* @noEscape */ $bodyAttributes ?>>
 <?= /* @noEscape */ $layoutContent ?>
 </body>
</html>

Question 14

Wouldn't this error as require is not yet defined?

Question 15

Above solution will load JS file at the top where code should be written without any dependency(core JS). Using RequireJS as you've mentioned we cannot manually manage the sort order of JS because RequireJS loads its module source files asynchronously, and doesn't promise anything about the order they're loaded in. Just we can manage "load order" dependencies using RequireJS shim configuration directive.

Question 16

Ah I see, yeah that would work but not in this use case as there is a dependency on jQuery, jQuery UI, Magento's core validation, and translations :(

Ben Crook 15.8k4 gold badges53 silver badges105 bronze badges · Answer 1 · 2020-08-14 08:21:54Z

You cannot manually manage the sort order of JS files within core Magento 2 to the level you are asking for, and even if you could you do not want your file to load first as you have dependencies:

'jquery',
'mage/translate',
'jquery/ui',
'mage/validation/validation',
'vm/mycustom'

You have to wait until your dependencies have loaded else you will just run into a lot of errors. If for some reason you really do want your file to load first then do not use Require JS at all.

Ben is right here. Question is what do you want to achieve? I mean not what you want to do on code level but what you want to do in you store from user perspective? Perhaps there is some other way. However looking at the name of js script and the list of dependencies I guess it will be difficult to make it in different way.

Dhiren Vasoya 9,70914 gold badges37 silver badges61 bronze badges · Answer 2 · 2020-08-14 05:19:34Z

If your goal is to load this js file first then instead of added after body, you can added then into head section like this.

default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <body>
 <referenceBlock name="head.additional">
 <block class="Vendor\Module\Block\Ajax\Login\Js" template="Vendor_Module::login-ajax.phtml" name="login.ajax" as="login.ajax" before="-" ifconfig="loginpopup/general/enabled" />
 </referenceBlock>
 </body>
</page>

i want this js file should be loaded up first, should not be matter in head or body

Bhaumik Upadhyay 9031 gold badge9 silver badges18 bronze badges · Answer 3 · 2020-08-14 07:01:21Z

Add your login-ajax JS file in the default.xml file of your custom module Vendor\Module\view\frontend\layout\default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
 <head>
 <link src="Vendor_Module::js/login-ajax.js"/>
 </head>
</page>

Keep the file login-ajax.js at Vendor\Module\view\frontend\web\js\login-ajax.js

And finally,

Run setup:upgrade and setup:static-content:deploy commands.

Hope this helps!

Pratik Oza 4,00212 silver badges17 bronze badges · Answer 4 · 2020-08-14 09:18:46Z

Need to override root.phtml instead of using require.js.

Copy default root.phtml from vendor/magento/module-theme/view/base/templates/ to your theme location app/design/frontend/<your_vendor_name>/<your_theme_name>/Magento_Theme/templates/.

Edit the file to include your script right before or after where require.js is included.

<!doctype html>
<html <?= /* @noEscape */ $htmlAttributes ?>>
 <head <?= /* @noEscape */ $headAttributes ?>>
 <script type="text/javascript" src="path/to/your/custom.js"></script>
 <?= /* @noEscape */ $requireJs ?>
 <?= /* @noEscape */ $headContent ?>
 <?= /* @noEscape */ $headAdditional ?>
 </head>
 <body data-container="body"
 data-mage-init='{"loaderAjax": {}, "loader": { "icon": "<?= /* @noEscape */ $loaderIcon ?>"}}'
 <?= /* @noEscape */ $bodyAttributes ?>>
 <?= /* @noEscape */ $layoutContent ?>
 </body>
</html>

Above solution will load JS file at the top where code should be written without any dependency(core JS). Using RequireJS as you've mentioned we cannot manually manage the sort order of JS because RequireJS loads its module source files asynchronously, and doesn't promise anything about the order they're loaded in. Just we can manage "load order" dependencies using RequireJS shim configuration directive.
Ah I see, yeah that would work but not in this use case as there is a dependency on jQuery, jQuery UI, Magento's core validation, and translations :(

Stack Exchange Network

How to load js file first in Magento 2

4 Answers 4

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Hot Network Questions

How to load js file first in Magento 2

4 Answers 4

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related

Hot Network Questions