Question: How can i make JavaScript Asynchronous

[mayhem-ahmad]

Hey guys,

I'm trying to us Html5 attribute async for these files :
/requirejs/require.min.js
/requirejs-min-resolver.min.js
/mage/requirejs/mixins.min.js
/requirejs-config.min.js

but i can't do it in magento cause it's XML tags and there is no head.phtml like magento1
Help plz

[guz-anton]

Hi @mayhem-ahmad ,
I'm pleasantly surprised that's someone roots for client side performance.

Here is some points about your question:

1. Adding async to those <script> nodes is not enough. In most cases you will get random issues with JS app on the page. These files expect to be loaded one by one.
2. As a solution for previous problem you can merge them manually. But requirejs-config.min.js is generated by application. So its hard to put it in bundle source.
3. But on the own project with state list of Magento Modules you can pregenerate requirejs-config.min.js and switch off from page layout. So final solution near to workable one consists with
   1. pregenerate requirejs-config.min.js
   2. merge all mentioned files to one with preserving order of files
   3. add this bundle to xml declaration with filled async attribute. You can add async="async" just in xml, where you will add you bundle.js.
      Should be something like:
      <script src="bundle.js" async="async"/>
      More info could be found here http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html
4. As the result should be one file loaded asynchronously.

Some procedure notes:

• Its better to ask questions on SE http://magento.stackexchange.com/
  It has useful features for tracking particular question. And has wider community ready to give a hand.
• Github Issues is more about issues in source code.
  Thanks for understanding.