🗜️ CodeSqueeze

Профессиональный онлайн-минификатор HTML, CSS и JavaScript с продвинутой обработкой кода

✨ Особенности

🔒 Безопасная минификация

Корректная обработка строк в двойных/одинарных кавычках
Поддержка вложенных template literals с ${}
Умное распознавание регулярных выражений с character classes
Сохранение escape-последовательностей и специальных символов
Защита conditional comments для IE

⚡ Продвинутая оптимизация

HTML: удаление комментариев, пустых атрибутов, type="text/javascript"
JavaScript: минификация с сохранением функциональности
CSS: сокращение цветов (#ffffff → #fff), удаление единиц у нуля (0px → 0)
Inline контент: автоматическая минификация встроенных скриптов и стилей

📊 Детальная статистика

Размер до и после сжатия
Процент экономии
Сохранённые байты
Новое: Время обработки в миллисекундах
Визуальные индикаторы прогресса

🎨 Современный интерфейс

Адаптивный дизайн для всех устройств
Тёмная тема с градиентами и анимациями
Интерактивные элементы управления
Всплывающие подсказки

🚀 Производительность

Работает полностью в браузере
Нет серверных запросов
Новое: Валидация кода перед обработкой
Новое: Пакетная обработка файлов

🌐 Офлайн поддержка

Работает без интернета
Локальное кэширование

🚀 Демо

🔗 Открыть CodeSqueeze

📦 Установка

Вариант 1: Использование онлайн

Просто откройте демо версию в браузере.

Вариант 2: Локальная установка

git clone https://github.com/Rianvy/CodeSqueeze.git
cd CodeSqueeze

Откройте index.html в браузере — всё работает без сервера!

🎯 Использование

Базовое использование

Выберите тип кода: HTML или JavaScript
Вставьте код в левое окно (или нажмите кнопку "Пример")
Настройте опции минификации
Нажмите "⚡ Минифицировать"
Скопируйте результат из правого окна

Горячие клавиши

Комбинация	Действие
`Ctrl/Cmd + Enter`	Минифицировать
`Ctrl/Cmd + Shift + F`	Форматировать
`Ctrl/Cmd + Shift + C`	Копировать результат
`Ctrl/Cmd + Shift + V`	Вставить из буфера

Опции минификации

Опция	Описание	По умолчанию
Удалить комментарии	Удаляет HTML `<!-- -->`, JS `//` и `/* /`, CSS `/ */` комментарии	✅ Вкл
Удалить пробелы	Схлопывает множественные пробелы, удаляет переносы строк	✅ Вкл
Минифицировать inline JS	Сжимает JavaScript внутри `<script>` тегов	✅ Вкл
Минифицировать inline CSS	Сжимает стили внутри `<style>` тегов	✅ Вкл

🔧 Как это работает

Архитектура

CodeSqueeze/
├── index.html              
├── features.html
├── docs.html
├── privacy.html
├── stats.html
├── terms.html
├── css/
│   └── styles.css          # Кастомные стили
├── js/
│   ├── app.js             # Главный модуль приложения
│   ├── config.js          # Конфигурация
│   ├── tailwind.standalone.js
│   ├── tailwind-config.js
│   └── modules/
│       ├── minifier.js    # Минификатор 
│       ├── beautifier.js  # Форматирование кода
│       ├── validator.js   # Валидация кода
│       ├── stats.js       # Статистика
│       ├── ui.js          # Управление интерфейсом
│       ├── utils.js       # Вспомогательные функции
│       ├── storage.js     # Локальное хранилище
│       ├── fullscreen.js  # Полноэкранный режим для редакторов
│       ├── tooltips.js    # Глобальные tooltips
│       └── notifications.js # Уведомления

Алгоритм минификации

Посимвольный парсинг для точной обработки:

Обнаружение контекста: строка, регулярное выражение, комментарий
Сохранение важного: escape-последовательности, специальные символы
Удаление лишнего: комментарии, пробелы, пустые атрибуты
Оптимизация: сокращение CSS, удаление точек с запятой перед }
Валидация: проверка корректности результата

