|
1 | | -import React from 'react'; |
2 | | -import scStyled from 'styled-components'; |
3 | | -import { renderToString } from 'react-dom/server'; |
4 | | -import { createStyled } from '@stitches/react'; |
5 | | - |
6 | | -const { styled: stitchesStyled } = createStyled({}); |
7 | | - |
8 | | -const LOOP = 2000; |
9 | | - |
10 | | -/** |
11 | | - * SETUP: STYLED COMPONENTS |
12 | | - */ |
13 | | -const ScBaseComponent = scStyled.h1({ |
14 | | - color: 'blue', |
15 | | - padding: '1rem', |
16 | | -}); |
17 | | - |
18 | | -const ScOverrideBaseComponent = scStyled(ScBaseComponent)({ |
19 | | - color: 'red', |
20 | | - paddingTop: '5rem', |
21 | | -}); |
22 | | - |
23 | | -const ScDynamicComponent = scStyled.div((props) => ({ |
24 | | - opacity: props.disabled ? 0.5 : 1, |
25 | | -})); |
26 | | - |
27 | | -const ScTest1 = () => { |
28 | | - return <ScOverrideBaseComponent>Hello Test</ScOverrideBaseComponent>; |
29 | | -}; |
30 | | - |
31 | | -const ScTest2 = () => { |
32 | | - return ( |
33 | | - <div> |
34 | | - <ScDynamicComponent disabled>Hello Test</ScDynamicComponent> |
35 | | - <ScDynamicComponent disabled={false}>Hello Test</ScDynamicComponent> |
36 | | - </div> |
37 | | - ); |
38 | | -}; |
39 | | - |
40 | | -/** |
41 | | - * SETUP: STITCHES |
42 | | - */ |
43 | | -const StitchesBaseComponent = stitchesStyled.h1({ |
44 | | - color: 'blue', |
45 | | - padding: '1rem', |
46 | | -}); |
47 | | - |
48 | | -const StitchesOverrideBaseComponent = stitchesStyled(StitchesBaseComponent, { |
49 | | - color: 'red', |
50 | | - paddingTop: '5rem', |
51 | | -}); |
52 | | - |
53 | | -const StitchesDynamicComponent = scStyled.div({ |
54 | | - variants: { |
55 | | - variant: { |
56 | | - muted: { |
57 | | - opacity: 0.5, |
58 | | - }, |
59 | | - }, |
60 | | - }, |
61 | | -}); |
62 | | - |
63 | | -const StitchesTest1 = () => { |
64 | | - return <StitchesOverrideBaseComponent>Hello Test</StitchesOverrideBaseComponent>; |
65 | | -}; |
66 | | - |
67 | | -const StitchesTest2 = () => { |
68 | | - return ( |
69 | | - <div> |
70 | | - <StitchesDynamicComponent variant="muted">Hello Test</StitchesDynamicComponent> |
71 | | - <StitchesDynamicComponent>Hello Test</StitchesDynamicComponent> |
72 | | - </div> |
73 | | - ); |
74 | | -}; |
75 | | - |
76 | | -let start; |
77 | | - |
78 | | -/** |
79 | | - * RUN: STYLED-COMPONENTS |
80 | | - */ |
81 | | -start = performance.now(); |
82 | | -for (let x = 0; x < LOOP; x++) { |
83 | | - scStyled.div({ |
84 | | - padding: x + 'px', |
85 | | - }); |
86 | | -} |
87 | | -const ScDefineUnique = performance.now() - start; |
88 | | - |
89 | | -start = performance.now(); |
90 | | -for (let x = 0; x < LOOP; x++) { |
91 | | - scStyled.div({ |
92 | | - color: 'red', |
93 | | - }); |
94 | | -} |
95 | | -const ScDefineSame = performance.now() - start; |
96 | | - |
97 | | -start = performance.now(); |
98 | | -for (let x = 0; x < LOOP; x++) { |
99 | | - renderToString(<ScTest1 />); |
100 | | -} |
101 | | -const ScConsumeStatic = performance.now() - start; |
102 | | - |
103 | | -start = performance.now(); |
104 | | -for (let x = 0; x < LOOP; x++) { |
105 | | - renderToString(<ScTest2 />); |
106 | | -} |
107 | | -const ScConsumeDynamic = performance.now() - start; |
108 | | - |
109 | | -/** |
110 | | - * RUN: STITCHES |
111 | | - */ |
112 | | -start = performance.now(); |
113 | | -for (let x = 0; x < LOOP; x++) { |
114 | | - stitchesStyled.div({ |
115 | | - padding: x + 'px', |
116 | | - }); |
117 | | -} |
118 | | -const StitchesDefineUnique = performance.now() - start; |
119 | | - |
120 | | -start = performance.now(); |
121 | | -for (let x = 0; x < LOOP; x++) { |
122 | | - stitchesStyled.div({ |
123 | | - color: 'red', |
124 | | - }); |
125 | | -} |
126 | | -const StitchesDefineSame = performance.now() - start; |
127 | | - |
128 | | -start = performance.now(); |
129 | | -for (let x = 0; x < LOOP; x++) { |
130 | | - renderToString(<StitchesTest1 />); |
131 | | -} |
132 | | -const StitchesConsumeStatic = performance.now() - start; |
133 | | - |
134 | | -start = performance.now(); |
135 | | -for (let x = 0; x < LOOP; x++) { |
136 | | - renderToString(<StitchesTest2 />); |
137 | | -} |
138 | | -const StitchesConsumeDynamic = performance.now() - start; |
139 | | - |
140 | | -console.table({ |
141 | | - 'STYLED-COMPONENTS': { |
142 | | - 'define unique': ScDefineUnique, |
143 | | - 'define same': ScDefineSame, |
144 | | - 'consume static': ScConsumeStatic, |
145 | | - 'consume dynamic': ScConsumeDynamic, |
146 | | - }, |
147 | | - STITCHES: { |
148 | | - 'define unique': StitchesDefineUnique, |
149 | | - 'define same': StitchesDefineSame, |
150 | | - 'consume static': StitchesConsumeStatic, |
151 | | - 'consume dynamic': StitchesConsumeDynamic, |
152 | | - }, |
153 | | - 'STITCHES PERF': { |
154 | | - 'define unique': Math.floor((ScDefineUnique / StitchesDefineUnique) * 100) / 100 + 'x', |
155 | | - 'define same': Math.floor((ScDefineSame / StitchesDefineSame) * 100) / 100 + 'x', |
156 | | - 'consume static': Math.floor((ScConsumeStatic / StitchesConsumeStatic) * 100) / 100 + 'x', |
157 | | - 'consume dynamic': Math.floor((ScConsumeDynamic / StitchesConsumeDynamic) * 100) / 100 + 'x', |
158 | | - }, |
159 | | -}); |
| 1 | +import * as ReactDOM from 'react-dom' |
| 2 | +import * as React from 'react' |
| 3 | +import * as Router from 'react-router-dom' |
| 4 | +import loadable from '@loadable/component' |
| 5 | +import './style.css' |
| 6 | + |
| 7 | +const AsyncPage = loadable((props) => import(`./pages${props.location.pathname.replace(/\/$/, '') || '/index'}.js`), { |
| 8 | + cacheKey: (props) => props.location, |
| 9 | +}) |
| 10 | + |
| 11 | +function App() { |
| 12 | + const location = Router.useLocation() |
| 13 | + return <AsyncPage location={location} /> |
| 14 | +} |
| 15 | + |
| 16 | +ReactDOM.render( |
| 17 | + <React.StrictMode> |
| 18 | + <Router.BrowserRouter> |
| 19 | + <App /> |
| 20 | + </Router.BrowserRouter> |
| 21 | + </React.StrictMode>, |
| 22 | + window.root |
| 23 | +) |
0 commit comments