ALEXPTS
WEB DEVELOPER
PHP, NodeJS, JavaScript, etc.
Главная Приколы Стена
Cкилы: Web Php NodeJs Tests Storages

Webpack как gulp?

#Dev

Webpack безусловно очень полезный инструмент, который помогает почти забыть об отношениях в зависимостях на клиентской стороне.

Критический CSS

Как правило вы подключаете bundle webpack к странице. Но он очень тяжелый, если вы не поделили его на части (chunks). Если же поделил его на части, то после того как загрузится основной bundle, страница подгрузит еще часть или несколько частей, предположим со стилями. В итоге стили применятся к странице после рендринга страницы и скорее всего визуально вы это сможете заметить.

Вы можете сделать отельный bundle с критическими css стилями. Но они будут загружены только после этого bundle.

Первое что приходит на ум, это gulp/grunt, который из ваших исходных файлов сделает вам css файл. Который можно подключить в разделе head и не ждать подгрузки бандла webpack. Но тянуть и настраивать gulp, когда в проекте уже используется webpack... Это переход на одну ступень эволюции назад.

Получить чистый css/js/etc файл можно с помощью плагина extract-text-webpack-plugin. Правда остается пустой бандл со служебными webpack функциями. Зато можно в любой момент вынести часть кода не меня инструментов и подключить руками по старинке.

Отключить нужный файл можно через include/exclude в описании loaders. Чтобы less файлы не попали сразу в несколько правил лоадеров.