[DevTools] Optimize Images yarn command (part 2)

package.json

@@ -62,11 +62,18 @@
     "eslint-plugin-react-internal": "link:./scripts/eslint-rules",
     "fbjs-scripts": "1.2.0",
     "filesize": "^6.0.1",
+    "find": "^0.3.0",
     "flow-bin": "0.97",
     "glob": "^7.1.6",
     "glob-stream": "^6.1.0",
     "google-closure-compiler": "^20200517.0.0",
     "gzip-size": "^5.1.1",
+    "imagemin": "^8.0.0",
+    "imagemin-cli": "^6.0.0",
+    "imagemin-gifsicle": "^7.0.0",
+    "imagemin-jpegtran": "^6.0.0",
+    "imagemin-optipng": "^7.0.0",
+    "imagemin-svgo": "^7.0.0",
     "jasmine-check": "^1.0.0-rc.0",
     "jest": "^26.6.3",
     "jest-cli": "^26.6.3",
@@ -78,6 +85,7 @@
     "ncp": "^2.0.0",
     "object-assign": "^4.1.1",
     "pacote": "^10.3.0",
+    "parse-filepath": "^1.0.2",
     "prettier": "1.19.1",
     "prop-types": "^15.6.2",
     "random-seed": "^0.3.0",

packages/react-devtools-extensions/package.json

@@ -16,6 +16,7 @@
     "test:chrome": "node ./chrome/test",
     "test:firefox": "node ./firefox/test",
     "test:edge": "node ./edge/test",
+    "improve-images": "node ./scripts/images/improveImages.mjs",
     "update-mock-source-maps": "node ./src/__tests__/updateMockSourceMaps.js"
   },
   "devDependencies": {

packages/react-devtools-extensions/scripts/images/improveImages.mjs

@@ -0,0 +1,90 @@
+import fs from 'fs'
+import find from 'find'
+import filesize from 'filesize'
+import imagemin from 'imagemin'
+import imageminGifsicle from 'imagemin-gifsicle'
+import imageminJpegtran from 'imagemin-jpegtran'
+import imageminOptipng from 'imagemin-optipng'
+import imageminSvgo from 'imagemin-svgo'
+import parseFilepath from 'parse-filepath'
+import chalk from 'chalk'
+
+const plugins = [
+  imageminGifsicle({}),
+  imageminJpegtran({}),
+  imageminOptipng({}),
+  imageminSvgo({})
+]
+
+let savedSize = 0
+
+const run = async () => {
+  const regex = new RegExp(/\.gif|\.jpeg|\.jpg|\.png$/)
+
+  const files = find.fileSync(regex, 'icons/');
+
+  for (const file of files) {
+    await optimized(file)
+  }
+
+  if (savedSize > 0) {
+    console.info(`\n🎉 You saved ${readableSize(savedSize)}.`)
+  } else {
+    console.info(`\n🎉 Nothing to optimize.`)
+  }
+}
+
+const size = (filename) => {
+  return fs.statSync(filename).size
+}
+
+const readableSize = (size) => {
+  return filesize(size, { round: 5 })
+}
+
+const optimized = async (filename) => {
+  let output = parseFilepath(filename).dir || './'
+
+  const fileSizeBefore = size(filename)
+
+  if (fileSizeBefore === 0){
+    console.info(chalk.blue(`Skipping ${filename}, it has ${readableSize(fileSizeBefore)}`))
+    return
+  }
+
+  const pluginsOptions = {
+    destination: output,
+    plugins
+  }
+
+  const filenameBackup = `${filename}.bak`
+  fs.copyFileSync(filename, filenameBackup)
+
+  try {
+    await imagemin([filename], pluginsOptions)
+
+    const fileSizeAfter = size(filename)
+    const fileSizeDiff = fileSizeBefore - fileSizeAfter
+    if (fileSizeDiff > 0){
+      savedSize += fileSizeDiff
+      console.info(chalk.green(`Optimized ${filename}: ${chalk.yellow(readableSize(fileSizeAfter))}`))
+    } else { // file after same or bigger
+      // restore previous file
+      fs.renameSync(filenameBackup, filename)
+
+      console.info(`${filename} ${chalk.red(`already optimized`)}`)
+    }
+
+  } catch (err) {
+    console.info(chalk.red(`Skip ${filename} due to error when optimizing`));
+  }
+
+  // delete backup file
+  if (fs.existsSync(filenameBackup)) {
+    fs.unlinkSync(filenameBackup)
+  }
+}
+
+(async () => {
+  await run();
+})();