Динамическая подгрузка js, css в REACT?

Question

[mikor]

Имеем React, Webpack, React-Router

Ну и одна точка входа

import React from 'react'
import ReactDOM from 'react-dom'
import { Router, Route, Switch } from 'react-router'
import createHistory from 'history/createBrowserHistory'

// SHARED
import './shared/stylesheets/base.scss'

// APPS
import Welcome from './welcome'
import Authorization from './authorization'
import Registration from './registration'

const history = createHistory()
const div = document.createElement('div')
document.body.append(div)

ReactDOM.render(
  <Router history={history}>
    <Switch>
      <Route component={Welcome} exact={true} path="/" />
      <Route component={Authorization} exact={true} path="/sign_in" />
      <Route component={Registration} exact={true} path="/sign_up" />
    </Switch>
  </Router>,
  div
)

у меня генерируются 4 файла: index.html, main.css, main.js, manifest.js. Как вы можете видеть по маршрутам есть 3 страницу и хотелось бы что бы для каждой страницы грузился свой css/js файл + общие (vendors и manifest), а не один main содержащий в себе всю пачку стилей/скриптов.

Вопрос как? Или с одной точкой входа такое не провернуть?

Answer 1

[dummyman]

А зачем это надо? Во первых, одним файлом загружать гораздо быстрее, чем десятками мизерных почти с одним и тем же пустым шаблоном кода.

Если делать индивидуально для каждой страницы - может быть пересекающийся код, который помимо трафика сожрет повторно еще и оперативки.

Например, то же сжатие gzip имеет смысл на файлах >8kb, в противном случае он может не только не сжимать код, но и немного увеличить. При этом один собранный общий файл js или css gzip легко может сжать и в 10 раз.

Собирать код в общие файлы также полезно и для сервера. Даже если они кэшируются браузером, браузер все равно отправляет запрос по каждому файлу web-серверу, который в свою очередь смотрит в папку с проектом и отвечает браузеру, что файл не изменился. А каждое обращение к HDD съедает его ресурс и увеличивает время переходов по сайту.

Мое мнение - если у вас меньше 20Мб яваскрипта и стилей - не стоит задумываться об их разделении. Большой головняк и при этом минимум эффективности.

Comments

[mikor]

А зачем это надо? Во первых, одним файлом загружать гораздо быстрее, чем десятками мизерных почти с одним и тем же пустым шаблоном кода.

Это нужно что бы пользователь не грузил ненужный для него контент (если коротко). Кто Вам сказал что их будут десятки? Один общий файл, манифест и файл ресурса

Если делать индивидуально для каждой страницы - может быть пересекающийся код, который помимо трафика сожрет повторно еще и оперативки.

Вы настраивали webpack? Импортировали классы? Использовали ExtractTextPlugin? имена классов выглядят как набор символов и защищены от коллизии

Например, то же сжатие gzip имеет смысл на файлах >8kb, в противном случае он может не только не сжимать код, но и немного увеличить. При этом один собранный общий файл js или css gzip легко может сжать и в 10 раз.

Не знаю насколько достоверна информация, но я не переживаю за то что файл на 1-2кб будет весить больше

Собирать код в общие файлы также полезно и для сервера. Даже если они кэшируются браузером, браузер все равно отправляет запрос по каждому файлу web-серверу, который в свою очередь смотрит в папку с проектом и отвечает браузеру, что файл не изменился. А каждое обращение к HDD съедает его ресурс и увеличивает время переходов по сайту.

По поводу чем меньше запросов к серверу - согласен. Но плюсы данного подхода перекрывают минус того что будет на 1 запрос больше. А что касается съедания ресурсов HDD то это ерунда какая то, мы же не в 90ых, сервер не файл в папке сверяет, а хэш и нагрузки какой то значительной на сервер это не оказывает

Мое мнение - если у вас меньше 20Мб яваскрипта и стилей - не стоит задумываться об их разделении. Большой головняк и при этом минимум эффективности.

