feat(builder): improve time logs format (#4702)

* feat(builder): improve time logs format

* chore: improve

* fix: only remove digits for ms time

* chore: fix filesize round

* chore: update doc

.changeset/rude-ghosts-reflect.md

@@ -0,0 +1,9 @@
+---
+'@modern-js/builder-webpack-provider': patch
+'@modern-js/builder-rspack-provider': patch
+'@modern-js/builder-shared': patch
+---
+
+feat(builder): improve time logs format
+
+feat(builder): 优化时间日志的格式

packages/builder/builder-rspack-provider/src/core/createCompiler.ts

@@ -1,11 +1,11 @@
 import {
   debug,
   logger,
+  prettyTime,
   formatStats,
   TARGET_ID_MAP,
 } from '@modern-js/builder-shared';
 import type { Context, RspackConfig } from '../types';
-import prettyTime from '@modern-js/builder-shared/pretty-time';
 
 export async function createCompiler({
   context,
@@ -35,7 +35,7 @@ export async function createCompiler({
     if (!stats.hasErrors()) {
       obj.children?.forEach((c, index) => {
         if (c.time) {
-          const time = prettyTime([0, c.time * 10 ** 6], 0);
+          const time = prettyTime([0, c.time * 10 ** 6]);
           const target = Array.isArray(context.target)
             ? context.target[index]
             : context.target;

packages/builder/builder-shared/package.json

@@ -94,10 +94,6 @@
       "types": "./compiled/postcss-modules-values/index.d.ts",
       "default": "./compiled/postcss-modules-values/index.js"
     },
-    "./pretty-time": {
-      "types": "./compiled/pretty-time/index.d.ts",
-      "default": "./compiled/pretty-time/index.js"
-    },
     "./webpack-merge": {
       "types": "./compiled/webpack-merge/index.d.ts",
       "default": "./compiled/webpack-merge/index.js"
@@ -148,9 +144,6 @@
       "postcss-modules-values": [
         "./compiled/postcss-modules-values/index.d.ts"
       ],
-      "pretty-time": [
-        "./compiled/pretty-time/index.d.ts"
-      ],
       "webpack-merge": [
         "./compiled/webpack-merge/types/index.d.ts"
       ]
@@ -212,7 +205,6 @@
       "./postcss-modules-local-by-default": "./compiled/postcss-modules-local-by-default/index.js",
       "./postcss-modules-scope": "./compiled/postcss-modules-scope/index.js",
       "./postcss-modules-values": "./compiled/postcss-modules-values/index.js",
-      "./pretty-time": "./compiled/pretty-time/index.js",
       "./webpack-merge": "./compiled/webpack-merge/index.js"
     }
   }

packages/builder/builder-shared/src/index.ts

@@ -32,3 +32,4 @@ export * from './css';
 export * from './minimize';
 export * from './core-js';
 export * from './progress';
+export * from './prettyTime';

packages/builder/builder-shared/src/prettyTime.ts

@@ -0,0 +1,22 @@
+import basePrettyTime from '../compiled/pretty-time';
+import chalk from '@modern-js/utils/chalk';
+
+const TIME_REGEXP = /([\d.]+)([a-zA-Z]+)/;
+
+export const prettyTime = (time: number | [number, number], digits = 1) => {
+  const timeStr: string = basePrettyTime(time, digits);
+
+  return timeStr.replace(TIME_REGEXP, (match, p1, p2) => {
+    if (p1 && p2) {
+      let time = p1;
+
+      // remove digits of ms time
+      if (p2 === 'ms') {
+        time = Number(time).toFixed(0);
+      }
+
+      return `${chalk.bold(time)} ${p2}`;
+    }
+    return chalk.bold(match);
+  });
+};

packages/builder/builder-webpack-provider/src/webpackPlugins/ProgressPlugin/ProgressPlugin.ts

@@ -1,6 +1,6 @@
 import webpack from 'webpack';
 import { logger } from '@modern-js/utils/logger';
-import prettyTime from '@modern-js/builder-shared/pretty-time';
+import { prettyTime } from '@modern-js/builder-shared';
 import { bus, createFriendlyPercentage } from './helpers';
 import { createNonTTYLogger } from './helpers/nonTty';
 import type { Props } from './helpers/type';
@@ -85,7 +85,7 @@ export class ProgressPlugin extends webpack.ProgressPlugin {
     compiler.hooks.done.tap(this.name, stat => {
       if (startTime) {
         this.hasCompileErrors = stat.hasErrors();
-        this.compileTime = prettyTime(process.hrtime(startTime), 0);
+        this.compileTime = prettyTime(process.hrtime(startTime));
         startTime = null;
 
         if (!this.hasCompileErrors) {

packages/builder/builder/src/plugins/fileSize.ts

@@ -135,9 +135,11 @@ async function printFileSizes(stats: Stats | MultiStats, distPath: string) {
 
   const totalSizeLabel = `${chalk.bold.blue('Total size:')}  ${filesize(
     totalSize,
+    { round: 1 },
   )}`;
   const gzippedSizeLabel = `${chalk.bold.blue('Gzipped size:')}  ${filesize(
     totalGzipSize,
+    { round: 1 },
   )}`;
   logger.log(`\n  ${totalSizeLabel}\n  ${gzippedSizeLabel}\n`);
 }

packages/document/main-doc/docs/en/components/debug-app.mdx

@@ -6,7 +6,7 @@ $ pnpm run dev
 > modern dev
 
 info    Starting dev server...
-ready   Client compiled in 50ms
+ready   Client compiled in 50 ms
 
   > Local:    http://localhost:8080/
   > Network:  http://192.168.0.1:8080/

packages/document/main-doc/docs/en/guides/get-started/quick-start.mdx

@@ -92,7 +92,7 @@ $ pnpm run build
 > modern build
 
 info    Staring production build...
-ready   Client compiled in 50ms
+ready   Client compiled in 50 ms
 info    Production file sizes:
 
   File                                      Size         Gzipped

packages/document/main-doc/docs/zh/components/debug-app.mdx

@@ -6,7 +6,7 @@ $ pnpm run dev
 > modern dev
 
 info    Starting dev server...
-ready   Client compiled in 50ms
+ready   Client compiled in 50 ms
 
   > Local:    http://localhost:8080/
   > Network:  http://192.168.0.1:8080/

packages/document/main-doc/docs/zh/guides/get-started/quick-start.mdx

@@ -92,7 +92,7 @@ $ pnpm run build
 > modern build
 
 info    Staring production build...
-ready   Client compiled in 50ms
+ready   Client compiled in 50 ms
 info    Production file sizes:
 
   File                                      Size         Gzipped