Imirdzhamolov/fix/benchmark build (#8090)

h2. Описание Из-за css-loader v6 перестал запускаться бенчмарк. h2. Изменения - Обновил css-loader до v7, а также поправил лоадеры – `@vkontakte/vkui` берётся из `packages/vkui`, а не из `node_modules`, поэтому убрал отдельные лоадеры, которые были завязаны на `node_modules`. - Заодно обнаружил, что стили не подключались в HTML из-за `swc-plugin-transform-remove-imports`. Удалил плагин. - `GENERATE_SCOPED_NAME` перенёс в `.env.default`. h2. Benchmark Обновил бенчмарк в `README.md` 7119fd4 Памяти немного больше пример `src/touch.tsx` стал потреблять.
VKCOM · Dec 17, 2024 · b565c40 · b565c40
1 parent 4c3d1e1
commit b565c40
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 69 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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,51 +44,45 @@ 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 },
+                ],
               ],
             },
           },
         },
       },
       {
         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
@@ -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"
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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/