Улучшить производительность компиляции CSS веб-пакета

Я пытаюсь переместить нашу сборку SASS с gulp + node-sass на webpack с помощью sass-loader.

В качестве ориентира gulp + node-sass 3.2 дает нам примерно 2,5-3 секунды времени сборки.

В веб-пакете, если я использую style!raw!sass для загрузки, я смотрю на 10-секундную сборку и без исходных карт (из-за необработанного загрузчика). Если я заставлю загрузчик css для исходных карт работать, дополнительный парсинг заставляет сборку занимать 20-30 секунд в хороший день.

Мне интересно, какие приемы я могу использовать, чтобы улучшить ситуацию. Прямо сейчас лучшее, что я смог сделать, это разделить нашу компиляцию sass, используя множество require(...) из javascript в SASS, которые затем объединяются в один файл. С опцией -watch, которая допускает некоторую искусственную инкрементную компиляцию, поэтому после первоначальной сборки это не так уж плохо.

Мне интересно, могу ли я что-то сделать помимо этого, чтобы сделать его лучше. 10-кратное замедление по сравнению с gulp + nodesass не очень хорошо, но наличие 2 инструментов сборки тоже не очень хорошо (webpack работает на 100% нормально для JS, даже с огромным количеством кода)


person shados    schedule 18.09.2015    source источник


Ответы (1)


Посмотрите эту замечательную статью о веб-пакете, препроцессорах, исходных картах и ​​скорости сборки: http://eng.localytics.com/faster-sass-builds-with-webpack/

В настоящее время я использую sass-loader с node-sass (и libsass), cssmodules (с отдельными таблицами стилей, по одной для каждого компонента/контейнера), встроенными sourceMaps и HMR. Перезагрузка демодифицированного компонента с обновленными стилями занимает 2-3 секунды.

Здесь вы можете увидеть пример конфигурации: https://github.com/erikras/react-redux-universal-hot-example/blob/master/webpack/dev.config.js

person Anibal    schedule 12.03.2016