From 2675812d345aa8c803686416528bebb6959b52fa Mon Sep 17 00:00:00 2001 From: neverland Date: Thu, 21 Sep 2023 11:53:13 +0800 Subject: [PATCH] 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 | 9 ++++++++ .../src/core/createCompiler.ts | 4 ++-- packages/builder/builder-shared/package.json | 8 ------- packages/builder/builder-shared/src/index.ts | 1 + .../builder/builder-shared/src/prettyTime.ts | 22 +++++++++++++++++++ .../ProgressPlugin/ProgressPlugin.ts | 4 ++-- .../builder/builder/src/plugins/fileSize.ts | 2 ++ .../main-doc/docs/en/components/debug-app.mdx | 2 +- .../en/guides/get-started/quick-start.mdx | 2 +- .../main-doc/docs/zh/components/debug-app.mdx | 2 +- .../zh/guides/get-started/quick-start.mdx | 2 +- 11 files changed, 42 insertions(+), 16 deletions(-) create mode 100644 .changeset/rude-ghosts-reflect.md create mode 100644 packages/builder/builder-shared/src/prettyTime.ts diff --git a/.changeset/rude-ghosts-reflect.md b/.changeset/rude-ghosts-reflect.md new file mode 100644 index 000000000000..6573d1316730 --- /dev/null +++ b/.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): 优化时间日志的格式 diff --git a/packages/builder/builder-rspack-provider/src/core/createCompiler.ts b/packages/builder/builder-rspack-provider/src/core/createCompiler.ts index 2eb3e5937f78..f452614ef178 100644 --- a/packages/builder/builder-rspack-provider/src/core/createCompiler.ts +++ b/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; diff --git a/packages/builder/builder-shared/package.json b/packages/builder/builder-shared/package.json index fdada42320e6..4bc1d50a5966 100644 --- a/packages/builder/builder-shared/package.json +++ b/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" } } diff --git a/packages/builder/builder-shared/src/index.ts b/packages/builder/builder-shared/src/index.ts index 0ef5c224fb3d..43422b5b34bd 100644 --- a/packages/builder/builder-shared/src/index.ts +++ b/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'; diff --git a/packages/builder/builder-shared/src/prettyTime.ts b/packages/builder/builder-shared/src/prettyTime.ts new file mode 100644 index 000000000000..6a2b0775a727 --- /dev/null +++ b/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); + }); +}; diff --git a/packages/builder/builder-webpack-provider/src/webpackPlugins/ProgressPlugin/ProgressPlugin.ts b/packages/builder/builder-webpack-provider/src/webpackPlugins/ProgressPlugin/ProgressPlugin.ts index ad5803a6812d..c7e368962e09 100644 --- a/packages/builder/builder-webpack-provider/src/webpackPlugins/ProgressPlugin/ProgressPlugin.ts +++ b/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) { diff --git a/packages/builder/builder/src/plugins/fileSize.ts b/packages/builder/builder/src/plugins/fileSize.ts index 9bf5b9b2f14c..83df363702b9 100644 --- a/packages/builder/builder/src/plugins/fileSize.ts +++ b/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`); } diff --git a/packages/document/main-doc/docs/en/components/debug-app.mdx b/packages/document/main-doc/docs/en/components/debug-app.mdx index 85f172b7c071..951b2d712775 100644 --- a/packages/document/main-doc/docs/en/components/debug-app.mdx +++ b/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/ diff --git a/packages/document/main-doc/docs/en/guides/get-started/quick-start.mdx b/packages/document/main-doc/docs/en/guides/get-started/quick-start.mdx index 9a92440124d3..8eca5ef599b9 100644 --- a/packages/document/main-doc/docs/en/guides/get-started/quick-start.mdx +++ b/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 diff --git a/packages/document/main-doc/docs/zh/components/debug-app.mdx b/packages/document/main-doc/docs/zh/components/debug-app.mdx index 4067889774dd..3b352a2c698d 100644 --- a/packages/document/main-doc/docs/zh/components/debug-app.mdx +++ b/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/ diff --git a/packages/document/main-doc/docs/zh/guides/get-started/quick-start.mdx b/packages/document/main-doc/docs/zh/guides/get-started/quick-start.mdx index 5daa3b200e03..4e9c51b2838e 100644 --- a/packages/document/main-doc/docs/zh/guides/get-started/quick-start.mdx +++ b/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