Installation

$async is available on NPM as @style.tools/async and as a PHP Composer package.

Install via NPM

npm install @style.tools/async --save

Package: https://npmjs.com/package/@style.tools/async​

Install via PHP Composer

composer require styletools/async

Package: https://packagist.org/packages/styletools/async​

Usage

$async is modular and easy to use: select only the features that are needed to achieve the tiniest script size.

• simply stitch pre-optimized GCC modules together for a performant IIFE. You can wrap the modules in dist/ into an IIFE, e.g. !function(){/* stitched modules */}();. Follow the module order in package.json.

• ​Online IIFE generator (adds an extra GCC Advanced mode compression layer)

• ​Node.js/CLI IIFE generator (adds an extra GCC Advanced mode compression layer)

• PHP IIFE generator (available on request: [email protected])

IIFE Generator

​$async IIFE generator enables to easily create a pre-concatenated selection of $async modules that is additionally optimized using Google Closure Compiler.

The IIFE generator is available online on https://style.tools/iife/.

Installation

npm install @style.tools/async-iife

• ​IIFE Generator documentation​

Module concatenation: select only what you use

$async is compiled into modules via Google Closure Compiler that does not just compress javascript but also optimizes it for speed.

The Google Closure Compiler module architecture enables to concatenate a selection of $async modules without the use of a module loader. You can simply wrap the module source text in a IIFE and include it safely in the HTML document.

Example: Pre-concatenated file

<script async src="js/async-iife.js" data-c='[
   [
      "css/sheet1.css",
      {
         "href": "https://cdn.com/css/sheet2.css",
         "render_timing": "requestAnimationFrame"
      }
   ]
]'></script>

Example: Inline concatenation

<?php
​
// include a selection of $async modules inline
echo "<script>(function(){"; // wrap in IIFE
readfile('vendor/styletools/async/dist/async-core.js');
readfile('vendor/styletools/async/dist/css-loader.js'); 
readfile('vendor/styletools/async/dist/cache.js'); // cache module
readfile('vendor/styletools/async/dist/localstorage.js'); // localStorage module
echo "})();</script>";
?>