Skip to content

Build step: Reduce static template whitespace #14657

@jridgewell

Description

@jridgewell

Post #14623, there is one more requirement necessary for the best build sizes.

Given some static template, it will be common for us to place newlines/leading whitespace after elements (and before the first element):

const html = htmlFor(doc);
const div = html`
    <div>
      <p>Some text</p>
    </div>`;

The problem is, all this whitespace adds up. It can't be stripped by default, because template literals allow newlines and whitespace. Breaking up the templates into multiple html`<div>`, html`<p>Some text</p>` is too verbose.

What we can do, however, is strip out this whitespace in a custom build step. Everything up to the first < can be trimmed right off the bat (trailing the last >, too, if there's any):

// 100% equivalent to runtime code.
const div = html`<div>
      <p>Some text</p>
    </div>`;

Then, any other multi-spaces can be collapsed into a single space:

// 100% Equivalent with whitespace collapsing rules in DOM.
const div = html`<div> <p>Some text</p> </div>`;

This'll get us to the ideal build output.

Metadata

Metadata

Labels

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions