• Tharaka Wijebandara's avatar
    Convert react-error-overlay to React (#2515) · ecd1f054
    Tharaka Wijebandara authored
    * Convert react-error-overlay to React
    
    * Update compile-time error overlay to use react-error-overlay components
    
     * Refactor react-error-overlay components to container and presentational components.
    
     * Make the compile-time error overlay a part of react-error-overlay package.
    
     * Use react-error-overlay as dependency in react-dev-utils to show compile-time errors.
    
    * Run Prettier
    
    * Move the function name fix into StackFrame itself
    
    * Fix clicking on source code snippet to open the code in editor
    
    * Use exact objects + minor style tweak
    
    * Don't linkify frames that don't exist on the disk
    
    * Fix lint
    
    * Consolidate iframe rendering logic
    
    * Remove circular dependency between react-dev-utils and react-error-overlay
    
    * Fix lint
    
    * Fix decoupling of react-dev-utils and react-error-overlay by moving middleware
    
    * Deduplicate identical errors
    ecd1f054
FileSizeReporter.js 3.38 KiB
/**
 * Copyright (c) 2015-present, Facebook, Inc.
 * All rights reserved.
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 */
'use strict';
var fs = require('fs');
var path = require('path');
var chalk = require('chalk');
var filesize = require('filesize');
var recursive = require('recursive-readdir');
var stripAnsi = require('strip-ansi');
var gzipSize = require('gzip-size').sync;
// Prints a detailed summary of build files.
function printFileSizesAfterBuild(webpackStats, previousSizeMap) {
  var root = previousSizeMap.root;
  var sizes = previousSizeMap.sizes;
  var assets = webpackStats
    .toJson()
    .assets.filter(asset => /\.(js|css)$/.test(asset.name))
    .map(asset => {
      var fileContents = fs.readFileSync(path.join(root, asset.name));
      var size = gzipSize(fileContents);
      var previousSize = sizes[removeFileNameHash(root, asset.name)];
      var difference = getDifferenceLabel(size, previousSize);
      return {
        folder: path.join('build', path.dirname(asset.name)),
        name: path.basename(asset.name),
        size: size,
        sizeLabel: filesize(size) + (difference ? ' (' + difference + ')' : ''),
    });
  assets.sort((a, b) => b.size - a.size);
  var longestSizeLabelLength = Math.max.apply(
    null,
    assets.map(a => stripAnsi(a.sizeLabel).length)
  assets.forEach(asset => {
    var sizeLabel = asset.sizeLabel;
    var sizeLength = stripAnsi(sizeLabel).length;
    if (sizeLength < longestSizeLabelLength) {
      var rightPadding = ' '.repeat(longestSizeLabelLength - sizeLength);
      sizeLabel += rightPadding;
    console.log(
      '  ' +
        sizeLabel +
        '  ' +
        chalk.dim(asset.folder + path.sep) +
        chalk.cyan(asset.name)
  });
function removeFileNameHash(buildFolder, fileName) {
  return fileName
    .replace(buildFolder, '')
    .replace(/\/?(.*)(\.\w+)(\.js|\.css)/, (match, p1, p2, p3) => p1 + p3);
// Input: 1024, 2048
// Output: "(+1 KB)"
function getDifferenceLabel(currentSize, previousSize) {
  var FIFTY_KILOBYTES = 1024 * 50;
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
var difference = currentSize - previousSize; var 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) { return new Promise(resolve => { recursive(buildFolder, (err, fileNames) => { var sizes; if (!err && fileNames) { sizes = fileNames .filter(fileName => /\.(js|css)$/.test(fileName)) .reduce( (memo, fileName) => { var contents = fs.readFileSync(fileName); var key = removeFileNameHash(buildFolder, fileName); memo[key] = gzipSize(contents); return memo; }, {} ); } resolve({ root: buildFolder, sizes: sizes || {}, }); }); }); } module.exports = { measureFileSizesBeforeBuild: measureFileSizesBeforeBuild, printFileSizesAfterBuild: printFileSizesAfterBuild, };