4) JSON- или SVG-файлы
Менее частая, но особо неприятная проблема — это когда библиотека использует большой JSON-файл с данными — и этот файл бандлится как есть. Я, например, видел такое с:
— iconv-lite (используется в некоторых библиотеках локализации; бандлит JSON-файлы кодировок)
— или emojione (бандлит JSON-файл с информацией про emoji)
Ещё из той же сферы: иногда приложение использует дизайн-систему с svg-иконками — и инлайнит все иконки url-loader-ом в бандл. Одна иконка может весить немного — 1 кб — но если в приложении их 200, эффект будет ощутимый.
🔎 Как обнаружить проблему: webpack-bundle-analyzer → посмотреть, есть ли в бандле статические файлы типа .json, .svg или чего-то такого
⚙️ Как чинить:
— для библиотек, которые бандлят JSON: или заменить библиотеку, или убрать ненужный JSON с помощью IgnorePlugin
— для приложения, которое инлайнит иконки url-loader-ом:
уменьшить параметр limit, чтобы не инлайнить крупные иконки;
или добавить параметр exclude, чтобы не инлайнить конкретную папку с кучей иконок
***
Менее частая, но особо неприятная проблема — это когда библиотека использует большой JSON-файл с данными — и этот файл бандлится как есть. Я, например, видел такое с:
— iconv-lite (используется в некоторых библиотеках локализации; бандлит JSON-файлы кодировок)
— или emojione (бандлит JSON-файл с информацией про emoji)
Ещё из той же сферы: иногда приложение использует дизайн-систему с svg-иконками — и инлайнит все иконки url-loader-ом в бандл. Одна иконка может весить немного — 1 кб — но если в приложении их 200, эффект будет ощутимый.
🔎 Как обнаружить проблему: webpack-bundle-analyzer → посмотреть, есть ли в бандле статические файлы типа .json, .svg или чего-то такого
⚙️ Как чинить:
— для библиотек, которые бандлят JSON: или заменить библиотеку, или убрать ненужный JSON с помощью IgnorePlugin
— для приложения, которое инлайнит иконки url-loader-ом:
уменьшить параметр limit, чтобы не инлайнить крупные иконки;
или добавить параметр exclude, чтобы не инлайнить конкретную папку с кучей иконок
***