diff --git a/benchmark/.env.default b/benchmark/.env.default index 72be8f73f7..f12ff1c19d 100644 --- a/benchmark/.env.default +++ b/benchmark/.env.default @@ -2,4 +2,6 @@ WEB_SERVER_HOST="127.0.0.1" WEB_SERVER_PORT=8888 +GENERATE_SCOPED_NAME="vkui[folder]__[local]" + STATIC_BUILD_DIR=/tmp/static/ diff --git a/benchmark/README.md b/benchmark/README.md index a5cb2a551f..7cdc64d158 100644 --- a/benchmark/README.md +++ b/benchmark/README.md @@ -31,58 +31,58 @@ yarn workspace benchmark runtime:start | sampleCount | mean | stdDev | min | median | max | | ----------- | ----- | -------- | ---- | ------ | ---- | -| 15 | 06.36 | ±00.78ms | 04.8 | 06.3 | 07.5 | +| 15 | 06.22 | ±03.24ms | 04.1 | 05.1 | 17.7 | | JSEventListeners | JSHeapTotalSize | JSHeapUsedSize | LayoutCount | LayoutDuration | RecalcStyleCount | RecalcStyleDuration | ScriptDuration | TaskDuration | | ---------------- | --------------- | -------------- | ----------- | -------------- | ---------------- | ------------------- | -------------- | ------------ | -| 140 | 3.4 MiB | 1.8 MiB | 2 | 0.0002 | 2 | 0.001264 | 0.012804 | 0.027651 | +| 142 | 3.6 MiB | 1.9 MiB | 2 | 0.000203 | 2 | 0.00076 | 0.010687 | 0.024557 | ### noop with providers -| sampleCount | mean | stdDev | min | median | max | -| ----------- | ----- | ------- | ---- | ------ | ---- | -| 15 | 08.27 | ±01.6ms | 06.5 | 07.3 | 11.8 | +| sampleCount | mean | stdDev | min | median | max | +| ----------- | ----- | -------- | ---- | ------ | ---- | +| 15 | 07.74 | ±03.37ms | 05.6 | 06.7 | 19.7 | | JSEventListeners | JSHeapTotalSize | JSHeapUsedSize | LayoutCount | LayoutDuration | RecalcStyleCount | RecalcStyleDuration | ScriptDuration | TaskDuration | | ---------------- | --------------- | -------------- | ----------- | -------------- | ---------------- | ------------------- | -------------- | ------------ | -| 146 | 3.4 MiB | 1.9 MiB | 2 | 0.000239 | 2 | 0.001978 | 0.014744 | 0.030872 | +| 148 | 3.6 MiB | 2.0 MiB | 2 | 0.000196 | 2 | 0.001351 | 0.012234 | 0.026332 | ### touch (single) | sampleCount | mean | stdDev | min | median | max | | ----------- | ----- | -------- | ---- | ------ | ---- | -| 15 | 06.61 | ±00.81ms | 05.4 | 06.8 | 07.9 | +| 15 | 06.67 | ±02.66ms | 04.6 | 05.6 | 15.7 | | JSEventListeners | JSHeapTotalSize | JSHeapUsedSize | LayoutCount | LayoutDuration | RecalcStyleCount | RecalcStyleDuration | ScriptDuration | TaskDuration | | ---------------- | --------------- | -------------- | ----------- | -------------- | ---------------- | ------------------- | -------------- | ------------ | -| 140 | 3.4 MiB | 1.8 MiB | 2 | 0.001813 | 2 | 0.001409 | 0.013405 | 0.030949 | +| 142 | 3.6 MiB | 1.9 MiB | 2 | 0.001976 | 2 | 0.000853 | 0.011143 | 0.027705 | ### touch width providers (single) -| sampleCount | mean | stdDev | min | median | max | -| ----------- | ----- | ------- | ---- | ------ | ---- | -| 15 | 10.99 | ±03.2ms | 07.4 | 07.4 | 18.5 | +| sampleCount | mean | stdDev | min | median | max | +| ----------- | ----- | -------- | ---- | ------ | ---- | +| 15 | 07.77 | ±02.45ms | 05.8 | 06.7 | 15.4 | | JSEventListeners | JSHeapTotalSize | JSHeapUsedSize | LayoutCount | LayoutDuration | RecalcStyleCount | RecalcStyleDuration | ScriptDuration | TaskDuration | | ---------------- | --------------- | -------------- | ----------- | -------------- | ---------------- | ------------------- | -------------- | ------------ | -| 146 | 3.6 MiB | 1.9 MiB | 2 | 0.002033 | 2 | 0.001977 | 0.015241 | 0.034252 | +| 148 | 3.6 MiB | 2.1 MiB | 2 | 0.001986 | 2 | 0.001306 | 0.012726 | 0.027759 | ### touch (multiple) -| sampleCount | mean | stdDev | min | median | max | -| ----------- | ----- | -------- | ---- | ------ | ---- | -| 15 | 44.15 | ±01.66ms | 41.1 | 44.9 | 46.1 | +| sampleCount | mean | stdDev | min | median | max | +| ----------- | ----- | -------- | --- | ------ | ----- | +| 15 | 45.48 | ±24.74ms | 34 | 36 | 135.8 | | JSEventListeners | JSHeapTotalSize | JSHeapUsedSize | LayoutCount | LayoutDuration | RecalcStyleCount | RecalcStyleDuration | ScriptDuration | TaskDuration | | ---------------- | --------------- | -------------- | ----------- | -------------- | ---------------- | ------------------- | -------------- | ------------ | -| 140 | 8.8 MiB | 4.0 MiB | 2 | 0.012301 | 2 | 0.003312 | 0.02725 | 0.065623 | +| 142 | 12.9 MiB | 4.2 MiB | 2 | 0.006121 | 2 | 0.002218 | 0.026943 | 0.055499 | ### touch with providers (multiple) | sampleCount | mean | stdDev | min | median | max | | ----------- | ----- | -------- | ---- | ------ | ----- | -| 15 | 56.35 | ±31.46ms | 44.5 | 47.3 | 173.4 | +| 15 | 56.09 | ±36.49ms | 35.9 | 38.1 | 152.9 | | JSEventListeners | JSHeapTotalSize | JSHeapUsedSize | LayoutCount | LayoutDuration | RecalcStyleCount | RecalcStyleDuration | ScriptDuration | TaskDuration | | ---------------- | --------------- | -------------- | ----------- | -------------- | ---------------- | ------------------- | -------------- | ------------ | -| 146 | 8.8 MiB | 4.0 MiB | 2 | 0.012215 | 2 | 0.004027 | 0.029771 | 0.069578 | +| 148 | 12.9 MiB | 4.3 MiB | 3 | 0.005944 | 3 | 0.002534 | 0.0284 | 0.057386 | diff --git a/benchmark/package.json b/benchmark/package.json index 7306a6bfdc..b4502dda05 100644 --- a/benchmark/package.json +++ b/benchmark/package.json @@ -13,10 +13,10 @@ "@swc/core": "^1.9.3", "@vkontakte/vkui": "workspace:packages/vkui", "cli-table3": "^0.6.1", - "css-loader": "^6.10.0", + "css-loader": "7.1.2", "css-minimizer-webpack-plugin": "^7.0.0", "dotenv": "^16.4.7", - "finalhandler": "1.3.1", + "finalhandler": "2.0.0", "html-webpack-plugin": "^5.6.3", "mini-css-extract-plugin": "^2.9.2", "playwright": "1.49.1", diff --git a/benchmark/runtime/webpack.config.mjs b/benchmark/runtime/webpack.config.mjs index 442e1dd2d6..2d9bebc56a 100644 --- a/benchmark/runtime/webpack.config.mjs +++ b/benchmark/runtime/webpack.config.mjs @@ -16,25 +16,16 @@ dotenv.config({ override: true, }); -const GENERATE_SCOPED_NAME = 'vkui[local]'; -const SWC_LOADER_BASE_OPTIONS = { - target: 'es2016', - externalHelpers: true, - parser: { syntax: 'typescript', tsx: true }, - transform: { react: { runtime: 'automatic' } }, -}; - -const workspaceRoot = path.resolve(import.meta.dirname, '../..'); const sourceRoot = path.resolve(import.meta.dirname, 'src'); - -const cases = fs.readdirSync(sourceRoot); +const testCases = fs.readdirSync(sourceRoot); /** @type { import('webpack').Configuration } */ const webpackConfig = { - context: workspaceRoot, + context: path.resolve(import.meta.dirname, '../..'), mode: 'production', target: 'web', - entry: cases.reduce( + // devtool: false, + entry: testCases.reduce( (entries, caseName) => { entries[caseName] = { import: path.join(sourceRoot, caseName, 'index.tsx'), @@ -53,22 +44,20 @@ const webpackConfig = { module: { rules: [ { - test: /\.tsx?$/, - exclude: /node_modules/, - loader: 'swc-loader', - options: { jsc: SWC_LOADER_BASE_OPTIONS }, - }, - { - test: /\.jsx?$/, - include: /node_modules\/@vkontakte\/vkui/, + test: /\.[jt]sx?$/, loader: 'swc-loader', options: { jsc: { - ...SWC_LOADER_BASE_OPTIONS, + target: 'es2016', + externalHelpers: true, + parser: { syntax: 'typescript', tsx: true }, + transform: { react: { runtime: 'automatic' } }, experimental: { plugins: [ - ['swc-plugin-css-modules', { generate_scoped_name: GENERATE_SCOPED_NAME }], - ['swc-plugin-transform-remove-imports', { test: '\\.css$' }], + [ + 'swc-plugin-css-modules', + { generate_scoped_name: process.env.GENERATE_SCOPED_NAME }, + ], ], }, }, @@ -76,28 +65,24 @@ const webpackConfig = { }, { test: /\.css$/i, - exclude: /node_modules/, - use: [MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { modules: false } }], + exclude: /\.module\.css$/, + use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'], }, { - test: /\.module.css$/, - include: /node_modules\/@vkontakte\/vkui/, + test: /\.module\.css$/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', - options: { modules: false, importLoaders: 1 }, - }, - { - loader: 'postcss-loader', options: { - postcssOptions: { - plugins: [ - cssModules({ generateScopedName: GENERATE_SCOPED_NAME, getJSON: () => void 0 }), - ], + modules: { + namedExport: false, + exportLocalsConvention: 'as-is', + localIdentName: process.env.GENERATE_SCOPED_NAME, }, }, }, + 'postcss-loader', ], }, ], @@ -110,7 +95,7 @@ const webpackConfig = { }, plugins: [ new MiniCssExtractPlugin({ filename: '[name].css' }), - ...cases.map( + ...testCases.map( (caseName) => new HtmlWebpackPlugin({ filename: `${caseName}.html`, diff --git a/yarn.lock b/yarn.lock index eb1b642352..414b1cec92 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5507,10 +5507,10 @@ __metadata: "@swc/core": "npm:^1.9.3" "@vkontakte/vkui": "workspace:packages/vkui" cli-table3: "npm:^0.6.1" - css-loader: "npm:^6.10.0" + css-loader: "npm:7.1.2" css-minimizer-webpack-plugin: "npm:^7.0.0" dotenv: "npm:^16.4.7" - finalhandler: "npm:1.3.1" + finalhandler: "npm:2.0.0" html-webpack-plugin: "npm:^5.6.3" mini-css-extract-plugin: "npm:^2.9.2" playwright: "npm:1.49.1" @@ -6579,9 +6579,9 @@ __metadata: languageName: node linkType: hard -"css-loader@npm:^6.10.0, css-loader@npm:^6.7.1": - version: 6.11.0 - resolution: "css-loader@npm:6.11.0" +"css-loader@npm:7.1.2, css-loader@npm:^7.1.2": + version: 7.1.2 + resolution: "css-loader@npm:7.1.2" dependencies: icss-utils: "npm:^5.1.0" postcss: "npm:^8.4.33" @@ -6593,19 +6593,19 @@ __metadata: semver: "npm:^7.5.4" peerDependencies: "@rspack/core": 0.x || 1.x - webpack: ^5.0.0 + webpack: ^5.27.0 peerDependenciesMeta: "@rspack/core": optional: true webpack: optional: true - checksum: 10/9e3665509f6786d46683de5c5f5c4bdd4aa62396b4017b41dbbb41ea5ada4012c80ee1e3302b79b504bc24da7fa69e3552d99006cecc953e0d9eef4a3053b929 + checksum: 10/ddde22fb103888320f60a1414a6a04638d2e9760a532a52d03c45e6e2830b32dd76c734aeef426f78dd95b2d15f77eeec3854ac53061aff02569732dc6e6801c languageName: node linkType: hard -"css-loader@npm:^7.1.2": - version: 7.1.2 - resolution: "css-loader@npm:7.1.2" +"css-loader@npm:^6.7.1": + version: 6.11.0 + resolution: "css-loader@npm:6.11.0" dependencies: icss-utils: "npm:^5.1.0" postcss: "npm:^8.4.33" @@ -6617,13 +6617,13 @@ __metadata: semver: "npm:^7.5.4" peerDependencies: "@rspack/core": 0.x || 1.x - webpack: ^5.27.0 + webpack: ^5.0.0 peerDependenciesMeta: "@rspack/core": optional: true webpack: optional: true - checksum: 10/ddde22fb103888320f60a1414a6a04638d2e9760a532a52d03c45e6e2830b32dd76c734aeef426f78dd95b2d15f77eeec3854ac53061aff02569732dc6e6801c + checksum: 10/9e3665509f6786d46683de5c5f5c4bdd4aa62396b4017b41dbbb41ea5ada4012c80ee1e3302b79b504bc24da7fa69e3552d99006cecc953e0d9eef4a3053b929 languageName: node linkType: hard @@ -8652,6 +8652,21 @@ __metadata: languageName: node linkType: hard +"finalhandler@npm:2.0.0": + version: 2.0.0 + resolution: "finalhandler@npm:2.0.0" + dependencies: + debug: "npm:2.6.9" + encodeurl: "npm:~1.0.2" + escape-html: "npm:~1.0.3" + on-finished: "npm:2.4.1" + parseurl: "npm:~1.3.3" + statuses: "npm:2.0.1" + unpipe: "npm:~1.0.0" + checksum: 10/59b941fd40fcd2e173c858a47cccd493abf9709df54d5e06ef51be910957b6de7518af79110851f721e826dc246ce4456290d8dfe24a58b13488264690f76ed8 + languageName: node + linkType: hard + "find-cache-dir@npm:^2.0.0": version: 2.1.0 resolution: "find-cache-dir@npm:2.1.0"