/** * Copyright (c) 2015-present, Facebook, Inc. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ import type { Stats } from '@rspack/core' import chalk from 'chalk' import filesize from 'filesize' import fs from 'fs-extra' import { gzipSizeSync } from 'gzip-size' import path from 'path' // @ts-ignore import recursive from 'recursive-readdir' import stripAnsi from 'strip-ansi' interface SizeMap { root: string sizes: Record } interface WebpackStats extends Stats { stats?: Stats[] } function canReadAsset(asset: string): boolean { return ( /\.(js|css)$/.test(asset) && !/service-worker\.js/.test(asset) && !/precache-manifest\.[0-9a-f]+\.js/.test(asset) ) } // Prints a detailed summary of build files. function printFileSizesAfterBuild( webpackStats: WebpackStats, previousSizeMap: SizeMap, buildFolder: string, maxBundleGzipSize: number, maxChunkGzipSize: number ): void { const root = previousSizeMap.root const sizes = previousSizeMap.sizes const assets = (webpackStats.stats || [webpackStats]) .map((stats) => stats .toJson({ all: false, assets: true }) .assets!.filter((asset) => canReadAsset(asset.name)) .map((asset) => { const fileContents = fs.readFileSync(path.join(root, asset.name)) const size = gzipSizeSync(fileContents) const previousSize = sizes[removeFileNameHash(root, asset.name)] const difference = getDifferenceLabel(size, previousSize) return { folder: path.join(path.basename(buildFolder), path.dirname(asset.name)), name: path.basename(asset.name), size: size, sizeLabel: filesize(size) + (difference ? ' (' + difference + ')' : ''), } }) ) .reduce((single, all) => all.concat(single), []) if (assets.length === 0) return console.log('\ngzip 后文件大小:\n') assets.sort((a, b) => b.size - a.size) // move main file to first const mainAssetIdx = assets.findIndex((asset) => /_\d+\.\d+\.\d+/.test(asset.name)) assets.unshift(assets.splice(mainAssetIdx, 1)[0]) const longestSizeLabelLength = Math.max.apply( null, assets.map((a) => stripAnsi(a.sizeLabel).length) ) let suggestBundleSplitting = false assets.forEach((asset) => { let sizeLabel = asset.sizeLabel const sizeLength = stripAnsi(sizeLabel).length if (sizeLength < longestSizeLabelLength) { const rightPadding = ' '.repeat(longestSizeLabelLength - sizeLength) sizeLabel += rightPadding } const isMainBundle = /_\d+\.\d+\.\d+/.test(asset.name) const maxRecommendedSize = isMainBundle ? maxBundleGzipSize : maxChunkGzipSize const isLarge = maxRecommendedSize && asset.size > maxRecommendedSize if (isLarge && path.extname(asset.name) === '.js') { suggestBundleSplitting = true } console.log( ' ' + (isLarge ? chalk.yellow(sizeLabel) : sizeLabel) + ' ' + chalk.dim(asset.folder + path.sep) + chalk.cyan(asset.name) ) if (isMainBundle) { console.log('') } }) if (suggestBundleSplitting) { console.log() console.log( chalk.yellow( `产物大小明显大于推荐的大小 (主文件 ${filesize(maxBundleGzipSize)}, chunk ${filesize(maxChunkGzipSize)}, 黄色标注为偏大)` ) ) console.log(chalk.yellow('考虑下使用代码分割解决')) console.log(chalk.yellow('也可以使用 npm run analyze 命令分析产物')) } console.log() } function removeFileNameHash(buildFolder: string, fileName: string): string { return fileName .replace(buildFolder, '') .replace(/\\/g, '/') .replace(/\/\d+\.\d+\.\d+\//, '/') .replace(/\/?(.*)(\.[0-9a-f]+)(\.chunk)?(\.js|\.css)/, (match, p1, p2, p3, p4) => p1 + p4) } // Input: 1024, 2048 // Output: "(+1 KB)" function getDifferenceLabel(currentSize: number, previousSize: number): string { const FIFTY_KILOBYTES = 1024 * 50 const difference = currentSize - previousSize const fileSize = !Number.isNaN(difference) ? filesize(difference) : 0 if (difference >= FIFTY_KILOBYTES) { return chalk.red('+' + fileSize) } else if (difference < FIFTY_KILOBYTES && difference > 0) { return chalk.yellow('+' + fileSize) } else if (difference < 0) { return chalk.green(fileSize) } else { return '' } } function measureFileSizesBeforeBuild(buildFolder: string): Promise { return new Promise((resolve) => { recursive(buildFolder, (err: any, fileNames: any) => { let sizes: Record | undefined if (!err && fileNames) { sizes = fileNames.filter(canReadAsset).reduce( (memo: any, fileName: any) => { const contents = fs.readFileSync(fileName) const key = removeFileNameHash(buildFolder, fileName) memo[key] = gzipSizeSync(contents) return memo }, {} as Record ) } resolve({ root: buildFolder, sizes: sizes || {}, }) }) }) } export { measureFileSizesBeforeBuild, printFileSizesAfterBuild }