@tramvai/cli 5.53.80 → 5.53.94

package/src/commands/benchmark/benchmark.ts

@@ -1,59 +1,194 @@
-import mdtable from 'mdtable';
-import prettyBytes from 'pretty-bytes';
+import { table, TableUserConfig } from 'table';
+import isEmpty from '@tinkoff/utils/is/empty';
+
 import type { Context } from '../../models/context';
 import type { CommandResult } from '../../models/command';
 import type { Result } from '../../api/benchmark';
+import type { CompilationStats } from '../../api/benchmark/types';
+import { DEFAULT_TIMES } from '../../api/benchmark/const';
 
 import { app } from '../index';
 
-const roundStats = (n: number) => Math.round(100 * n) / 100;
+export function toFixedDigits(num: number, digits = 2): number {
+  if (digits === 0) {
+    return Math.floor(num);
+  }
+  return +num.toFixed(digits);
+}
+
+const getUnit = (num: number) => (num > 1 ? 'mins' : 'min');
+
+export function formatCosts(costs: number): string {
+  // more than 1s
+  if (costs >= 1000) {
+    const sec = costs / 1000;
+    // more than 1min
+    if (sec >= 60) {
+      let mins = sec / 60;
+
+      mins = toFixedDigits(mins, 0);
+      const mUnit = getUnit(mins);
+      const restSec = toFixedDigits(sec % 60, 0);
+
+      if (restSec > 0) {
+        return `${mins}${mUnit} ${restSec}s`;
+      }
+      return `${mins}${mUnit}`;
+    }
+
+    return `${toFixedDigits(sec, 1)}s`;
+  }
+
+  if (costs >= 10) {
+    return `${+toFixedDigits(costs, 0)}ms`;
+  }
+
+  if (costs >= 1) {
+    return `${+toFixedDigits(costs, 1)}ms`;
+  }
+
+  let r = +toFixedDigits(costs, 2);
+
+  if (r === 0) {
+    r = +toFixedDigits(costs, 3);
+  }
+
+  return `${r}ms`;
+}
+
+const formatValues = (measures: Record<string, number>) => {
+  const result: [string, string][] = [];
+
+  for (const measureName in measures) {
+    const measureValue = measures[measureName];
+    result.push([measureName, formatCosts(measureValue)]);
+  }
+
+  return result;
+};
+
+const filterStats = (measures: Record<string, number>) => {
+  const entries = Object.entries(measures);
+  entries.sort((a, b) => b[1] - a[1]);
 
-const formatTimeStats = (stats: Result[string]['client']) => {
-  return `${roundStats(stats.mean)}ms ± ${roundStats(stats.variance)}%`;
+  return entries.slice(0, 5).reduce((acc, [key, value]) => {
+    acc[key] = value;
+    return acc;
+  }, {});
 };
 
-const formatMemoryStats = (stats: Result[string]['client']) => {
-  const value = prettyBytes(stats.mean, {
-    maximumFractionDigits: 2,
-  });
+const getInfo = (compilationStats: CompilationStats) => {
+  const { totalBuildCosts, loaderBuildCosts, pluginBuildCosts } = compilationStats;
+
+  const totalBuildInfo = formatValues(totalBuildCosts);
+  const loaderInfo = formatValues(filterStats(loaderBuildCosts));
+  const pluginInfo = formatValues(filterStats(pluginBuildCosts));
 
-  return `${value} ± ${roundStats(stats.variance)}%`;
+  return { totalBuildInfo, loaderInfo, pluginInfo };
 };
 
-const formatStatsTable = (stats: Result) => {
-  const header = [''] as string[];
-  const alignment = ['C'] as string[];
-  const rows = [['time'], ['mem']] as string[][];
+const mergeTotalInfo = (
+  server?: [string, string][] | undefined,
+  client?: [string, string][] | undefined
+) => {
+  const result = [];
 
-  for (const key in stats) {
-    header.push(key);
-    alignment.push('C');
+  for (let i = 0; i < (server?.length ?? client?.length); i++) {
+    result.push([
+      server?.[i][0] ?? client?.[i][0] ?? '-',
+      server?.[i][1] ?? '0',
+      client?.[i][1] ?? '0',
+    ]);
+  }
+
+  return result;
+};
 
-    const { client, server, maxMemoryRss } = stats[key];
+const mergeAdditionalInfo = (
+  server?: [string, string][] | undefined,
+  client?: [string, string][] | undefined
+) => {
+  const result = [];
 
-    rows[0].push(`${formatTimeStats(client)} / ${formatTimeStats(server)}`);
-    rows[1].push(formatMemoryStats(maxMemoryRss));
+  for (let i = 0; i < (server?.length ?? client?.length); i++) {
+    result.push([
+      server?.[i][0] ?? '-',
+      server?.[i][1] ?? '0',
+      client?.[i][0] ?? '-',
+      client?.[i][1] ?? 0,
+    ]);
   }
 
-  return mdtable(
-    {
-      header,
-      alignment,
-      rows,
-    },
-    {
-      borders: true,
-      padding: 1,
-    }
-  );
+  return result;
+};
+
+const formatBuildTime = (totalBuildTime) =>
+  totalBuildTime ? `${(totalBuildTime / 1000).toFixed(2)}s` : '-';
+
+const formatMemoryRss = (memoryRss) => (memoryRss ? `${(memoryRss / 1000000).toFixed(2)}mb` : '-');
+
+const formatStatsTables = (stats: Result, times: number | undefined = DEFAULT_TIMES) => {
+  const {
+    clientBuildTime,
+    clientCompilationStats,
+    serverBuildTime,
+    serverCompilationStats,
+    maxMemoryRss,
+    clientMaxMemoryRss,
+    serverMaxMemoryRss,
+  } = stats;
+  const serverInfo = !isEmpty(serverCompilationStats) && getInfo(serverCompilationStats);
+  const clientInfo = !isEmpty(clientCompilationStats) && getInfo(clientCompilationStats);
+
+  const totalBuildData = [
+    [`Mean durations (${times} times)`, 'server', 'client'],
+    ['Total build time', formatBuildTime(serverBuildTime), formatBuildTime(clientBuildTime)],
+    maxMemoryRss
+      ? ['Total memory', formatMemoryRss(maxMemoryRss), '']
+      : ['Total memory', formatMemoryRss(serverMaxMemoryRss), formatMemoryRss(clientMaxMemoryRss)],
+    ...mergeTotalInfo(serverInfo.totalBuildInfo, clientInfo.totalBuildInfo),
+  ].filter(Boolean);
+
+  const totalBuildTableConfig: TableUserConfig = {
+    columns: [{ alignment: 'left' }, { alignment: 'center' }, { alignment: 'center' }],
+  };
+
+  if (maxMemoryRss) {
+    // @ts-expect-error
+    totalBuildTableConfig.spanningCells = [{ col: 1, row: 2, colSpan: 2, alignment: 'center' }];
+  }
+
+  const mergedLoadersInfo = mergeAdditionalInfo(serverInfo.loaderInfo, clientInfo.loaderInfo);
+  const mergedPluginsInfo = mergeAdditionalInfo(serverInfo.pluginInfo, clientInfo.pluginInfo);
+  const additionalBuildData = [
+    ['server', '', 'client', ''],
+    ['Loaders', '', '', ''],
+    ...mergedLoadersInfo,
+    ['Plugins', '', '', ''],
+    ...mergedPluginsInfo,
+  ];
+
+  const additionalBuildTableConfig: TableUserConfig = {
+    spanningCells: [
+      { col: 0, row: 0, colSpan: 2, alignment: 'center' },
+      { col: 2, row: 0, colSpan: 2, alignment: 'center' },
+      { col: 0, row: 1, colSpan: 4, alignment: 'center' },
+      { col: 0, row: mergedLoadersInfo.length + 2, colSpan: 4, alignment: 'center' },
+    ],
+  };
+
+  return [
+    table(totalBuildData, totalBuildTableConfig),
+    table(additionalBuildData, additionalBuildTableConfig),
+  ];
 };
 
-export default async (context: Context, parameters): Promise<CommandResult | any> => {
+export default async (_context: Context, parameters): Promise<CommandResult | any> => {
   const { command, times, ...commandOptions } = parameters;
 
   const stats = await app.run('benchmark', { command, times, commandOptions });
 
-  console.log(formatStatsTable(stats));
+  formatStatsTables(stats, times).forEach((buildTable) => console.log(buildTable));
 
   return Promise.resolve({
     status: 'ok',

package/src/commands/benchmark/command.ts

@@ -36,6 +36,18 @@ export class BenchmarkCommand extends CLICommand<Params> {
       description:
         'Specify the names of the bundles that need to be collected, other bundles will not be collected and their request will fail with an error',
     },
+    {
+      name: '--fileCache',
+      value: '[fileCache]',
+      transformer: (value: string) => value !== 'false',
+      description: 'Enable/disable persistent file cache for used cli builder',
+    },
+    {
+      name: '-t, --buildType',
+      value: '[type]',
+      description: 'Build type <client|server>',
+      defaultValue: 'client',
+    },
     {
       name: '--times',
       value: '[times]',

package/src/commands/build/command.ts

@@ -54,6 +54,12 @@ class BuildCommand extends CLICommand<Params> {
       value: '[forPublish]',
       description: '<package> Prepare library package.json for publication',
     },
+    {
+      name: '--analyze',
+      value: '[analyze]',
+      description:
+        'Run build with analyze, supported plugins: <bundle|whybundled|statoscope|rsdoctor>',
+    },
     {
       name: '--fileCache',
       value: '[fileCache]',

package/src/commands/new/steps/installDependencies.ts

@@ -62,7 +62,7 @@ const devDependencies = [
   'postcss-nested',
   'husky@^4',
   'lint-staged',
-  'prettier-config-tinkoff',
+  '@tramvai/prettier-config',
   'typescript',
 ];
 

package/src/commands/new/templates/shared/_prettierrc.js.hbs

@@ -1 +1 @@
-module.exports = require('prettier-config-tinkoff');
+module.exports = require('@tramvai/prettier-config');

package/src/commands/new/templates/shared/package.json.hbs

@@ -9,7 +9,7 @@
     "start": "tramvai start {{configEntry.name}}",
     "build": "tramvai build {{configEntry.name}}",
     "preview": "tramvai start-prod {{configEntry.name}}",
-    "analyze": "tramvai analyze {{configEntry.name}}",
+    "analyze": "tramvai {{configEntry.name}} --analyze=statoscope",
     "lint": "eslint --ext .ts,.tsx --ignore-path .gitignore ."{{#if isJest}},
     "test": "jest --passWithNoTests",
     "test:watch": "jest --watch",

package/src/commands/start/command.ts

@@ -95,6 +95,12 @@ export class StartCommand extends CLICommand<Params> {
       value: '[showConfig]',
       description: 'Show config with which cli was launched',
     },
+    {
+      name: '--analyze',
+      value: '[analyze]',
+      description:
+        'Run build with analyze, supported plugins: <bundle|whybundled|statoscope|rsdoctor>',
+    },
     {
       name: '--onlyBundles',
       value: '[onlyBundles]',

package/src/config/configManager.ts

@@ -37,9 +37,11 @@ export interface Settings<E extends Env> {
   profile?: boolean;
   noServerRebuild?: boolean;
   noClientRebuild?: boolean;
+  benchmark?: boolean;
   resolveSymlinks?: boolean;
   showConfig?: boolean;
   onlyBundles?: string[];
+  analyze?: false | 'bundle' | 'whybundled' | 'statoscope' | 'rsdoctor';
   disableProdOptimization?: boolean;
   fileCache?: boolean;
 }
@@ -131,8 +133,10 @@ export const createConfigManager = <C extends ConfigEntry = ConfigEntry, E exten
     profile: false,
     noClientRebuild: false,
     noServerRebuild: false,
+    benchmark: false,
     resolveSymlinks: true,
     disableProdOptimization: false,
+    analyze: false,
     onlyBundles: [],
     // according to measures fileCache in webpack doesn't affect
     // performance much so enable it by default as it always was before

package/src/library/webpack/blocks/js.ts

@@ -1,3 +1,4 @@
+import path from 'node:path';
 import type Config from 'webpack-chain';
 import { modernLibsFilter } from '@tinkoff/is-modern-lib';
 import { applyThreadLoader } from '../utils/threadLoader';
@@ -5,25 +6,22 @@ import type { ConfigManager } from '../../../config/configManager';
 import { getTranspilerConfig, addTranspilerLoader } from '../utils/transpiler';
 import type { CliConfigEntry } from '../../../typings/configEntry/cli';
 
-// eslint-disable-next-line import/no-default-export
-export default (configManager: ConfigManager<CliConfigEntry>) => (config: Config) => {
-  const { transpileOnlyModernLibs } = configManager;
-
-  const rule = config.module
-    .rule('js')
-    .test(/\.[cm]?js[x]?$/)
-    .batch(applyThreadLoader(configManager));
+const projectRulesName = 'project';
+const nodeModuleRulesName = 'node_module';
 
+const applyProjectRules = (rule, configManager) => {
   rule
-    .oneOf('project')
+    .oneOf(projectRulesName)
     .exclude.add(/node_modules/)
     .end()
     .use('transpiler')
-    .batch(addTranspilerLoader(configManager, getTranspilerConfig(configManager)));
+    .batch(addTranspilerLoader(configManager, getTranspilerConfig(configManager)))
+    .end();
+};
 
+const applyNodeModulesRules = (rule, configManager) => {
   rule
-    .oneOf('node_module')
-    .when(transpileOnlyModernLibs, (cfg) => cfg.include.add(modernLibsFilter))
+    .oneOf(nodeModuleRulesName)
     .merge({
       // true value forces to use file extensions for importing mjs modules
       // but we want to use mjs if it exists anyway
@@ -32,3 +30,54 @@ export default (configManager: ConfigManager<CliConfigEntry>) => (config: Config
     .use('transpiler')
     .batch(addTranspilerLoader(configManager, getTranspilerConfig(configManager, { hot: false })));
 };
+
+// eslint-disable-next-line import/no-default-export
+export default (configManager: ConfigManager<CliConfigEntry>) => (config: Config) => {
+  const { transpileOnlyModernLibs } = configManager;
+  const { include } = configManager.experiments.transpilation;
+  const shouldTranspileOnlyModern = transpileOnlyModernLibs || include === 'only-modern';
+
+  const rule = config.module
+    .rule('js')
+    .test(/\.[cm]?js[x]?$/)
+    .batch(applyThreadLoader(configManager));
+
+  if (configManager.env === 'production') {
+    applyProjectRules(rule, configManager);
+    applyNodeModulesRules(rule, configManager);
+
+    if (shouldTranspileOnlyModern) {
+      rule.oneOf(nodeModuleRulesName).include.add(modernLibsFilter);
+    }
+  } else {
+    const shouldSkipTranspiling = include === 'none';
+    const shouldSelectiveTranspile = Array.isArray(include);
+
+    if (shouldSkipTranspiling) {
+      rule.exclude
+        .add(/node_modules/)
+        .end()
+        .use('transpiler')
+        .batch(addTranspilerLoader(configManager, getTranspilerConfig(configManager)));
+    } else {
+      applyProjectRules(rule, configManager);
+      applyNodeModulesRules(rule, configManager);
+
+      if (shouldSelectiveTranspile) {
+        const includeForTranspiling = (<string[]>include).map((includePath) =>
+          // require.resolve return absolute path to entrypoint of dependency
+          // but we need root dirname of dependency inside node_modules
+          path.dirname(require.resolve(`${includePath}/package.json`))
+        );
+
+        includeForTranspiling.forEach((includePath) => {
+          rule.oneOf(nodeModuleRulesName).include.add(includePath);
+        });
+      } else if (shouldTranspileOnlyModern) {
+        if (shouldTranspileOnlyModern) {
+          rule.oneOf(nodeModuleRulesName).include.add(modernLibsFilter);
+        }
+      }
+    }
+  }
+};

package/src/library/webpack/common/main.ts

@@ -3,6 +3,7 @@ import type Config from 'webpack-chain';
 import path from 'path';
 import { existsSync } from 'fs-extra';
 import findCacheDir from 'find-cache-dir';
+import { RsdoctorWebpackMultiplePlugin } from '@rsdoctor/webpack-plugin';
 import { ignoreWarnings } from '../utils/warningsFilter';
 import resolve from '../blocks/resolve';
 import ignoreLocales from '../blocks/ignoreLocales';
@@ -10,6 +11,7 @@ import type { ConfigManager } from '../../../config/configManager';
 import { safeRequireResolve } from '../../../utils/safeRequire';
 import type { CliConfigEntry } from '../../../typings/configEntry/cli';
 import { getPostcssConfigPath } from '../blocks/css';
+import { getRsdoctorOptions } from '../utils/rsdoctor';
 
 const filterNonExisted = (filePaths: string[]) => {
   return filePaths.filter((filePath) => {
@@ -126,6 +128,12 @@ export default (configManager: ConfigManager<CliConfigEntry>) => (config: Config
       },
     ]);
 
+  if (configManager.benchmark) {
+    config
+      .plugin('rsdoctor-benchmark')
+      .use(RsdoctorWebpackMultiplePlugin, [getRsdoctorOptions(configManager.buildType)]);
+  }
+
   // TODO: remove after dropping support for node@14
   if (configManager.buildType === 'server') {
     config.plugin('node-performance').use(webpack.ProvidePlugin, [

package/src/library/webpack/utils/rsdoctor.ts

@@ -0,0 +1,26 @@
+import { RsdoctorWebpackPlugin } from '@rsdoctor/webpack-plugin';
+
+type options = ConstructorParameters<typeof RsdoctorWebpackPlugin<[]>>[0];
+
+export const getRsdoctorOptions = (buildType: 'client' | 'server'): options => ({
+  disableClientServer: true,
+  features: ['plugins', 'loader'],
+  linter: {
+    level: 'Ignore',
+  },
+  output: {
+    reportDir: './.rsdoctor',
+    mode: 'brief',
+    options: {
+      type: ['json'],
+      jsonOptions: {
+        fileName: `${buildType}-rsdoctor-data.json`,
+        sections: {
+          moduleGraph: false,
+          chunkGraph: false,
+          rules: false,
+        },
+      },
+    },
+  },
+});

package/src/library/webpack/utils/threadLoader.ts

@@ -23,6 +23,7 @@ const createWorkerPoolConfig = (configManager: ConfigManager<CliConfigEntry>) =>
 
 const isApplicable = (configManager: ConfigManager<CliConfigEntry>) => {
   return (
+    !configManager.benchmark &&
     // thread-loader uses child_process.fork under the hood, and sometimes (50/50) work in these processes does not get into inspector.Session profile
     !process.env.TRAMVAI_CPU_PROFILE &&
     !process.env.TRAMVAI_DEBUG_BUILD &&

package/src/models/config.spec.ts

@@ -76,6 +76,7 @@ it('should populate defaults for config', () => {
             "runtimeChunk": false,
             "serverRunner": "thread",
             "transpilation": {
+              "include": "only-modern",
               "loader": "babel",
             },
             "viewTransitions": false,
@@ -152,6 +153,7 @@ it('should populate defaults for config', () => {
             "minifier": "terser",
             "reactCompiler": false,
             "transpilation": {
+              "include": "only-modern",
               "loader": "babel",
             },
             "webpack": {
@@ -325,6 +327,7 @@ it('should populate defaults for overridable options', () => {
             "runtimeChunk": false,
             "serverRunner": "thread",
             "transpilation": {
+              "include": "only-modern",
               "loader": {
                 "development": "swc",
                 "production": "babel",
@@ -419,6 +422,7 @@ it('should populate defaults for overridable options', () => {
             "minifier": "terser",
             "reactCompiler": false,
             "transpilation": {
+              "include": "only-modern",
               "loader": {
                 "development": "babel",
                 "production": "babel",