breezify
Advanced tools
Comparing version 1.0.3 to 1.0.4
@@ -6,2 +6,3 @@ import { getFilesInDirectory, loadConfigFromFile, updateFileAndCompareSize, } from "./file-functions.js"; | ||
import { defaultOptions, mergeConfigs } from "./options.js"; | ||
import chalk from "chalk"; | ||
/** | ||
@@ -32,6 +33,6 @@ * Minify class names in CSS, JS, and HTML files. | ||
]; | ||
const writeMessages = []; | ||
const writeResults = []; | ||
for (const [fileList, replaceFunction] of listsAndReplaceFunctions) { | ||
for (const filePath of fileList) { | ||
writeMessages.push(await updateFileAndCompareSize({ | ||
writeResults.push(await updateFileAndCompareSize({ | ||
path: filePath, | ||
@@ -43,6 +44,51 @@ targetPath: filePath, | ||
} | ||
for (const message of writeMessages) { | ||
console.log(message); | ||
const resultsByExtension = writeResults.reduce((acc, result) => { | ||
if (!acc[result.fileExtension]) { | ||
acc[result.fileExtension] = []; | ||
} | ||
acc[result.fileExtension].push(result); | ||
return acc; | ||
}, {}); | ||
for (const writeResult of writeResults) { | ||
console.log(writeResult.message); | ||
} | ||
const totalResultsByExtension = Object.entries(resultsByExtension).map(([extension, results]) => { | ||
const totalOriginalSize = results.reduce((acc, result) => acc + result.originalSize, 0); | ||
const totalUpdatedSize = results.reduce((acc, result) => acc + result.updatedSize, 0); | ||
const totalSavedSize = results.reduce((acc, result) => acc + result.savedSize, 0); | ||
const totalSavedPercentage = totalSavedSize / totalOriginalSize; | ||
return { | ||
extension, | ||
totalOriginalSize, | ||
totalUpdatedSize, | ||
totalSavedSize, | ||
totalSavedPercentage, | ||
}; | ||
}); | ||
console.log(""); | ||
console.log(chalk.bold("Savings:")); | ||
console.log("-----------------"); | ||
for (const totalResult of totalResultsByExtension) { | ||
console.log(`${chalk.bold(totalResult.extension.toUpperCase())}: ${totalResult.totalSavedSize.toFixed(2)}KB (${(totalResult.totalSavedPercentage * 100).toFixed(2)}%)`); | ||
} | ||
const overallResult = totalResultsByExtension.reduce((acc, result) => { | ||
acc.totalOriginalSize += result.totalOriginalSize; | ||
acc.totalUpdatedSize += result.totalUpdatedSize; | ||
acc.totalSavedSize += result.totalSavedSize; | ||
return acc; | ||
}, { | ||
totalOriginalSize: 0, | ||
totalUpdatedSize: 0, | ||
totalSavedSize: 0, | ||
}); | ||
console.log("-----------------"); | ||
console.log(chalk.bold("Overall") + | ||
": " + | ||
chalk.bold(chalk.green(`${overallResult.totalSavedSize.toFixed(2)}KB`)) + | ||
" (" + | ||
chalk.bold(chalk.green(`${((overallResult.totalSavedSize / overallResult.totalOriginalSize) * | ||
100).toFixed(2)}%`)) + | ||
")"); | ||
console.log(""); | ||
console.log("Class names have been obfuscated and replaced successfully."); | ||
} |
@@ -23,2 +23,10 @@ import { BreezifyOptions, FilesOptions } from "./options.js"; | ||
export declare function getFileSizeInKb(filePath: string): string; | ||
export type FileUpdateResult = { | ||
fileExtension: string; | ||
originalSize: number; | ||
updatedSize: number; | ||
savedSize: number; | ||
savedPercentage: number; | ||
message: string; | ||
}; | ||
/** | ||
@@ -34,3 +42,3 @@ * Update a file's content and compare the size difference | ||
updateContent: (content: string) => string | Promise<string>; | ||
}): Promise<string>; | ||
}): Promise<FileUpdateResult>; | ||
/** | ||
@@ -37,0 +45,0 @@ * Load the Breezify config from a file |
@@ -98,4 +98,11 @@ // Get a list of all files in the directory and subdirectories | ||
100).toFixed(2); | ||
return (chalk.yellow("Write: ") + | ||
`${Array.from(new Set([path, targetPath])).join("=>")}; ${originalSize}kb => ${updatedSize}kb; ${savedSize.toFixed(2)}kb saved (${chalk[savedSize === 0 ? "gray" : savedSize > 0 ? "green" : "red"](savedPercentage + "%")})`); | ||
return { | ||
fileExtension: [...path.split(".")].reverse()[0], | ||
originalSize: parseFloat(originalSize), | ||
updatedSize: parseFloat(updatedSize), | ||
savedSize, | ||
savedPercentage: (savedSize / parseFloat(originalSize)) * 100, | ||
message: chalk.yellow("Write: ") + | ||
`${Array.from(new Set([path, targetPath])).join("=>")}; ${originalSize}kb => ${updatedSize}kb; ${savedSize.toFixed(2)}kb saved (${chalk[savedSize === 0 ? "gray" : savedSize > 0 ? "green" : "red"](savedPercentage + "%")})`, | ||
}; | ||
} | ||
@@ -102,0 +109,0 @@ /** |
@@ -7,2 +7,4 @@ import { CSSOptions, HTMLOptions, JSOptions } from "./options.js"; | ||
* @param htmlOptions {HTMLOptions} - HTML options | ||
* @param jsOptions {JSOptions} - JS options | ||
* @param cssOptions {CSSOptions} - CSS options | ||
*/ | ||
@@ -9,0 +11,0 @@ export declare function replaceClassNamesInHtml(content: string, classMap: Record<string, string>, htmlOptions: HTMLOptions, jsOptions: JSOptions, cssOptions: CSSOptions): Promise<string>; |
@@ -12,2 +12,4 @@ import { serialize, parse } from "parse5"; | ||
* @param htmlOptions {HTMLOptions} - HTML options | ||
* @param jsOptions {JSOptions} - JS options | ||
* @param cssOptions {CSSOptions} - CSS options | ||
*/ | ||
@@ -14,0 +16,0 @@ export async function replaceClassNamesInHtml(content, classMap, htmlOptions, jsOptions, cssOptions) { |
@@ -12,3 +12,3 @@ import { Command, Option } from "commander"; | ||
const booleanParser = (val) => val === "true"; | ||
program.version("1.0.3").name("breezify"); | ||
program.version("1.0.4").name("breezify"); | ||
program | ||
@@ -15,0 +15,0 @@ .command("do") |
{ | ||
"name": "breezify", | ||
"version": "1.0.3", | ||
"version": "1.0.4", | ||
"description": "A tool for minifying CSS class names", | ||
@@ -5,0 +5,0 @@ "author": "Gleb Gorokhov <theververy@gmail.com>", |
@@ -13,3 +13,3 @@ <img src="./logo_light.svg#gh-light-mode-only" alt="logo" width="200" /> | ||
Works with **any framework**. | ||
Works with most frameworks. _Next.js is not supported yet._ | ||
@@ -20,2 +20,3 @@ - [Installation](#installation) | ||
- [API usage](#api-usage) | ||
- [Examples](#examples) | ||
- [Ask Question / Discuss](#ask-question-or-discuss) | ||
@@ -50,2 +51,6 @@ - [Donations](#donations-) | ||
## Examples | ||
- Work in progress... | ||
## Ask Question or Discuss | ||
@@ -142,23 +147,4 @@ | ||
- Every byte counts – money, performance, and user experience | ||
- Faster DOM manipulations and CSS selector matching. Proof: | ||
Every byte counts – money, load times, performance, and user experience. | ||
```js | ||
function testPerformance(func) { | ||
let count = 0; | ||
const startTime = performance.now(); | ||
const duration = 1000; // milliseconds | ||
while (performance.now() - startTime < duration) { | ||
func(); // Call the target function | ||
count++; // Increment the counter | ||
} | ||
return count; | ||
} | ||
testPerformance(() => { document.querySelector("highlight") }) // 43,457 operations | ||
testPerformance(() => { document.querySelector("a") }) // 1,290,237 operations (30x faster) | ||
``` | ||
## Debugging | ||
@@ -292,2 +278,3 @@ | ||
minify: true, | ||
extractClassesFromHtml: true, | ||
}, | ||
@@ -294,0 +281,0 @@ js: { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
64755
1144
298