improveImages.mjs — react Source File
Architecture documentation for improveImages.mjs, a javascript file in the react codebase. 10 imports, 0 dependents.
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
Functions
Dependencies
- chalk
- filesize
- find
- fs
- imagemin
- imagemin-gifsicle
- imagemin-jpegtran
- imagemin-optipng
- imagemin-svgo
- parse-filepath
Source
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