Мы столкнулись с проблемой при оптимизации производительности нашего веб-приложения. У нас есть сотни JavaScript файлов, которые мы хотим минифицировать. Но есть загвоздка.
При автоматической минификации во время сборки меняется временная метка файлов. Из-за этого браузеры пользователей будут заново скачивать все JS файлы при каждом обновлении, что сводит на нет преимущества минификации.
Как вы решаете эту проблему? Храните отдельно минифицированные и обычные версии? Или есть другие подходы?
Буду рад услышать, как другие разработчики справляются с этой задачей. Спасибо!
Можно попробовать Content-based versioning. Генерируешь хеш содержимого файла и добавляешь его к имени, типа script.abc123.js. Так браузер будет качать новую версию только если реально изменился контент. Плюс настрой долгое кеширование на сервере. Многие билд-тулы это умеют делать автоматом. А как у вас сейчас организована сборка проекта?
Для решения этой проблемы я бы использовал content-based versioning. Суть в том, чтобы генерировать хеш на основе содержимого файла и добавлять его к имени, например main.abc123.js. Так браузер будет загружать новую версию только если реально изменился контент. Это легко автоматизировать с помощью вебпака или галпа – они умеют считать хеши и подставлять их в имена файлов при сборке. Еще важно настроить долгосрочное кеширование на сервере через заголовки Cache-Control. Такой подход позволяет и оптимизировать JS, и избежать лишних загрузок.
я использую подход с версионированием файлов - добавляю к имени файла хеш, например main.123abc.js. это решает проблему с кешированием браузером. при любом изменении контента файла хеш меняется, и браузер загружает новую версию. а неизмененные файлы остаются в кеше.
для автоматизации этого процесса использую webpack - он умеет генерировать хеши и подставлять их в имена файлов при сборке. плюс настраиваю долгосрочное кеширование на сервере через заголовки. так удается и оптимизировать js, и избежать проблем с повторной загрузкой.