diff --git a/packages/react-dev-utils/FileSizeReporter.js b/packages/react-dev-utils/FileSizeReporter.js index 8f822d201..0ec62333b 100644 --- a/packages/react-dev-utils/FileSizeReporter.js +++ b/packages/react-dev-utils/FileSizeReporter.js @@ -18,7 +18,13 @@ var stripAnsi = require('strip-ansi'); var gzipSize = require('gzip-size').sync; // Prints a detailed summary of build files. -function printFileSizesAfterBuild(webpackStats, previousSizeMap, buildFolder) { +function printFileSizesAfterBuild( + webpackStats, + previousSizeMap, + buildFolder, + maxBundleGzipSize, + maxChunkGzipSize +) { var root = previousSizeMap.root; var sizes = previousSizeMap.sizes; var assets = webpackStats @@ -41,6 +47,7 @@ function printFileSizesAfterBuild(webpackStats, previousSizeMap, buildFolder) { null, assets.map(a => stripAnsi(a.sizeLabel).length) ); + var suggestBundleSplitting = false; assets.forEach(asset => { var sizeLabel = asset.sizeLabel; var sizeLength = stripAnsi(sizeLabel).length; @@ -48,14 +55,38 @@ function printFileSizesAfterBuild(webpackStats, previousSizeMap, buildFolder) { var rightPadding = ' '.repeat(longestSizeLabelLength - sizeLength); sizeLabel += rightPadding; } + var isMainBundle = asset.name.indexOf('main.') === 0; + var maxRecommendedSize = isMainBundle + ? maxBundleGzipSize + : maxChunkGzipSize; + var isLarge = maxRecommendedSize && asset.size > maxRecommendedSize; + if (isLarge && path.extname(asset.name) === '.js') { + suggestBundleSplitting = true; + } console.log( ' ' + - sizeLabel + + (isLarge ? chalk.yellow(sizeLabel) : sizeLabel) + ' ' + chalk.dim(asset.folder + path.sep) + chalk.cyan(asset.name) ); }); + if (suggestBundleSplitting) { + console.log(); + console.log( + chalk.yellow('The bundle size is significantly larger than recommended.') + ); + console.log( + chalk.yellow( + 'Consider reducing it with code splitting: https://goo.gl/9VhYWB' + ) + ); + console.log( + chalk.yellow( + 'You can also analyze the project dependencies: https://goo.gl/LeUzfb' + ) + ); + } } function removeFileNameHash(buildFolder, fileName) { diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js index 2e4bc21ee..06eb0695d 100644 --- a/packages/react-scripts/scripts/build.js +++ b/packages/react-scripts/scripts/build.js @@ -39,6 +39,10 @@ const measureFileSizesBeforeBuild = FileSizeReporter.measureFileSizesBeforeBuild const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild; const useYarn = fs.existsSync(paths.yarnLockFile); +// These sizes are pretty large. We'll warn for bundles exceeding them. +const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024; +const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024; + // Warn and crash if required files are missing if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { process.exit(1); @@ -76,7 +80,13 @@ measureFileSizesBeforeBuild(paths.appBuild) } console.log('File sizes after gzip:\n'); - printFileSizesAfterBuild(stats, previousFileSizes, paths.appBuild); + printFileSizesAfterBuild( + stats, + previousFileSizes, + paths.appBuild, + WARN_AFTER_BUNDLE_GZIP_SIZE, + WARN_AFTER_CHUNK_GZIP_SIZE + ); console.log(); const appPackage = require(paths.appPackageJson);