Installation
@style.tools/async is available on NPM and as a PHP Composer package.
npm install @style.tools/async --save
Package: https://npmjs.com/package/@style.tools/async
composer require styletools/async
Package: https://packagist.org/packages/styletools/async
$async has been designed for above-the-fold optimization. The script is compiled into individual modules via Google Closure Compiler that does not just compress javascript but also optimizes it for speed. The individual modules can be concatenated without the use of a module loader.
An IIFE is a pre-concatenated selection of $async modules that is additionally optimized using Google Closure Compiler with mode Advanced Optimizations. IIFE or Immediately-invoked Function Expressions is a coding pattern for loading a script. An IIFE can be used in the browser safely.
For more documentation, see IIFE Generator
The Google Closure Compiler module architecture enables to concatenated a selection of 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.
<?php// include a selection of $async modules inlineecho "<script>(function(){"; // wrap in IIFEreadfile('vendor/styletools/async/dist/async-core.js');readfile('vendor/styletools/async/dist/css-loader.js');readfile('vendor/styletools/async/dist/cache.js'); // cache modulereadfile('vendor/styletools/async/dist/localstorage.js'); // localStorage moduleecho "})();</script>";?>
Example using 📐 Style.Tools PHP library
<?php// CSS Loader config$async_config = array('load' => array( 'sheet.css' ),'load_options' => array( 'load_timing' => 'requestAnimationFrame' ));// discover modules via config$modules = StyleTools\AsyncCSS::discover_modules($async_config);// manually add some modules$modules[] = 'api'; // public API and events$modules[] = 'attr-config'; // data-c HTML attribute config// generate IIFE$iife_options = array('cache' => true,'compress' => true,'mode' => 'unary');$module_iife = StyleTools\IIFE::generate($modules, $iife_options);// compress JSON config$compressed_config = StyleTools\AsyncCSS::compress($async_css_config, null, false, true);// inline $async scriptecho '<script data-c=\''.(($compressed_config) ? $compressed_config : '').'\'>'.$module_iife.'</script>';?>
