Installation
Installation
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. - 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.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