DevTools for frontend optimization

IIFE generator for $async

The IIFE generator enables to concatenate a selection of $async modules into an IIFE script that can be used on a website.

<!-- config via an HTML attribute -->
<script async src="js/async-iife.js" data-c='[
   [
      "css/sheet1.css",
      "js/script1.js",
      {
        "src": "script2.js",
        "load_timing": {
          "type": "requestAnimationFrame",
          "frame": -1 // faster domReady
        },
        "exec_timing": "requestIdleCallback"
      },
      {
        "href": "sheet2.css"
      }
   ]
]'></script>

The config can be compressed to save size in the HTML (see compressor).

<!-- config compressed -->
<script async src="js/async-iife.js" 
   data-c='[["css/sheet1.css","js/script1.js",{"5":"script2.js","48":{"2":52,"56":-1},"60":53}]]'></script>

Node.js Github | Documentation

The IIFE generator is available as a Node.js module and CLI program that can be used from the command line.

npm install @style.tools/async-iife

Online generator

Select the modules that you want to include in the IIFE. Simply save the IIFE script into a file, e.g. js/async-iife.js and include the file in the HTML of a website.


Options:

Format: