Как реализовать динамический import для code splitting в Webpack 2?

Question

[Николай Домбровский]

Казалось бы все просто. Используем конструкцию вида:

import(/* webpackChunkName: "my-component-chunk" */ 'MyComponent').then((Component) => {
  this.setState({ Component });
})

и радуемся жизни. Ага, компонент работает, но chunk в итоге не создастся - все так же будет в основном.
require.ensure - та же песня
В конфиге webpack (версия 2):

new webpack.optimize.CommonsChunkPlugin({
  children: true,
  async: true,
}),
...
//остальные статичные чанки типа 'vendor'

Что не так?

Answer 1

[Николай Домбровский]

Нашел я решение, опубликовал ответ на подобный вопрос, напишу и сюда. Все довольно просто, если знать нюансы:
1) Нужно понимать, что то что мы хотим загрузить должно быть в отдельном файле - чанке.
2) Для того что бы создался чанк необходимо все импорты этого компонента грузить "лениво". Это очень важно, в свое время именно это мешало мне разбить существующий проект на чанки.
3) Ну и самое простое: грузим через промис import:

const loadEditor = () => import(/* webpackChunkName: "my-best-editor-chunk" */ 'react-dart-editor');
  loadEditor().then(m => use it);

4) Конфиг webpack:

new webpack.optimize.CommonsChunkPlugin({
  children: true,
  async: true,
  minChunks: 2,
}),
new webpack.optimize.CommonsChunkPlugin('manifest'),

Так же можно импортировать и функции.

Я использую такой компонент:

Chunk.jsx

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Chunk extends Component {
  state = { LoadedComponent: null };

  componentWillMount() {
    if (this.props.preload) this.load(this.props);
  }

  componentWillReceiveProps(nextProps) {
    const { load, component, show } = nextProps;
    if (
      this.props.load !== load ||
      this.props.component !== component ||
      (this.props.show !== show && show)
    ) {
      this.load(nextProps);
    }
  }

  load(props) {
    this.setState({ LoadedComponent: null });
    props.load().then((mod) => {
      this.setState({
        LoadedComponent: props.component ? mod[props.component] : mod.default,
      });
    });
  }

  renderLoading = () => this.props.showLoading ? (<div>Loading</div>) : null;

  render() {
    const { LoadedComponent } = this.state;
    const  { show, ...props } = this.props;
    delete props.load;
    delete props.component;
    if (!show) return null;
    return LoadedComponent ? <LoadedComponent {...props} /> : this.renderLoading();
  }
}

Chunk.defaultProps = {
  showLoading: false,
  preload    : true,
  show       : true,
};

Chunk.propTypes = {
  load       : PropTypes.func.isRequired,
  show       : PropTypes.bool,
  preload    : PropTypes.bool,
  component  : PropTypes.string,
  showLoading: PropTypes.bool,
};

export default Chunk;

Использовать так:

<Chunk
  load={loadEditor} // была уже выше
  component="EditorAside" // если нужно что-то, что импортируется не по дефоулту
  show={true/false} // отображать ли компотнент
  preload={true/false} // осуществлять ли предзагрузку чанка
  props1="1"
  props2="2"
/>

Answer 2

[Никита Гущин]

UPD2: Решение проблемы
У вас есть название entryPoint и именно его нужно указать как name при конфигурации commonChunksPlugin

entry: {
    application:  /* ... */
  },
....
plugins: {
  new webpack.optimize.CommonsChunkPlugin({
      name: 'application', // <--- Так же как и entryPoint
      async: "vendors", // <--- будет использовано как имя файла (можно оставить просто true). "vendors.js"
      children: true,
      minChunks: 2 // <--- должно быть >= 2
    })
}

Похоже, что это issue. Обсуждение идет тут -https://github.com/webpack/webpack/issues/5109#iss...

OLD:

старый ответ

По-идее у вас должно быть что-то такое:

{
  entry: {
    main: './reactStartup.js'
  },
  output: {
    filename: '[name]-bundle.js',
    chunkFilename: '[name]-chunk.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: 'dist/'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      async: true,
      children: true,
      minChunks: 2,
    }),
  ]
}

Обратите внимание на minChunks по-умолчанию там скорей всего Inf (документация), а это значит, что в этот чанк ничего не попадает.

Но CommonsChunkPlugin просто выделяет общие модули (которые используются >= 2х раз), а для динамических импортов вам нужен отдельно плагин для babelrc:

// .babelrc
{
  "plugins": [
    "syntax-dynamic-import"
  ]
}

UPD1
Еще дело может быть в модулях - я с вебпаком2 давно отключил преобразование модулей в babel ( "modules": false):

"presets": [
    [
      "env",
      {
        "targets": {
          "node": "current",
          "browsers": "last 2 versions"
        },
        "modules": false,
        "loose": true
      }
    ],
    "react",
  ],

Comments

[Николай Домбровский]

Спасибо за ответ (быстрее чем англ. сообщество, кстати).
Плагин на бабель есть и модули отключил.
minChunks - про inf знаю.
А вот chunkFilename - упустил, посмотрю, спасибо.

[Николай Домбровский]

Не помогло.

[Никита Гущин]

Николай Домбровский: Николай, проблему еще не решили?
Попробуйте глянуть вот этот репозиторий - https://github.com/ModusCreateOrg/budgeting-sample...

Ребята там тестировали вебпак2 с code-splitting и кучей крутых штук, может у них в конфиге найдете недостающую деталь

[Николай Домбровский]

Никита Гущин: Извиняюсь за долгий ответ, не было времени попробовать.
Пример отличный, но у меня так ничего и не вышло. Разница в 2х вещах относительно примера (теперь):
1) У них React router 4 (у меня 3), но чанки создаются другим модулем, как я понимаю.
2) у них в конфиге только 1 включение CommonsChunkPlugin, у меня 3: для чанков, для vendor и для manifest.

Может быть в этом проблема?

[Никита Гущин]

Николай Домбровский: я нашел решение - обновил ответ