Warn about large bundle sizes (#2648)

wmonk · Aug 7, 2017 · a9c8b81 · a9c8b81
1 parent 6f4c696
commit a9c8b81
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 3 deletions.
diff --git 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,21 +47,46 @@ 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;
     if (sizeLength < longestSizeLabelLength) {
       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
@@ -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);