Мінімізатор JavaScript та CSS онлайн

Що таке мінімізація коду?

Мінімізація — це процес видалення з вихідного коду всього, що не впливає на виконання: пробілів, відступів, коментарів, переносів рядків. Для JavaScript також скорочуються назви локальних змінних. В результаті розмір файлу зменшується на 30–70%, що прискорює завантаження сторінки.

JavaScript мінімізація

Базова мінімізація — видалення пробілів і коментарів. Складніша — скорочення назв змінних (mangling): longVariableName → a. Найагресивніша — ще й tree shaking (видалення невикористаного коду). Інструменти: Terser (найкращий для JS), UglifyJS, esbuild. Наш онлайн-інструмент використовує базовий рівень, безпечний для будь-якого коду.

CSS мінімізація

Видалення пробілів, коментарів і непотрібних крапок з комою. Скорочення кольорів: #FFFFFF → #FFF. Об'єднання однакових правил. Скорочення властивостей: розгорнутий margin → стислий. Cssnano та clean-css — найпопулярніші інструменти. Зменшення CSS часто більш відчутне, ніж JS, якщо стилі написані без дисципліни.

Мінімізація у production

В реальних проектах мінімізацію автоматизують у процесі збірки через Webpack, Vite, Parcel або Rollup. Для аналізу bundle-size використовуйте webpack-bundle-analyzer або source-map-explorer. Поєднуйте мінімізацію зі стисненням Gzip або Brotli для максимального ефекту — стиснений мінімізований файл може бути на 90% менший за оригінал.