diff --git a/packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/styled/deduped/light-styled-component-create-10k-same.benchmark.js b/packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/styled/deduped/light-styled-component-create-10k-same.benchmark.js new file mode 100644 index 0000000000..c6da168959 --- /dev/null +++ b/packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/styled/deduped/light-styled-component-create-10k-same.benchmark.js @@ -0,0 +1,22 @@ +/* + * Copyright (c) 2018, salesforce.com, inc. + * All rights reserved. + * SPDX-License-Identifier: MIT + * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT + */ + +import StyledComponent from '@lwc/perf-benchmarks-components/dist/ssr/benchmark/light/styledComponent.js'; + +import { styledComponentSsrBenchmark } from '../../../../utils/styledComponentSsrBenchmark'; + +const NUM_COMPONENTS = 10000; + +// Create 10k components with the same CSS in each component +// These are light DOM components running in native mode +styledComponentSsrBenchmark( + `ssr/styled-component/light/create-same/10k`, + NUM_COMPONENTS, + StyledComponent, + { after, before, benchmark, run }, + true +); diff --git a/packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/styled/deduped/light-styled-component-create-1k-different.benchmark.js b/packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/styled/deduped/light-styled-component-create-1k-different.benchmark.js new file mode 100644 index 0000000000..e285bda219 --- /dev/null +++ b/packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/styled/deduped/light-styled-component-create-1k-different.benchmark.js @@ -0,0 +1,22 @@ +/* + * Copyright (c) 2018, salesforce.com, inc. + * All rights reserved. + * SPDX-License-Identifier: MIT + * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT + */ + +import components from '@lwc/perf-benchmarks-components/dist/ssr/benchmark/light/styledComponents.js'; + +import { styledComponentSsrBenchmark } from '../../../../utils/styledComponentSsrBenchmark'; + +const NUM_COMPONENTS = 1000; + +// Create 1k components with different CSS in each component +// These are light DOM components running in native mode +styledComponentSsrBenchmark( + `ssr/styled-component/light/create-different/1k`, + NUM_COMPONENTS, + components, + { after, before, benchmark, run }, + true +); diff --git a/packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/styled/deduped/styled-component-create-10k-same.benchmark.js b/packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/styled/deduped/styled-component-create-10k-same.benchmark.js new file mode 100644 index 0000000000..7b11fc807c --- /dev/null +++ b/packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/styled/deduped/styled-component-create-10k-same.benchmark.js @@ -0,0 +1,21 @@ +/* + * Copyright (c) 2018, salesforce.com, inc. + * All rights reserved. + * SPDX-License-Identifier: MIT + * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT + */ + +import StyledComponent from '@lwc/perf-benchmarks-components/dist/ssr/benchmark/shadow/styledComponent.js'; + +import { styledComponentSsrBenchmark } from '../../../../utils/styledComponentSsrBenchmark'; + +const NUM_COMPONENTS = 10000; + +// Create 10k components with the same CSS in each component +styledComponentSsrBenchmark( + `ssr/styled-component/shadow/create-same/10k`, + NUM_COMPONENTS, + StyledComponent, + { after, before, benchmark, run }, + true +); diff --git a/packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/styled/deduped/styled-component-create-1k-different.benchmark.js b/packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/styled/deduped/styled-component-create-1k-different.benchmark.js new file mode 100644 index 0000000000..74fdc01169 --- /dev/null +++ b/packages/@lwc/perf-benchmarks/src/__benchmarks__/ssr/styled/deduped/styled-component-create-1k-different.benchmark.js @@ -0,0 +1,21 @@ +/* + * Copyright (c) 2018, salesforce.com, inc. + * All rights reserved. + * SPDX-License-Identifier: MIT + * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT + */ + +import components from '@lwc/perf-benchmarks-components/dist/ssr/benchmark/shadow/styledComponents.js'; + +import { styledComponentSsrBenchmark } from '../../../../utils/styledComponentSsrBenchmark'; + +const NUM_COMPONENTS = 1000; + +// Create 1k components with different CSS in each component +styledComponentSsrBenchmark( + `ssr/styled-component/shadow/create-different/1k`, + NUM_COMPONENTS, + components, + { after, before, benchmark, run }, + true +); diff --git a/packages/@lwc/perf-benchmarks/src/utils/styledComponentSsrBenchmark.js b/packages/@lwc/perf-benchmarks/src/utils/styledComponentSsrBenchmark.js index 208d0d0424..8231ba4cb5 100644 --- a/packages/@lwc/perf-benchmarks/src/utils/styledComponentSsrBenchmark.js +++ b/packages/@lwc/perf-benchmarks/src/utils/styledComponentSsrBenchmark.js @@ -5,7 +5,8 @@ export function styledComponentSsrBenchmark( name, numComponents, componentOrComponents, - { benchmark, run } + { benchmark, run }, + styleDedupe ) { benchmark(name, () => { const isArray = Array.isArray(componentOrComponents); @@ -15,7 +16,8 @@ export function styledComponentSsrBenchmark( await renderComponent( isArray ? `styled-component${i}` : 'styled-component', isArray ? componentOrComponents[i] : componentOrComponents, - {} + {}, + styleDedupe ); } });