Compress away all unused tokens in ESM bundle

[calebeby]

After bundling, the bundle looks something like this:

const tokens = {
  some: {
    very: {
      deeply: {
        nested: {
          object: 'with lots of properties'
        }
      }
    }
  },
  other: {
    unused_tree: 'not used'
  }
}

console.log(tokens.some.very.deeply.nested.object)

A smart minifier that knows that tokens and its nested properties are never modified could minify this to:

console.log('with lots of properties')

ESBuild doesn't yet do this, but terser can. In most cases, I don't think it makes sense to minify files published to npm. But in some cases, where there are unusual, project-specific minification techniques that can reduce the bundle size, I think it makes sense for the published package to have the minified version published. This reduces the burden on consumers of the package to have to set up some complex or unusual minification process. (for example Preact does this because their terser setup is definitely unusual).

In this project, getting the tokens object to minify-away requires a slightly unusual terser setup:

{
  compress: {
    passes: 6
  }
}

The passes option must be 6 or more. Each pass allows terser to remove one level of the object structure, i.e. after the first pass the output would be:

const tokens_some = {
  very: {
    deeply: {
      nested: {
        object: 'with lots of properties'
      }
    }
  }
}

console.log(tokens_some.very.deeply.nested.object)

The minified+gzipped size of the bundle with mangling disabled, passes: 1, is 4.54kb, and with mangling disabled, passes: 6 is 1.14kb

[changeset-bot]

🦋 Changeset detected

Latest commit: 8215216

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@cloudfour/patterns	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✔️ Deploy Preview for cloudfour-patterns ready!

🔨 Explore the source changes: 8215216

🔍 Inspect the deploy log: https://app.netlify.com/sites/cloudfour-patterns/deploys/612921bacb8022000780cb2f

😎 Browse the preview: https://deploy-preview-1507--cloudfour-patterns.netlify.app

[Paul-Hebert]

ESBuild doesn't yet do this, but terser can. In most cases, I don't think it makes sense to minify files published to npm. But in some cases, where there are unusual, project-specific minification techniques that can reduce the bundle size, I think it makes sense for the published package to have the minified version published. This reduces the burden on consumers of the package to have to set up some complex or unusual minification process. (for example Preact does this because their terser setup is definitely unusual).

Are there ever situations where the Wordpress site will need to access tokens that are not being directly used in our pattern library JS? (e.g. using tokens to configure Gutenberg options, using breakpoint values to trigger Wordpress-specific responsive behavior?)

If there are (or we think there might be) would it make more sense to apply these optimizations on the Wordpress side? Or provide a non-compressed version of our tokens script?

[calebeby]

@Paul-Hebert the tokens are also published to npm separately (I think they are used in PHP via the JSON copies): https://unpkg.com/browse/@cloudfour/patterns@4.1.0/src/compiled/tokens/

In this PR I am just trying to get rid of most of this file which isn't accessible to anything outside of itself anyways

[Paul-Hebert]

Gotcha, thanks for the clarification 👍 We definitely don't want to serve all that up. LGTM!