Contrib.social

On-the-fly JavaScript minification

Open on Drupal.org →
Created on 10 August 2022, over 2 years ago
Updated 27 June 2024, 9 months ago

Problem/Motivation

There are several previous issues discussing this, but all several years old and mostly abandoned because we didn't have either a JavaScript build step or 🐛 Stampedes and cold cache performance issues with css/js aggregation Fixed in core. Should be added as related issues.

Postponed on #2258313: Add license information to aggregated assets → which we need to fulfil GPL licensing requirements.

CSS minification has very different requirements and is discussed in 📌 Consider adopting a third party CSS minification library Active .

There are broadly two approaches we could take:

1. Adopt a PHP JavaScript minifier/uglifier, and then use this to process aggregates. The disadvantages are more CPU/time building aggregates, and PHP not being the best language to process JavaScript.

2. Uglify/minify JavaScript assets via the build step to .min.js files (which get committed to the git repo), and then use those when building aggregates.

On-the-fly minification with JavaScript isn't doable without introducing a node dependency to core. Having some minification in core is a lot better than none, even if better theoretical methods exist, because only a small fraction of sites will install contrib modules (let alone server-side dependencies) purely to improve front-end performance.

Since we can ensure that all core JavaScript is minified via a build step, but can't do this for contributed modules, we can do both:

1. Minify core JavaScript to foo.js - the original will be at foo.es6.js or foo.source.js, and add {minified: true} to the library definition.

2. Add on-the-fly minification with Peast to any JavaScript that's not pre-minified.

Steps to reproduce

Proposed resolution

Add on-the-fly minification (but not uglification) to core, using Peast https://github.com/mck89/peast
This reduces ajax.es6.js from 59kb down to around 17kb in around 100ms. There is some performance cost to this, but we create aggregates in their own dedicated request and write them to disk, so any performance penalty only hits the request that actually generates an aggregate the first time, and even then it will take less time to transfer over the network post-minification. Additionally since core files will already be minified, the only additional time spent is for unminified contrib/custom JavaScript.

Dependency evaluation

  1. Maintained by Marco Marchio (https://github.com/mck89) with approximately nine other contributors. First stable release was in 2017
  2. Does not have a formal security policy. (request made in https://github.com/mck89/peast/issues/51)
  3. Release cycle: Patch releases every 2-4 months, minor releases every 1-2 years. Last release was May 2022.
  4. Follows the ECMAScript specification, so a proper AST JavaScript parser rather than simply a minifier. Includes general documentation beyond the README at https://github.com/mck89/peast/tree/master/doc. Decent looking test suite: https://github.com/mck89/peast/tree/master/test/Peast
  5. No other dependencies.

Remaining tasks

None.

User interface changes

None.

API changes

None.

Data model changes

None.

Release notes snippet

Drupal core's JavaScript aggregation removes comments and whitespace from JavaScript files resulting in a significant filesize reduction → . Sites using contribution minification solutions may wish to re-evaluate whether they can rely on core aggregation instead.

📌 Task
Status

Fixed

Version

10.1 ✨

Component
Asset library  →

Last updated 1 minute ago

No maintainer
Created by

🇬🇧United Kingdom catch

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024