Chop-Chop

Preload asynchronously, load synchronously. Say what? To learn more about the benefits of using the Chop-Chop™ JS/CSS loader, which harnesses <link rel="preload"> in modern browsers like Chrome, see: Preload: What’s it good for?

I created Chop-Chop a few months ago because I wanted a teeny tiny JavaScript/CSS loader for web-based apps, and I wanted it to support <link rel="preload"> in newer versions of Chrome.

Why? Because I try to load all JavaScript and occasionally some CSS that is less important, asynchronously. However, as you might know, <script async> loads and executes in an unpredictable order.

Chop-Chop solves that problem.


Installation / Documentation

To learn more about Chop-Chop and gain a better understanding of what it can do and how it thinks, please see: src-works/chop-chop/docs.

$ npm install chop-chop --save

See also: <https://unpkg.com/chop-chop@latest/dist/scripts/js/>

Chop-Chop Example

<script>
  chopChop.preloadThenLoad( [
    // In this order...
    'https://example.com/styles-a.css',
    'https://example.com/scripts-a.js',

    'https://example.com/styles-b.css',
    'https://example.com/scripts-b.js',

    'https://example.com/styles-c.css',
    'https://example.com/scripts-c.js',
  ] )
    .then( function( urls ) {
      console.log( 'Resources loaded in the order given: %o', urls );
    } );
</script>

Browsers That Support Preload

Note: Chop-Chop works in all modern browsers that support Promises. How? Because it automatically detects support for <link rel="preload"> and will fall back on methods that work for the current browser; i.e., by injecting styles/scripts into the <head>.

Can I Use link-rel-preload? Data on support for the link-rel-preload feature across the major browsers from caniuse.com.

Browsers That Support Promises

If you want to support much older browsers that lack support for Promises, you can add this script tag before ALL others. The polyfill.io service equips older browsers w/ modern ES6 features — only loading polyfills for browsers that require them; i.e., not forcing everyone to download unnecessarily.

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6&amp;flags=gated"></script>

Can I Use promises? Data on support for the promises feature across the major browsers from caniuse.com.


Related Articles

Share This
Posted in: