Какой инструмент использовать для оптимизации JS и удалении неиспользуемого кода
Вводная: Проверяя сайт инструментом Lighthouse столкнулся с одинаковой рекомендацией для мобилы и десктопа по удалению неиспользуемого JS-кода. Причём указания у скриптов инструкции defer, не дало существенного влияния на показатель производительности, который к тому же постоянно скачет из раза в раз.
Контекст: На сайте (сервер на php), при запросе страницы формируется единый файл js, который по сути является склейкой всех скриптов для конкретной страницы. Для разных типов страниц свой склееный js-файл. Минимизации там нет, потому что в прошлом были проблемы с получившимся итоговым файлом, где возникали ошибки или даже пропадал некоторый код. Минимизировал склейку посредством библиотек php. Поэтому минимизацию оставил в прошлом и оставил только склейку. К слову, библиотеки, типа jquery, jquery-ui хранятся локально на сервере и попадают в склейку.
Вопрос: Есть ли инструменты, которым можно передать список файлов и которые не просто склеют и минимизируют содержимое, но и смогут удалить неиспользуемый код?
PS. Пробовал webpack, но он не завёлся как надо и удалял, то что не надо было удалять и к тому же ему видимо нужна другая организация структуры js, а не полностью локальная
Ответы (1 шт):
Вот парочка инструментов которые возможно помогут
- parceljs: простой инструмент сборки, который автоматически обнаруживает импортированные модули и удаляет неиспользуемый код.
- UglifyJS — набор инструментов для парсера, минификатора, сжатия и улучшения JavaScript.
- Rollup - инструмент для сборки модулей, может работать со списком файлов, встроенные плагины позволяют делать минификацию и tree-shaking
В целом для твоей задачи лучше подойдет Rollup или Parcel из коробки