Разделение кода CSS с помощью Webpack 2 и React Router

Я разделяю код своих файлов JavaScript с помощью React Router и Webpack 2 следующим образом:

export default {
  path: '/',
  component: Container,
  indexRoute: {
    getComponent(location, cb) {
      if (isAuthenticated()) {
        redirect();
      } else {
        System.import('../landing-page/LandingPage')
          .then(loadRoute(cb))
          .catch(errorLoading);
       }
    },
  },
  childRoutes: [
    {
      path: 'login',
      getComponent(location, cb) {
        System.import('../login/Login')
          .then(loadRoute(cb))
          .catch(errorLoading);
      },
    },
    { /* etc */ 
    }
};

Какие результаты по этому пакету:

public/
  vendor.bundle.js
  bundle.js
  0.bundle.js
  1.bundle.js
  2.bundle.js

Это означает, что конечный пользователь получает только тот JavaScript, который ему нужен, в соответствии с маршрутом, на котором он находится.

Дело в том, что для части css я не нашел никакого ресурса, который бы делал то же самое, а именно разделение CSS в соответствии с потребностями пользователя.

Есть ли способ сделать это с помощью Webpack 2 и React Router?


webpack reactjs css-modules webpack-2 extract-text-plugin
person Matheus Lima    schedule 25.02.2017    source источник
comment
Вы видели документацию по разделению кода CSS? webpack.js.org/guides/code-splitting-css   -  person Jakob Lind    schedule 08.03.2017
comment
@JakobLind да, я сделал. В документах единственным было наличие нескольких записей. Но как я могу иметь несколько записей, если я использую React Router и есть только одна запись.   -  person Matheus Lima    schedule 08.03.2017

Ответы (2)


arrow_upward
2
arrow_downward

Да, это можно сделать. Вам понадобится CommonsChunkPlugin в дополнение к ExtractTextPlugin. Кроме того, определите несколько точек входа

entry: {
    A: "./a",
    B: "./b",
    C: "./c",
},

и настройте ExtractTextPlugin для использования имен точек входа в качестве имен файлов CSS.

new ExtractTextPlugin({
    filename: "[name].css"
}),

См. полный пример здесь:

https://github.com/webpack/webpack/tree/master/examples/multiple-entry-points-commons-chunk-css-bundle

person m1kael    schedule 25.02.2017
comment
Есть ли пример с React Router, я не думаю, что это сработает в моем случае. - person Matheus Lima; 02.03.2017
comment
react-router не имеет ничего общего с тем, как генерируются пакеты CSS. - person m1kael; 02.03.2017
comment
Как я могу разместить несколько точек входа, если сейчас React Router является единственной точкой входа моего приложения? - person Matheus Lima; 02.03.2017

arrow_upward
2
arrow_downward

Хотя я могу не ответить на ваш вопрос как разделить файлы css так, чтобы загружались только необходимые файлы так, как вы хотите, чтобы на вопрос был дан ответ (без плагина или чего-то в этом роде), я надеюсь дать вы возможная альтернатива.

styled-components использовать новую функцию ES6 помеченный литерал шаблона для стилизации компонентов внутри файла javascript. Я думаю, что использование этой библиотеки решит вашу проблему с загрузкой только необходимых файлов css, потому что файлов css как таковых больше не будет.

react-boilerplate выбрал styled-components вместо sass, потому что

styled-components имеют более мощный подход: вместо того, чтобы пытаться дать языку стилей программные возможности, он выносит логику и конфигурацию в JS, которым принадлежат эти функции.

Таким образом, использование styled-components не только решит вашу проблему загрузки только необходимого css, но и еще больше улучшит разделение вашего приложения, упростит тестирование дизайна и причин вашего приложения.

Вот демонстрация, где вы можете поэкспериментировать с styled-components и проверить, как он работает.

person Deividas Karzinauskas    schedule 09.03.2017