Отчасти я с Вами согласен, может быть да, гемора меньше, проще, но плюсов такого подхода что я описал - значительно больше. Я думаю вам не составит труда найти популярные ресурсы с таким подходом и может быть чу чуть изменить свое мнение.

За ответ спасибо, было интересно прочитать

[dummyman]

mikor:

Не знаю насколько достоверна информация, но я не переживаю за то что файл на 1-2кб будет весить больше

Я не имел в виду упущением рост полукилобайтного файла. Я имел в виду, что десятимегабайтный файлик можно сжать до 1.5-2Мб. Не использовать преимущества gzip - вот это упущение.

По поводу чем меньше запросов к серверу - согласен. Но плюсы данного подхода перекрывают минус того что будет на 1 запрос больше. А что касается съедания ресурсов HDD то это ерунда какая то, мы же не в 90ых, сервер не файл в папке сверяет, а хэш и нагрузки какой то значительной на сервер это не оказывает

Вы не правы, он сверяет атрибуты к файлу, не считая его хеш. Вы еще так рассуждаете, что посчитать сумму можно не прочитав файл полностью. Но даже просто прочитать дату последнего изменения файла - это уже запрос к HDD. Это уже ценные миллисекунды времени и лишняя работа, которую можно было бы избежать.

Вы настраивали webpack? Импортировали классы? Использовали ExtractTextPlugin? имена классов выглядят как набор символов и защищены от коллизии

Вот это я вообще не понял к чему. Я работал в хостинговой компании с конца 2007 по начало 2009 года. Мне приходилось думать над тем, как настроить сервер так, чтобы говнокод клиента работал не принося ущерб соседям, при этом ни при каких обстоятельствах, не меняя в клиентском говнокоде ни байта, и конфигах ни одной опции. Для клиента наша работа должна была быть "незаметной".

Answer 2

[Sergey Illarionov]

Насчет динамической подгрузки js-файлов, я дал вам ответ в этой теме.
Насчет же файлов стилей, тут можно по-разному и если я сейчас повторю то, что сказали выше, то прошу не быть очень строгим.
По себе скажу, что удобно когда в проекте есть папка styles, в которой содержится main.less (работаю с less просто), в котором подключен ваш reset.css, variables.less с переменными, etc. Файл main.less, в свою очередь, импортируется в вашей точке входа. В main.less содержаться очень общие стили проекта.
Что касательно компонентов и их стилей. Как принято, smart-компоненты не содержат стили, dumb - содержат, то есть у каждого dumb-компонента есть (если необходимо) свой одноименный файл с разрешением - *.less, *.scss, *.css (выбирайте по вкусу), который подключенный к этому компоненту.
Как описывать стили? Вот пару вариантов (для всех вариантов необходима соответствующая настройка конфигурации Webpack.):

• BEM - нотация
  
• CSS - модули
  

Насчет стилей и Webpack. Как я понимаю, есть два варианта:

• В Webpack вы используете ExtractTextPlugin - получаете один bundle.css, где находятся общие стили проекта и стили каждого компонента
  
• В Webpack вы не используете ExtractTextPlugin:
  
  • Если у вас один bundle.js, то в нем вы получите все свои стили
    
  • Если вы используете динамическую подгрузку скриптов по роуту, то получите в каждом js-chunk'e и js,
    и css-код, то есть то же, что и выше, только разделено согласно роутам (попробовал только-что на своем проекте - работает)
    
  
  

Answer 3

[Роман Александрович]

вы можете рядом с каждым компонентом создать свой css и подключить import './yourcss.css'.
таким образом для каждого компонента можно отдельно писать свои стили.

Comments

[mikor]

Роман Александрович: Было бы хорошо если так, но я например в компонент Registration импортирую файл со стилями что относится только к нему. Но в ответ я получаю тот же main.css со всеми стилями

[Роман Александрович]

mikor: у меня от отрабатывает как описано выше. надо смотреть структуру вашего проекта. думаю у вас где то подключён и main .css и .css компонента. если так то используйте !important

[mikor]

