CSS and JavaScript assets
Both CSS and JavaScript are split (manually) in two parts:
- one critical for performance is included inline in all HTML pages
- one additional, less important for performance, is loaded in the end of the HTML, with a hash to prevent caching issues
JavaScript
Permalink to heading JavaScriptAdditional JavaScript is loaded as ECMAScript module in modern browsers, and as Immediately Invoked Function Expression (IIFE) in older ones, using the module
/nomodule
pattern for differential serving[1].
JavaScript is compiled with Rollup, with a few plugins:
babel
for transpiling to ES5 where necessaryterser
for minification
CSS is compiled from Sass code with Dart Sass CLI.
For production build, CSS is then processed with a few PostCSS plugins:
- autoprefixer adds vendor prefixes to some rules, depending on targeted browsers. See the
/.browserslistrc
file. - cssnano "runs the CSS through many focused optimisations, to ensure that the final result is as small as possible for a production environment".
- postcss-hash then creates copies of the CSS files with hashed filenames, for cache busting.
Pack11ty previously used postcss
and a few plugins to generate CSS, but it was not as complete as full Sass, and the npm scripts were a mess. It then used Rollup and Sass, which was not ideal because critical and additional CSS were tied to their JavaScript counterparts.
Dev mode with Live Reload and Source Maps
Permalink to heading Dev mode with Live Reload and Source MapsIn development mode, when Sass code is modified, the resulting CSS is automatically updated in the browser with Eleventy's browsersync
instance.
The same behavior for JavaScript is still WIP.
There are also Source Maps to ease understanding of the styles origin.
You can watch this hilarious video by Heydon Pickering, about ES modules, for a few minutes of fun. âŠī¸