Svelte benchmark for #6555

refs: https://github.com/sveltejs/svelte/issues/6555, https://github.com/sveltejs/svelte/pull/6556

I've thought of several implementations to fix #6555, but each has its trade-offs.

• impl1
  • same as this PR
  • This allows to exclude svg_element function if a component does'nt have svg-elements, but not exclude element function if a component only includes svg-elements.
• impl2
  • This allows to exclude svg_element function if a component does'nt have svg-elements, and exclude element function if a component only includes svg-elements.
  • Each elements pass element function or svg_element function to claim_element function in claim function.
    • compiled

        l: function claim(nodes) {
            ...
            main = claim_element(nodes, "MAIN", {}, element);
            ...
        },
      

    • minified(formatted)

        l(t) {
            ...
            e = $(t, "MAIN", {}, s);
            ...
        },
      

  • Trade-off
    The size increases by 2 bytes for each claim_element, so if there are few elements, the size will be small, but if there are many elements, the size will be large.
• impl3
  • This allows to exclude svg_element function if a component does'nt have svg-elements, and exclude element function if a component only includes svg-elements.
  • renamed claim_element to claim_element_base, and created wrapper functions.

    -   export function claim_element(nodes: ChildNodeArray, name: string, attributes: {[key: string]: boolean}, svg) {
    +   export function claim_element_base(nodes: ChildNodeArray, name: string, attributes: { [key: string]: boolean }, create_element: (name: string) => Element | SVGElement) {
            ...
        }
    
    +   export function claim_element(nodes: ChildNodeArray, name: string, attributes: { [key: string]: boolean }) {
    +       return claim_element_base(nodes, name, attributes, element);
    +   }
    
    +   export function claim_svg_element(nodes: ChildNodeArray, name: string, attributes: { [key: string]: boolean }) {
    +       return claim_element_base(nodes, name, attributes, svg_element);
    +    }
    

  • Trade-off
    If a component includes both svg-elements and not-svg-elements, and the number of elements is small, the footprint can be large.



To clarify the trade-offs of these implementations, I compiled the following components in each implementation and compared the bundle sizes.

• Small-size components
  • a component not including svg-elements.
  • a component including only svg-elements.
  • a component including both.
• Regular-size components
  • a component not including svg-elements.
  • a component including only svg-elements.
  • a component including both.

Results

Small-size components

Component

• HelloWorld : as a component not including svg-elements.
• RoundedRectangle : as a component including only svg-elements.
• HelloWorld and RoundedRectangle : as a comonent including both.

Note: The sizes for gzip and brotli are for reference only.

Normal-size components

Component

• TodoMVC : as a component not including svg-elements (based on sveltejs/svelte-todomvc)
• Icons : as a component including only svg-elements (based on sveltejs/site-kit)
• TodoMVC and Icons : as a component including both

Note: The sizes for gzip and brotli are for reference only.

Requirement

• install brotli, gzip.

• clone tomoam/svelte (because of including above implementations branch).

  git clone https://github.com/tomoam/svelte.git
  

  and checkout branch of above implementations, and build then link.

  • impl1

    git checkout 6555-impl1
    npm run build
    npm link
    

Get started

git clone https://github.com/tomoam/svelte-benchmark-for-6555.git
cd svelte-benchmark-for-6555
npm install
npm link svelte
npm run benchmark -- --impl1