Installation

Installation

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

Install via NPM

1
npm install @style.tools/async --save
Copied!

Install via PHP Composer

1
composer require styletools/async
Copied!

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

1
npm install @style.tools/async-iife
Copied!

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

1
<script async src="js/async-iife.js" data-c='[
2
[
3
"css/sheet1.css",
4
{
5
"href": "https://cdn.com/css/sheet2.css",
6
"render_timing": "requestAnimationFrame"
7
}
8
]
9
]'></script>
Copied!

Example: Inline concatenation

1
<?php
2
3
// include a selection of $async modules inline
4
echo "<script>(function(){"; // wrap in IIFE
5
readfile('vendor/styletools/async/dist/async-core.js');
6
readfile('vendor/styletools/async/dist/css-loader.js');
7
readfile('vendor/styletools/async/dist/cache.js'); // cache module
8
readfile('vendor/styletools/async/dist/localstorage.js'); // localStorage module
9
echo "})();</script>";
10
?>
Copied!
Last modified 1yr ago