Правильно ли подключать стили через webpack?

Question

[Николай Марков]

Сейчас изучаю webpack и что-то мне подсказывает что подключение стилей прямо в модуле не очень хорошая идея.
Какие мне видятся минусы:
- при изменении стилей нужно заново пересобирать bundle. Можно ли сделать так чтобы стили всё таки собирались в отдельный bundle.css?
- т.к. стили являются по сути js-модулем, то эти js-модули должны загружаться синхронно, тогда как css загружается асинхронно

Что можете по этому поводу сказать?

Answer 1

[Леша Федосеев]

Плагин для сохранения стилей в отдельный файл: https://github.com/webpack/extract-text-webpack-plugin

Comments

[Николай Марков]

Т.е. все таки css лучше собирать каким-нибудь gulp'ом отдельно?

[Леша Федосеев]

Собирать его можно тем же вебпаком с помощью этого плагина.

Насколько целесообазно оставлять стили в JS — зависит от.
Например, если у меня JS-приложение, которое само отрисовывает весь DOM, то я бы оставил стили в JS и посмотрел насколько быстро работают инкрементальные билды. Но если это JS-приложение изоморфное (то есть начальный html прилетает с сервера), то я выношу CSS в отдельный файл и подключаю в `head`, потому что если оставить их в JS, то браузер сначала отрисует DOM без стилей, и только после загрузки JS накинет сверху CSS. Это моргание видно на клиенте.

[Леша Федосеев]

* Собирать его можно тем же вебпаком с помощью этого плагина. Инкрементальные билды у меня отрабатывают быстро.

[_ _]

Леша Федосеев При использовании этого плагина вы теряете hot module replacement для стилей, а ждать обновления страницы после изменения какого-нибудь margin это ад.

[Леша Федосеев]

Что тогда делать в изоморфном приложении?

[_ _]

Леша Федосеев: делать dev и build окружения, в build добавлять этот плагин. Я имел в виду процесс разработки, конечно же.

Answer 2

[_ _]

module.exports = {
  cache: true,
  debug: true,
  devtool: 'source-map',
  entry: {
    app: ['./src'],
    style: ['./src/style'],
    vendor: ...

Таким образом бандл style отделен от остальных и при изменении стилей пересобирается только он.
В dev-режиме я не использую плагин extract-text-webpack-plugin, но никто не мешает сделать отдельные конфигурации для дев-режима и для билда, и в билде добавлять этот плагин.

Comments

[Николай Марков]

Вопрос не в том как сделать отдельный билд. А в том как лучше сделать. Понятно, что прописывать зависимости от css прямо в js клёво и наглядно (+ hot reloading и т.д. и т.п.) Но мы делаем приложение не для себя а для пользователей. И в первую очередь меня интересует как такой подход скажется на них.

[Николай Марков]

Это конечно был один из вопросов, но он не самый главный.

[Леша Федосеев]

Если разбивать на 2 конфига, то для конечного пользователя всё равно css будет вынесен в отдельный файл. В JS оно будет только у вас на локалке.

Answer 3

[Николай Марков]

И еще такой вопрос. Допустим у нас есть SPA. Если наш основной бандл очень большой и загружается несколько секунд, то нам нужно делать их два? Первый - маленький и легкий, который только загружает второй бандл и в это время показывает спиннер?

Comments

[_ _]

Запихайте спиннер прямо в index.html, с inline-стилями, а после инициализации приложения его прячьте.

[Леша Федосеев]

А ещё лучше разбить один большой бандл на N частей (по разделам сайта), и при переходе от одного раздела к следующему загружать бандл запрашиваемого раздела.

[Николай Марков]

Леша Федосеев: А какие-то общие части вынести в общий бандл можно?

[Леша Федосеев]

Вендорные либы (см. CommonsChunkPlugin), shared-компоненты типа хидер/футер и т.д.

[Николай Марков]

Леша Федосеев а ты сам с рельсой юзаешь webpack?

[Леша Федосеев]

И да, и нет. Рельсы исключительно как JSON API. Оно у меня вот так работает: https://medium.com/@alexfedoseev/isomorphic-react-...

[Николай Марков]

Леша Федосеев да уже читаю твой блог :-) такое ощущение что стоит полностью переходить на nodejs для фронта, а рельсу только в качестве json-api использовать

[Николай Марков]

В рельсе конечно есть всякие клёвые фишки для фронта (вроде simple_form) но с возрастающим кол-вом js-логики это уже не так важно

[Леша Федосеев]

Да, если делать полноценные SPA, да ещё с рендером на сервере, то рельсовый фронт полностью вне игры.