|
const e=Symbol("solid-proxy"),t={equals:(e,t)=>e===t};let n=x;const r={},o={owned:null,cleanups:null,context:null,owner:null};var l=null;let s=null,i=null,u=null,c=null,f=0;function a(e,t){t&&(l=t);const n=s,r=l,i=0===e.length?o:{owned:null,cleanups:null,context:null,owner:r,attached:!!t};let u;l=i,s=null;try{j((()=>u=e((()=>k(i)))),!0)}finally{s=n,l=r}return u}function d(e,n){n=n?Object.assign({},t,n):t;const o={value:e,observers:null,observerSlots:null,pending:r,comparator:n.equals||void 0};return[w.bind(o),e=>("function"==typeof e&&(e=e(o.pending!==r?o.pending:o.value)),A(o,e))]}function h(e,t,n){m(S(e,t,!1))}function p(e,t,r){n=C;const o=S(e,t,!1);o.user=!0,c&&c.push(o)}function g(e,n,o){o=o?Object.assign({},t,o):t;const l=S(e,n,!0);return l.pending=r,l.observers=null,l.observerSlots=null,l.state=0,l.comparator=o.equals||void 0,m(l),w.bind(l)}function b(e){if(i)return e();let t;const n=i=[];try{t=e()}finally{i=null}return j((()=>{for(let e=0;e<n.length;e+=1){const t=n[e];if(t.pending!==r){const e=t.pending;t.pending=r,A(t,e)}}}),!1),t}function y(e){let t,n=s;return s=null,t=e(),s=n,t}function v(e){return null===l||(null===l.cleanups?l.cleanups=[e]:l.cleanups.push(e)),e}function w(){if(this.state&&this.sources){const e=u;u=null,1===this.state?m(this):_(this),u=e}if(s){const e=this.observers?this.observers.length:0;s.sources?(s.sources.push(this),s.sourceSlots.push(e)):(s.sources=[this],s.sourceSlots=[e]),this.observers?(this.observers.push(s),this.observerSlots.push(s.sources.length-1)):(this.observers=[s],this.observerSlots=[s.sources.length-1])}return this.value}function A(e,t,n){return e.comparator&&e.comparator(e.value,t)?t:i?(e.pending===r&&i.push(e),e.pending=t,t):(e.value=t,!e.observers||u&&!e.observers.length||j((()=>{for(let t=0;t<e.observers.length;t+=1){const n=e.observers[t];null,n.observers&&2!==n.state&&P(n),n.state=1,n.pure?u.push(n):c.push(n)}if(u.length>1e6)throw u=[],new Error}),!1),t)}function m(e){if(!e.fn)return;k(e);const t=l,n=s,r=f;s=l=e,function(e,t,n){let r;try{r=e.fn(t)}catch(o){N(o)}(!e.updatedAt||e.updatedAt<=n)&&(e.observers&&e.observers.length?A(e,r):e.value=r,e.updatedAt=n)}(e,e.value,r),s=n,l=t}function S(e,t,n,r){const s={fn:e,state:1,updatedAt:null,owned:null,sources:null,sourceSlots:null,cleanups:null,value:t,owner:l,context:null,pure:n};return null===l||l!==o&&(l.owned?l.owned.push(s):l.owned=[s]),s}function O(e){let t,n=1===e.state&&e;if(e.suspense&&y(e.suspense.inFallback))return e.suspense.effects.push(e);for(;e.fn&&(e=e.owner);)2===e.state?t=e:1===e.state&&(n=e,t=void 0);if(t){const e=u;if(u=null,_(t),u=e,!n||1!==n.state)return}n&&m(n)}function j(e,t){if(u)return e();let r=!1;t||(u=[]),c?r=!0:c=[],f++;try{e()}catch(o){N(o)}finally{!function(e){u&&(x(u),u=null);if(e)return;c.length?b((()=>{n(c),c=null})):c=null}(r)}}function x(e){for(let t=0;t<e.length;t++)O(e[t])}function C(e){let t,n=0;for(t=0;t<e.length;t++){const r=e[t];r.user?e[n++]=r:O(r)}const r=e.length;for(t=0;t<n;t++)O(e[t]);for(t=r;t<e.length;t++)O(e[t])}function _(e){e.state=0;for(let t=0;t<e.sources.length;t+=1){const n=e.sources[t];n.sources&&(1===n.state?O(n):2===n.state&&_(n))}}function P(e){for(let t=0;t<e.observers.length;t+=1){const n=e.observers[t];n.state||(n.state=2,n.observers&&P(n))}}function k(e){let t;if(e.sources)for(;e.sources.length;){const t=e.sources.pop(),n=e.sourceSlots.pop(),r=t.observers;if(r&&r.length){const e=r.pop(),o=t.observerSlots.pop();n<r.length&&(e.sourceSlots[o]=n,r[n]=e,t.observerSlots[n]=o)}}if(e.owned){for(t=0;t<e.owned.length;t++)k(e.owned[t]);e.owned=null}if(e.cleanups){for(t=0;t<e.cleanups.length;t++)e.cleanups[t]();e.cleanups=null}e.state=0,e.context=null}function N(e){throw e}const B=Symbol("fallback");function T(e){for(let t=0;t<e.length;t++)e[t]()}function $(e,t){return y((()=>e(t)))}function q(e){const t="fallback"in e&&{fallback:()=>e.fallback};return g(function(e,t,n={}){let r=[],o=[],s=[],i=0,u=t.length>1?[]:null,c=l;return v((()=>T(s))),()=>{let l,f,h=e()||[];return y((()=>{let e,t,d,g,b,y,v,w,A,m=h.length;if(0===m){if(0!==i){{const e=s;setTimeout((()=>T(e)))}s=[],r=[],o=[],i=0,u&&(u=[])}n.fallback&&(r=[B],o[0]=a((e=>(s[0]=e,n.fallback())),c),i=1)}else if(0===i){for(o=new Array(m),f=0;f<m;f++)r[f]=h[f],o[f]=a(p,c);i=m}else{for(d=new Array(m),g=new Array(m),u&&(b=new Array(m)),y=0,v=Math.min(i,m);y<v&&r[y]===h[y];y++);for(v=i-1,w=m-1;v>=y&&w>=y&&r[v]===h[w];v--,w--)d[w]=o[v],g[w]=s[v],u&&(b[w]=u[v]);for(e=new Map,t=new Array(w+1),f=w;f>=y;f--)A=h[f],l=e.get(A),t[f]=void 0===l?-1:l,e.set(A,f);for(l=y;l<=v;l++)A=r[l],f=e.get(A),void 0!==f&&-1!==f?(d[f]=o[l],g[f]=s[l],u&&(b[f]=u[l]),f=t[f],e.set(A,f)):s[l]();for(f=y;f<m;f++)f in d?(o[f]=d[f],s[f]=g[f],u&&(u[f]=b[f],u[f](f))):o[f]=a(p,c);o=o.slice(0,i=m),r=h.slice(0)}return o}));function p(e){if(s[f]=e,u){const[e,n]=d(f);return u[f]=n,t(h[f],e)}return t(h[f])}}}((()=>e.each),e.children,t||void 0))}function D(e){let t=!1;const n=g((()=>e.when),void 0,{equals:(e,n)=>t?e===n:!e==!n});return g((()=>{const r=n();if(r){const n=e.children;return(t="function"==typeof n&&n.length>0)?y((()=>n(r))):n}return e.fallback}))}function F(e,t,n){let r=n.length,o=t.length,l=r,s=0,i=0,u=t[o-1].nextSibling,c=null;for(;s<o||i<l;)if(t[s]!==n[i]){for(;t[o-1]===n[l-1];)o--,l--;if(o===s){const t=l<r?i?n[i-1].nextSibling:n[l-i]:u;for(;i<l;)e.insertBefore(n[i++],t)}else if(l===i)for(;s<o;)c&&c.has(t[s])||e.removeChild(t[s]),s++;else if(t[s]===n[l-1]&&n[i]===t[o-1]){const r=t[--o].nextSibling;e.insertBefore(n[i++],t[s++].nextSibling),e.insertBefore(n[--l],r),t[o]=n[l]}else{if(!c){c=new Map;let e=i;for(;e<l;)c.set(n[e],e++)}const r=c.get(t[s]);if(null!=r)if(i<r&&r<l){let u,f=s,a=1;for(;++f<o&&f<l&&null!=(u=c.get(t[f]))&&u===r+a;)a++;if(a>r-i){const o=t[s];for(;i<r;)e.insertBefore(n[i++],o)}else e.replaceChild(n[i++],t[s++])}else s++;else e.removeChild(t[s++])}}else s++,i++}const M=Symbol("delegated-events");function E(e,t,n){let r;return a((o=>{r=o,H(t,e(),t.firstChild?null:void 0,n)})),()=>{r(),t.textContent=""}}function z(e,t,n){const r=document.createElement("template");r.innerHTML=e;let o=r.content.firstChild;return n&&(o=o.firstChild),o}function L(e,t=window.document){const n=t[M]||(t[M]=new Set);for(let r=0,o=e.length;r<o;r++){const o=e[r];n.has(o)||(n.add(o),t.addEventListener(o,I))}}function H(e,t,n,r){if(void 0===n||r||(r=[]),"function"!=typeof t)return J(e,t,r,n);h((r=>J(e,t(),r,n)),r)}function R(e){return e.cloneNode(!0)}function G(e){return[e,[]]}function I(e){const t=`$$${e.type}`;let n=e.composedPath&&e.composedPath()[0]||e.target;for(e.target!==n&&Object.defineProperty(e,"target",{configurable:!0,value:n}),Object.defineProperty(e,"currentTarget",{configurable:!0,get:()=>n});null!==n;){const r=n[t];if(r){const o=n[`${t}Data`];if(void 0!==o?r(o,e):r(e),e.cancelBubble)return}n=n.host&&n.host!==n&&n.host instanceof Node?n.host:n.parentNode}}function J(e,t,n,r,o){for(;"function"==typeof n;)n=n();if(t===n)return n;const l=typeof t,s=void 0!==r;if(e=s&&n[0]&&n[0].parentNode||e,"string"===l||"number"===l)if("number"===l&&(t=t.toString()),s){let o=n[0];o&&3===o.nodeType?o.data=t:o=document.createTextNode(t),n=U(e,n,r,o)}else n=""!==n&&"string"==typeof n?e.firstChild.data=t:e.textContent=t;else if(null==t||"boolean"===l)n=U(e,n,r);else{if("function"===l)return h((()=>{let o=t();for(;"function"==typeof o;)o=o();n=J(e,o,n,r)})),()=>n;if(Array.isArray(t)){const l=[];if(K(l,t,o))return h((()=>n=J(e,l,n,r,!0))),()=>n;if(0===l.length){if(n=U(e,n,r),s)return n}else Array.isArray(n)?0===n.length?Q(e,l,r):F(e,n,l):null==n||""===n?Q(e,l):F(e,s&&n||[e.firstChild],l);n=l}else if(t instanceof Node){if(Array.isArray(n)){if(s)return n=U(e,n,r,t);U(e,n,null,t)}else null!=n&&""!==n&&e.firstChild?e.replaceChild(t,e.firstChild):e.appendChild(t);n=t}}return n}function K(e,t,n){let r=!1;for(let o=0,l=t.length;o<l;o++){let l,s=t[o];if(s instanceof Node)e.push(s);else if(null==s||!0===s||!1===s);else if(Array.isArray(s))r=K(e,s)||r;else if("string"==(l=typeof s))e.push(document.createTextNode(s));else if("function"===l)if(n){for(;"function"==typeof s;)s=s();r=K(e,Array.isArray(s)?s:[s])||r}else e.push(s),r=!0;else e.push(document.createTextNode(s.toString()))}return r}function Q(e,t,n){for(let r=0,o=t.length;r<o;r++)e.insertBefore(t[r],n)}function U(e,t,n,r){if(void 0===n)return e.textContent="";const o=r||document.createTextNode("");if(t.length){let r=!1;for(let l=t.length-1;l>=0;l--){const s=t[l];if(o!==s){const t=s.parentNode===e;r||l?t&&e.removeChild(s):t?e.replaceChild(o,s):e.insertBefore(o,n)}else r=!0}}else e.insertBefore(o,n);return[o]}const V=Symbol("store-raw"),W=Symbol("store-node"),X=Symbol("store-name");function Y(t,n){let r=t[e];if(!r){Object.defineProperty(t,e,{value:r=new Proxy(t,re)});const n=Object.keys(t),o=Object.getOwnPropertyDescriptors(t);for(let e=0,l=n.length;e<l;e++){const l=n[e];if(o[l].get){const e=o[l].get.bind(r);Object.defineProperty(t,l,{get:e})}}}return r}function Z(e){return null!=e&&"object"==typeof e&&(!e.__proto__||e.__proto__===Object.prototype||Array.isArray(e))}function ee(e,t=new Set){let n,r,o,l;if(n=null!=e&&e[V])return n;if(!Z(e)||t.has(e))return e;if(Array.isArray(e)){Object.isFrozen(e)?e=e.slice(0):t.add(e);for(let n=0,l=e.length;n<l;n++)o=e[n],(r=ee(o,t))!==o&&(e[n]=r)}else{Object.isFrozen(e)?e=Object.assign({},e):t.add(e);const n=Object.keys(e),s=Object.getOwnPropertyDescriptors(e);for(let i=0,u=n.length;i<u;i++)l=n[i],s[l].get||(o=e[l],(r=ee(o,t))!==o&&(e[l]=r))}return e}function te(e){let t=e[W];return t||Object.defineProperty(e,W,{value:t={}}),t}function ne(){const[e,t]=d(void 0,{equals:!1});return e.$=t,e}const re={get(t,n,r){if(n===V)return t;if(n===e)return r;const o=t[n];if(n===W||"__proto__"===n)return o;const l=Z(o);if(s&&("function"!=typeof o||t.hasOwnProperty(n))){let e,r;l&&(e=te(o))&&(r=e._||(e._=ne()),r()),e=te(t),r=e[n]||(e[n]=ne()),r()}return l?Y(o):o},set:()=>!0,deleteProperty:()=>!0,getOwnPropertyDescriptor:function(t,n){const r=Reflect.getOwnPropertyDescriptor(t,n);return!r||r.get||n===e||n===W||n===X||(delete r.value,delete r.writable,r.get=()=>t[e][n]),r}};function oe(e,t,n){if(e[t]===n)return;const r=Array.isArray(e),o=e.length,l=void 0===n,s=r||l===t in e;l?delete e[t]:e[t]=n;let i,u=te(e);(i=u[t])&&i.$(),r&&e.length!==o&&(i=u.length)&&i.$(i,void 0),s&&(i=u._)&&i.$(i,void 0)}function le(e,t,n=[]){let r,o=e;if(t.length>1){r=t.shift();const l=typeof r,s=Array.isArray(e);if(Array.isArray(r)){for(let o=0;o<r.length;o++)le(e,[r[o]].concat(t),[r[o]].concat(n));return}if(s&&"function"===l){for(let o=0;o<e.length;o++)r(e[o],o)&&le(e,[o].concat(t),[o].concat(n));return}if(s&&"object"===l){const{from:o=0,to:l=e.length-1,by:s=1}=r;for(let r=o;r<=l;r+=s)le(e,[r].concat(t),[r].concat(n));return}if(t.length>1)return void le(e[r],t,[r].concat(n));o=e[r],n=[r].concat(n)}let l=t[0];"function"==typeof l&&(l=l(o,n),l===o)||void 0===r&&null==l||(l=ee(l),void 0===r||Z(o)&&Z(l)&&!Array.isArray(l)?function(e,t){const n=Object.keys(t);for(let r=0;r<n.length;r+=1){const o=n[r];oe(e,o,t[o])}}(o,l):oe(e,r,l))}function se(e,t){const n=ee(e||{});return[Y(n),function(...e){b((()=>le(n,e)))}]}export{q as F,D as S,G as a,$ as b,g as c,L as d,se as e,p as f,R as g,h,H as i,v as o,E as r,z as t}; |
Thanks. The thing is initial load is where this tends to matter the most. Lazy loaded stuff can be loaded at your convenience or in parallel. All size matters but it is much less felt if at all. That's why I think we should be focusing on initial page load.
What matters here is the main chunk (library/router), the chunks associated with the initial page load, and any shared chunks that are used on the first page but also used on others. Now the way this works generally it is possible that some stuff gets loaded as part of shared chunks that isn't used on the first page simply because individual modules can't be split across multiple chunks.
Also I'm not sure I'd consider it rapid. Like it takes these many components to compensate for the library side difference. So like if takes 250 components for Vue and Solid to reach parity, it would take another 250 just to produce a 13kb difference. On the lower end a difference of 13kb could 50% of your bundle. But at 500 components maybe it's 5%.
I'm working on bringing Preact and React in and doing some more comparisons, probably in a separate article mind you.