Поддерживаемые конструкции

JavaScript

✅ Строки: "...", '...', `...`
✅ Template literals: `Hello ${name}!`
✅ Регулярные выражения: /pattern/gi, /[a-z]/
✅ Комментарии: // и /* */
✅ Операторы: все стандартные операторы JS
✅ Ключевые слова: return, typeof, void, delete, throw, new, etc.

CSS

✅ Селекторы: классы, ID, атрибуты, псевдо-классы
✅ Свойства: все стандартные CSS свойства
✅ Значения: цвета, размеры, URL
✅ Функции: url(), calc(), rgba(), etc.
✅ At-rules: @media, @keyframes, @import

HTML

✅ Теги: все стандартные HTML5 теги
✅ Атрибуты: сохранение значений, удаление пустых
✅ Inline контент: <script>, <style>, <pre>, <textarea>
✅ Комментарии: условные комментарии IE сохраняются
✅ DOCTYPE: сохраняется корректно

📊 Примеры

Пример 1: HTML с inline скриптами

Входной код (2,847 байт):

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Пример страницы</title>
    <style>
        /* Основные стили */
        body {
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
            background-color: #ffffff;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <!-- Основной контент -->
    <div class="container">
        <h1>Добро пожаловать!</h1>
        <p>Это пример HTML страницы для минификации.</p>
    </div>
    
    <script>
        // Конфигурация приложения
        const config = {
            apiUrl: 'https://api.example.com',
            timeout: 3000,
            debug: true
        };
        
        // Инициализация
        function init() {
            console.log('Приложение запущено');
            console.log('Config:', config);
        }
        
        // Запуск при загрузке
        document.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>

Результат (523 байт) — экономия 81.6%:

<!DOCTYPE html><html lang="ru"><head><meta charset="UTF-8"><title>Пример страницы</title><style>body{margin:0;padding:20px;font-family:Arial,sans-serif;background-color:#fff}.container{max-width:1200px;margin:0 auto}</style></head><body><div class="container"><h1>Добро пожаловать!</h1><p>Это пример HTML страницы для минификации.</p></div><script>const config={apiUrl:'https://api.example.com',timeout:3000,debug:true};function init(){console.log('Приложение запущено');console.log('Config:',config)}document.addEventListener('DOMContentLoaded',init)</script></body></html>

Пример 2: JavaScript с regex и template literals

Входной код (456 байт):

// Email валидатор
function validateEmail(email) {
    // Регулярное выражение для проверки email
    const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    
    if (!pattern.test(email)) {
        return false;
    }
    
    return true;
}

// Генератор приветствия
function greet(name, time = 'день') {
    const message = `Добрый ${time}, ${name}!`;
    console.log(message);
    return message;
}

// Использование
const isValid = validateEmail('[email protected]');
const greeting = greet('Иван', 'вечер');

Результат (267 байт) — экономия 41.4%:

function validateEmail(email){const pattern=/^[^\s@]+@[^\s@]+\.[^\s@]+$/;if(!pattern.test(email)){return false}return true}function greet(name,time='день'){const message=`Добрый ${time}, ${name}!`;console.log(message);return message}const isValid=validateEmail('[email protected]');const greeting=greet('Иван','вечер');

Пример 3: CSS оптимизация

Входной код (389 байт):

/* Цвета и размеры */
.button {
    background-color: #ffffff;
    color: #000000;
    padding: 0px 20px;
    margin: 0px auto;
    border-radius: 0px;
}

.card {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    background: #f0f0f0;
}

Результат (126 байт) — экономия 67.6%:

.button{background-color:#fff;color:#000;padding:0 20px;margin:0 auto;border-radius:0}.card{box-shadow:0 0 10px rgba(0,0,0,0.1);background:#f0f0f0}

📚 API для разработчиков

Базовое использование

// Импорт (если используется как модуль)
const { Minifier } = window;

// Минификация JavaScript
const jsCode = 'const x = 1;  // comment';
const minifiedJS = Minifier.minifyJS(jsCode);
console.log(minifiedJS); // 'const x=1'

// Минификация CSS
const cssCode = 'body { margin: 0px; }';
const minifiedCSS = Minifier.minifyCSS(cssCode);
console.log(minifiedCSS); // 'body{margin:0}'

// Минификация HTML
const htmlCode = '<html>  <body>  </body>  </html>';
const minifiedHTML = Minifier.minifyHTML(htmlCode);
console.log(minifiedHTML); // '<html><body></body></html>'

// Универсальная функция
const result = Minifier.minify(code, 'html'); // 'html', 'js', или 'css'

Настройка опций

// Установка опций
Minifier.setOptions({
    removeComments: true,
    removeWhitespace: true,
    minifyInlineJS: true,
    minifyInlineCSS: true,
    preserveLineBreaks: false,    
    collapseWhitespace: true,     
    removeEmptyAttributes: true   
});

// Получение текущих опций
const options = Minifier.getOptions();
console.log(options);

Получение статистики

// Минификация с автоматическим подсчётом статистики
const result = Minifier.minify(code, 'html');

// Получение детальной статистики
const stats = Minifier.getStats();
console.log(stats);
// {
//   originalSize: 1500,
//   minifiedSize: 800,
//   savedBytes: 700,
//   savedPercent: "46.67",
//   processingTime: "2.34"  // 🆕 в миллисекундах
// }

// Сброс статистики
Minifier.resetStats();

Валидация кода

// 🆕 Проверка кода перед минификацией
const validation = Minifier.validate(code, 'html');

if (!validation.valid) {
    console.warn('Предупреждения:', validation.errors);
    // ['Возможно несбалансированные теги']
}

// Всё равно можно минифицировать
const result = Minifier.minify(code, 'html');

Пакетная обработка

// 🆕 Обработка нескольких файлов
const files = [
    { name: 'app.js', type: 'js', content: '...' },
    { name: 'styles.css', type: 'css', content: '...' },
    { name: 'index.html', type: 'html', content: '...' }
];

const batchResult = Minifier.minifyBatch(files);

console.log(batchResult.totalSaved); // Общая экономия в байтах
console.log(batchResult.totalTime);  // Общее время обработки

batchResult.results.forEach(result => {
    console.log(`${result.name}: ${result.stats.savedPercent}% сэкономлено`);
});

Глобальный API приложения

// Доступ к функциям приложения
const app = window.CodeSqueeze;

// Версия приложения
console.log(app.version); 

// Прямой доступ к минификатору
console.log(app.minifier); // Minifier объект

// Быстрое получение статистики
const stats = app.getStats();

// Сброс статистики
app.resetStats();

// Валидация
const validation = app.validate(code, 'html');

// Текущие опции
const options = app.getCurrentOptions();

🧪 Тестирование

Запуск тестов

# Открыть index.html
# В консоли браузера (F12):

// Тест минификации JS
CodeSqueeze.minifier.minifyJS('const x = 1;  // test');

// Тест валидации
CodeSqueeze.validate('<html></html>', 'html');

// Тест производительности
const largeCode = 'x'.repeat(100000);
console.time('minify');
CodeSqueeze.minifier.minify(largeCode, 'js');
console.timeEnd('minify');

Офлайн тестирование

Откройте DevTools (F12)
Network → поставьте галку "Offline"
Обновите страницу (Ctrl+R)
Всё должно работать ✅

🤝 Contributing

Contributions приветствуются!

Как внести вклад

Fork репозиторий
Создайте feature branch: git checkout -b feature/amazing-feature
Commit изменения: git commit -m 'Add: amazing feature'
Push в branch: git push origin feature/amazing-feature
Откройте Pull Request

Правила

Следуйте существующему стилю кода
Добавляйте комментарии к сложной логике
Тестируйте изменения перед PR
Обновляйте документацию при необходимости

Области для улучшения

Поддержка TypeScript минификации
Более продвинутая CSS оптимизация
Drag & drop файлов
История минификаций
Экспорт/импорт настроек

🛠️ Технологии

Vanilla JavaScript — без фреймворков
Tailwind CSS — для стилизации
Local Storage — для сохранения настроек
Clipboard API — для копирования/вставки

📈 Производительность

Метрика	Значение
Размер приложения	~120 KB (с Tailwind)
Время загрузки	< 1 секунда
Скорость минификации	~2-5 мс на 1 KB кода
Поддержка файлов	До 10 MB
Браузеры	Chrome 90+, Firefox 88+, Safari 14+, Edge 90+

📝 Changelog

v2.0.0 (11.01.2026) 🆕

✨ Новый минификатор с улучшенной обработкой regex и template literals
📊 Статистика времени обработки в миллисекундах
🔍 Валидация кода перед минификацией
📦 Пакетная обработка файлов
🌐 Офлайн поддержка
🎨 Оптимизация CSS: сокращение цветов, удаление единиц у нуля
⚡ Улучшенная производительность парсера
🔧 Расширенный API для разработчиков
🎯 Горячие клавиши для быстрой работы

v1.0.0 (11.01.2026)

🎉 Первый публичный релиз
HTML/JavaScript/CSS минификация
Безопасная обработка строк
Статистика сжатия
Форматирование кода
Адаптивный дизайн

📞 Поддержка

🐛 Нашли баг? → Создайте Issue
💡 Есть идея? → Откройте Discussion
💬 Telegram: @cyber_way

📄 Лицензия

MIT License — используйте свободно в коммерческих и некоммерческих проектах!

Полный текст лицензии

👨‍💻 Автор

Rianvy

Сделано с ❤️ для разработчиков

GitHub: @Rianvy
Website: 0x69.online

🌟 Благодарности

Спасибо всем, кто использует CodeSqueeze и помогает его улучшать!

⭐ Если проект полезен — поставьте звезду на GitHub!

🔝 Наверх

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
css		css
js		js
LICENSE		LICENSE
README.md		README.md
docs.html		docs.html
features.html		features.html
index.html		index.html
privacy.html		privacy.html
stats.html		stats.html
terms.html		terms.html

License

Rianvy/CodeSqueeze

Folders and files

Latest commit

History

Repository files navigation

🗜️ CodeSqueeze

✨ Особенности

🔒 Безопасная минификация

⚡ Продвинутая оптимизация

📊 Детальная статистика

🎨 Современный интерфейс

🚀 Производительность

🌐 Офлайн поддержка

🚀 Демо

📦 Установка

Вариант 1: Использование онлайн

Вариант 2: Локальная установка

🎯 Использование

Базовое использование

Горячие клавиши

Опции минификации

🔧 Как это работает

Архитектура

Алгоритм минификации

Поддерживаемые конструкции

JavaScript

CSS

HTML

📊 Примеры

Пример 1: HTML с inline скриптами

Пример 2: JavaScript с regex и template literals

Пример 3: CSS оптимизация

📚 API для разработчиков

Базовое использование

Настройка опций

Получение статистики

Валидация кода

Пакетная обработка

Глобальный API приложения

🧪 Тестирование

Запуск тестов

Офлайн тестирование

🤝 Contributing

Как внести вклад

Правила

Области для улучшения

🛠️ Технологии

📈 Производительность

📝 Changelog

v2.0.0 (11.01.2026) 🆕

v1.0.0 (11.01.2026)

📞 Поддержка

📄 Лицензия

👨‍💻 Автор

🌟 Благодарности

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 1

Packages 0

Languages

Packages