ryansolid

import { join } from "path";
import { Plugin } from "vite";
import { babel } from "@rollup/plugin-babel";
import { transformFileSync } from "@babel/core";

const presets = ["solid", "@babel/preset-typescript"];

export const solidPlugin: Plugin = {
  rollupInputOptions: {
    plugins: [

ryansolid

Based on Evan You's methodology: https://github.com/yyx990803/vue-svelte-size-analysis

Table

	Vue	Vue (SSR)	Svelte	Svelte (SSR)	Solid	Solid (SSR)
Source	3.93kb	-	3.31kb	-	4.98kb	-
Compiled w/o imports (min)	2.73kb	-	5.01kb (183.52%)	6.59kb (241.39%)	3.68kb (134.805)	3.96kb (145.05%)
Compiled w/o imports (min+gz)	1.25kb	-	2.13kb (170.40%)	2.68kb (214.40%)	1.46kb (116.80%)	1.57kb (125.60%)
Compiled w/o imports (min+brotli)	1.10kb	-	1.88kb (170.91%)	2.33kb (211.82%)	1.26kb (114.55%)	1.32kb (120.00%)

ryansolid

Based on Evan You's comparison which included Svelte and Vue. https://github.com/yyx990803/vue-svelte-size-analysis

For Preact, React, and Solid I took their official TodoMVC and ran them through Vite (2.3.6) to get vendor. For the components I grabbed the unminified source, ran it through Terser Repl, removed the imports, and ran through Brotli.

I wanted to use hooks for React and Preact since those are much smaller but all the official demos use classes. Adding Hooks adds library weight to Preact but it is worth it for this comparison(Preact with classes was 1.60kb and 3.81kb). Honestly I couldn't find a good hooks implementation for React/Preact that was small so I made one myself based on Solid.

	Preact	React	Solid	Svelte	Vue
component size (brotli)	1.21kb	1.23kb	1.26kb	1.88kb	1.10kb

ryansolid

import { buildData } from "./build-data";

<let/data = []/>
<let/selected = null/>

<div class="jumbotron">
  <div class="row">
    <div class="col-md-6">
      <h1>Marko 6 (keyed)</h1>