Home / File/ improveImages.mjs — react Source File

improveImages.mjs — react Source File

Architecture documentation for improveImages.mjs, a javascript file in the react codebase. 10 imports, 0 dependents.

File javascript BabelCompiler Validation 10 imports 4 functions

Entity Profile

Dependency Diagram

graph LR
  2215085f_df2b_8415_0e3d_4069eaf31121["improveImages.mjs"]
  324b23d8_44c6_f20a_4338_46cccc56566e["fs"]
  2215085f_df2b_8415_0e3d_4069eaf31121 --> 324b23d8_44c6_f20a_4338_46cccc56566e
  e57c3090_5748_50aa_22d5_17602bed8349["find"]
  2215085f_df2b_8415_0e3d_4069eaf31121 --> e57c3090_5748_50aa_22d5_17602bed8349
  e8d13ab5_bc62_21c5_58f5_cfad5114a379["filesize"]
  2215085f_df2b_8415_0e3d_4069eaf31121 --> e8d13ab5_bc62_21c5_58f5_cfad5114a379
  98d494d0_1c8f_d510_50cb_814c9b24562c["imagemin"]
  2215085f_df2b_8415_0e3d_4069eaf31121 --> 98d494d0_1c8f_d510_50cb_814c9b24562c
  d100f6c6_829a_1d47_5a18_8beb03bca4d9["imagemin-gifsicle"]
  2215085f_df2b_8415_0e3d_4069eaf31121 --> d100f6c6_829a_1d47_5a18_8beb03bca4d9
  ec1e8b6a_a63f_2931_67d8_1a9c1c4bd461["imagemin-jpegtran"]
  2215085f_df2b_8415_0e3d_4069eaf31121 --> ec1e8b6a_a63f_2931_67d8_1a9c1c4bd461
  1a7bca7f_1bfa_a611_db88_d4b1cdcd3c29["imagemin-optipng"]
  2215085f_df2b_8415_0e3d_4069eaf31121 --> 1a7bca7f_1bfa_a611_db88_d4b1cdcd3c29
  d52dcf55_2e01_60dd_8531_3f2999965ada["imagemin-svgo"]
  2215085f_df2b_8415_0e3d_4069eaf31121 --> d52dcf55_2e01_60dd_8531_3f2999965ada
  58b8de0f_1e63_ecf0_6c08_cd269f9ff000["parse-filepath"]
  2215085f_df2b_8415_0e3d_4069eaf31121 --> 58b8de0f_1e63_ecf0_6c08_cd269f9ff000
  178fc52d_e7f8_dce1_75f6_f388c2223069["chalk"]
  2215085f_df2b_8415_0e3d_4069eaf31121 --> 178fc52d_e7f8_dce1_75f6_f388c2223069
  style 2215085f_df2b_8415_0e3d_4069eaf31121 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

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();
})();

Domain

Subdomains

Dependencies

  • chalk
  • filesize
  • find
  • fs
  • imagemin
  • imagemin-gifsicle
  • imagemin-jpegtran
  • imagemin-optipng
  • imagemin-svgo
  • parse-filepath

Frequently Asked Questions

What does improveImages.mjs do?
improveImages.mjs is a source file in the react codebase, written in javascript. It belongs to the BabelCompiler domain, Validation subdomain.
What functions are defined in improveImages.mjs?
improveImages.mjs defines 4 function(s): optimized, readableSize, run, size.
What does improveImages.mjs depend on?
improveImages.mjs imports 10 module(s): chalk, filesize, find, fs, imagemin, imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, and 2 more.
Where is improveImages.mjs in the architecture?
improveImages.mjs is located at packages/react-devtools-extensions/improveImages.mjs (domain: BabelCompiler, subdomain: Validation, directory: packages/react-devtools-extensions).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free