Что делать с огромным файлом скриптов React?

Question

[Денис Букреев]

Такие дела.
На выходе проекта главный файл скриптов весит почти 3MB - ну это же хрень полная выходит.
Неужели так и должно быть? Пользователю придется грузить 3 метра скриптов при загрузке сайта? А если у него кэши отключены?

Comments

[Дмитрий Лузанов]

Если это после минификации то у меня для вас плохие новости -_-

Answer 1

[Максим]

Это уже файл после "разбивания на кусочки" (для гугления - code splitting) ?
Грузите то, что нужно определенному роуту и будет получше.

гугление не даст полной картинки сразу, но постепенно соберется.

Потребуется использовать getComponent из React-router, а далее webpack 2 уже сам сделает почти все...

Выглядит так:

function def(promise) {
  return promise.then(cmp => {
    console.info('Dynamic loaded by route: ', cmp.default.displayName) // для тестирования можете логировать имя компонента
    return cmp.default
  })
}

...
<Route path='/signin' getComponent={() => def(import('../containers/SigninContainer'))} />
...

Comments

[Денис Букреев]

нет, еще ничего не разбивал на кусочке и даже впервые слышу об этом)
спасибо, прогуглюсь сейчас

[vaskadogana]

Максим: гуглю и развлекюсь уже третий день) и вот случайно наткнулся на ваш комментарий.
Я правильно вас понял, сразу грузим бандл для текущего роута, а остальные в фоновом режиме подгружаются? Конфигом вебпака не поделитесь?)

[Максим]

vaskadogana: у задачи 2 части: первая - настроить вебпак, вторая роутер.
Пункт 1 - нужен syntax dynamic import

{
        test: /\.js$/,
        include: path.join(__dirname, 'src'),
        use: [{
          loader: 'babel-loader',
          options: {
            presets: [['es2015', {modules: false}], 'stage-3', 'react'],
            plugins: [
              'syntax-dynamic-import',
            ],
          },
        }]
      },

Пункт 2:

function def(promise) {
  return promise.then(cmp => {
    console.info('Dynamic loaded by route: ', cmp.default.displayName) //eslint-disable-line no-console
    return cmp.default
  })
}
...
<Route path='/signup' getComponent={() => def(import('../containers/SignupContainer'))} />