|
| 1 | +#!/usr/bin/env node |
| 2 | +const chalk = require('chalk'); |
| 3 | +const fs = require('fs'); |
| 4 | +const os = require('os'); |
| 5 | +const argv = require('minimist')(process.argv.slice(2)); |
| 6 | +const execa = require('execa'); |
| 7 | +const rimraf = require('rimraf'); |
| 8 | +const open = require('open'); |
| 9 | +const { explore } = require('source-map-explorer'); |
| 10 | +const pkgJSON = JSON.parse(fs.readFileSync('./package.json')); |
| 11 | + |
| 12 | +function getAppName() { |
| 13 | + if (pkgJSON.name) return pkgJSON.name; |
| 14 | + try { |
| 15 | + const appJSON = JSON.parse(fs.readFileSync('./app.json')); |
| 16 | + return appJSON.name || appJSON.expo.name || 'UnknownApp'; |
| 17 | + } catch (err) { |
| 18 | + return 'UnknownApp'; |
| 19 | + } |
| 20 | +} |
| 21 | + |
| 22 | +function getEntryPoint() { |
| 23 | + let entry = pkgJSON.main || 'index.js'; |
| 24 | + if (entry[0] !== '.' && entry[0] !== '/' && entry[0] !== '\\') { |
| 25 | + entry = './' + entry; |
| 26 | + } |
| 27 | + return entry; |
| 28 | +} |
| 29 | + |
| 30 | +// Get (default) arguments |
| 31 | +const baseDir = os.tmpdir() + '/react-native-bundle-visualizer'; |
| 32 | +const tmpDir = baseDir + '/' + getAppName(); |
| 33 | +const entryFile = argv['entry-file'] || getEntryPoint(); |
| 34 | +const platform = argv.platform || 'ios'; |
| 35 | +const dev = argv.dev || false; |
| 36 | +const verbose = argv.verbose || false; |
| 37 | +const resetCache = argv['reset-cache'] || false; |
| 38 | +const bundleOutput = |
| 39 | + argv['bundle-output'] || tmpDir + '/' + platform + '.bundle'; |
| 40 | +const bundleOutputSourceMap = bundleOutput + '.map'; |
| 41 | +const bundleOutputExplorerHTML = tmpDir + '/output/explorer.html'; |
| 42 | + |
| 43 | +// Make sure the temp dir exists |
| 44 | +if (!fs.existsSync(baseDir)) fs.mkdirSync(baseDir); |
| 45 | +if (!fs.existsSync(tmpDir)) fs.mkdirSync(tmpDir); |
| 46 | + |
| 47 | +// Try to obtain the previous file size |
| 48 | +let prevBundleSize; |
| 49 | +if (fs.existsSync(bundleOutput)) { |
| 50 | + const stats = fs.statSync(bundleOutput); |
| 51 | + prevBundleSize = stats.size; |
| 52 | +} |
| 53 | + |
| 54 | +// Bundle |
| 55 | +console.log(chalk.green.bold('Generating bundle...')); |
| 56 | +const commands = [ |
| 57 | + 'bundle', |
| 58 | + '--platform', |
| 59 | + platform, |
| 60 | + '--dev', |
| 61 | + dev, |
| 62 | + '--entry-file', |
| 63 | + entryFile, |
| 64 | + '--bundle-output', |
| 65 | + bundleOutput, |
| 66 | + '--sourcemap-output', |
| 67 | + bundleOutputSourceMap |
| 68 | +]; |
| 69 | +if (resetCache) { |
| 70 | + commands.push('--reset-cache'); |
| 71 | + commands.push(resetCache); |
| 72 | +} |
| 73 | +const bundlePromise = execa('./node_modules/.bin/react-native', commands); |
| 74 | +bundlePromise.stdout.pipe(process.stdout); |
| 75 | + |
| 76 | +// Upon bundle completion, run `source-map-explorer` |
| 77 | +bundlePromise |
| 78 | + .then( |
| 79 | + () => { |
| 80 | + // Log bundle-size |
| 81 | + const stats = fs.statSync(bundleOutput); |
| 82 | + |
| 83 | + // Log increase or decrease since last run |
| 84 | + let deltaSuffix = ''; |
| 85 | + if (prevBundleSize) { |
| 86 | + const delta = stats.size - prevBundleSize; |
| 87 | + if (delta > 0) { |
| 88 | + deltaSuffix = chalk.yellow( |
| 89 | + ' (+++ has increased with ' + delta + ' bytes since last run)' |
| 90 | + ); |
| 91 | + } else if (delta < 0) { |
| 92 | + deltaSuffix = chalk.green.bold( |
| 93 | + ' (--- has decreased with ' + (0 - delta) + ' bytes since last run)' |
| 94 | + ); |
| 95 | + } else { |
| 96 | + deltaSuffix = chalk.green(' (unchanged since last run)'); |
| 97 | + } |
| 98 | + } |
| 99 | + console.log( |
| 100 | + chalk.green.bold( |
| 101 | + 'Bundle is ' + |
| 102 | + Math.round((stats.size / (1024 * 1024)) * 100) / 100 + |
| 103 | + ' MB in size' |
| 104 | + ) + deltaSuffix |
| 105 | + ); |
| 106 | + |
| 107 | + // Make sure the explorer output dir is removed |
| 108 | + if (fs.existsSync(tmpDir + '/output')) rimraf.sync(tmpDir + '/output'); |
| 109 | + return explore( |
| 110 | + { |
| 111 | + code: bundleOutput, |
| 112 | + map: bundleOutputSourceMap |
| 113 | + }, |
| 114 | + { |
| 115 | + output: { |
| 116 | + format: 'html', |
| 117 | + filename: bundleOutputExplorerHTML |
| 118 | + } |
| 119 | + } |
| 120 | + ); |
| 121 | + } |
| 122 | + |
| 123 | + // Log info and open html file |
| 124 | + ) |
| 125 | + .then(result => { |
| 126 | + if (verbose) { |
| 127 | + result.bundles.forEach(bundle => { |
| 128 | + Object.keys(bundle.files).forEach(file => { |
| 129 | + console.log( |
| 130 | + chalk.green(file + ', size: ' + bundle.files[file] + ' bytes') |
| 131 | + ); |
| 132 | + }); |
| 133 | + }); |
| 134 | + } |
| 135 | + |
| 136 | + // Log any errors |
| 137 | + if (result.errors) { |
| 138 | + result.errors.forEach(error => { |
| 139 | + if (error.isWarning) { |
| 140 | + console.log(chalk.yellow.bold(error.message)); |
| 141 | + } else { |
| 142 | + console.log(chalk.red.bold(error.message)); |
| 143 | + } |
| 144 | + }); |
| 145 | + } |
| 146 | + |
| 147 | + // Open html file |
| 148 | + return open(bundleOutputExplorerHTML); |
| 149 | + }); |
0 commit comments