lwc icon indicating copy to clipboard operation
lwc copied to clipboard

[Static optimization] Concatenate adjacent static blocks

Open nolanlawson opened this issue 5 months ago • 0 comments

For a template like this:

<template>
  <div>one</div>
  <span>two</span>
  <pre>three</pre>
</template>

... we currently compile this into:

const $fragment1 = parseFragment`<div${3}>one</div>`;
const $fragment2 = parseFragment`<span${3}>two</span>`;
const $fragment3 = parseFragment`<pre${3}>three</pre>`;
function tmpl($api, $cmp, $slotset, $ctx) {
  const { st: api_static_fragment } = $api;
  return [
    api_static_fragment($fragment1, 1),
    api_static_fragment($fragment2, 3),
    api_static_fragment($fragment3, 5),
  ];
}

Ideally, though, we should be able to combine these adjacent static fragments into one big fragment:

const $fragment1 = parseFragment`<div${3}>one</div><span${3}>two</span><pre${3}>three</pre>`;

This should theoretically have a perf benefit, because we are calling cloneNode(true) fewer times and cloning more nodes with each go.

This might be a bit complex to support in the compiler and at runtime, but it seems doable.

nolanlawson avatar Mar 22 '24 20:03 nolanlawson