Роман Александрович: Буду безумно рад увидеть Ваш пример на github.

По поводу стилей, чуть подробнее расскажу тогда, может я чего очевидного не вижу. Например для страницы /sign_up, т.е. компонента Registration

Компонент - Registration.jsx

import React from 'react'
import { Link } from 'react-router-dom'
import './Registration.scss'

export default () => (
  <div>
    <h1>Sign up</h1>
    <Link to="/sign_in">Sign in</Link>
  </div>
)

Файл стилей компонента - Registration.scss

body {
    background-color: yellow;
}

Entry (точка входа)

import React from 'react'
import ReactDOM from 'react-dom'
import { Router, Route, Switch } from 'react-router'
import createHistory from 'history/createBrowserHistory'

// SHARED
import './shared/stylesheets/base.scss'

// APPS
import Welcome from './welcome'
import Authorization from './authorization'
import Registration from './registration'

const history = createHistory()
const div = document.createElement('div')
document.body.append(div)

ReactDOM.render(
  <Router history={history}>
    <Switch>
      <Route component={Welcome} exact={true} path="/" />
      <Route component={Authorization} exact={true} path="/sign_in" />
      <Route component={Registration} exact={true} path="/sign_up" />
    </Switch>
  </Router>,
  div
)

и основной файл стилей в /shared/base.scss

body {
  text-align: center;
}

На выходе получаем main.css

body {
  text-align: center; }
body {
  background-color: yellow; }

Вот как то так...

[Роман Александрович]

mikor: слушайте если такая проблема с этими css пишите прям в компоненте

import TextField from "material-ui/TextField";
import Checkbox from "material-ui/Checkbox";
import RaisedButton from "material-ui/RaisedButton";
import Snackbar from "material-ui/Snackbar";
import Preloader from '../Preloader/Preloader'
class Login extends Component {
    constructor(props) {
        super();
        this.state = ({
        });
    }

    render() {
        return (
            <div>
                <div style={mainDiv}>
                    <img src="./img/da-systems.png" alt="" style={imageWidthHeight}/>
                    <TextField
                        floatingLabelText="Inlognaam" fullWidth={true}
                        onChange={this.validationLogin.bind(this)}
                        value={this.state.loginValue}
                        errorText={this.state.loginErr}
                    />

                    <TextField
                        floatingLabelText="Wachtwoord" fullWidth={true} type="password"
                        onChange={this.validationPass.bind(this)}
                        value={this.state.passValue}
                        errorText={this.state.passErr}
                    />

                    <TextField
                        floatingLabelText="Organisatie" fullWidth={true}
                        onChange={this.validationOrganization.bind(this)}
                        value={this.state.organizationValue}
                        errorText={this.state.organizationErr}
                    />
                    <div style={styles.myWidth}>
                        <Checkbox
                            label="Gegevens onthouden"
                            style={styles.checkbox}
                            onCheck={this.rememberMe.bind(this)}
                            checked={this.state.rememberMe}
                        />
                    </div>
                    <RaisedButton label="LOG IN" primary={true} fullWidth={true} onClick={this.logIn.bind(this)}/>
                </div>
            </div>
        )
    }
}

const styles = {
    block: {
        maxWidth: 250,
    },
    checkbox: {
        marginBottom: 16,
        width: '100%',
    },
    div: {
        display: 'flex',
        flexDirection: 'column',
        padding: 20,
        width: '100%',
    },
    paperLeft: {
        flex: 1,
        height: '100%',
        margin: 10,
        textAlign: 'center',
        padding: 10
    },
    paperRight: {
        height: 600,
        flex: 4,
        margin: 10,
        textAlign: 'center',
    },
    myWidth: {
        width: '100%',
        display: 'flex',
        marginTop: '15px',
        marginBottom: '15px',

    }

};

const imageWidthHeight = {
    marginTop:'25px',
    maxWidth: '130px',
}
const mainDiv = {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    marginLeft: '25px',
    marginRight: '25px',
}

export default Login

Answer 4

[vaskadogana]

вот хорошая сборка