Webpack - React Router V4 - код, разбивающий дубликаты модулей на асинхронные блоки

Question

Основная проблема заключается в том, что при разделении кода с помощью response-routerV4, а затем через webpack 2 у меня есть модули, которые находятся в нескольких блоках, и я не могу добраться до основного.

Моя конфигурация выглядит следующим образом:

• Webpack 2.2.1
• Реакт-маршрут 4.1.1

Я использую разделение кода, как в документации по Resact-Router v4

По сути, я не использую импорт, но в конфигурации маршрута у меня есть что-то вроде этого:

import loadHome from 'bundle-loader?lazy&name=home-chunk!./pages/market/Home';
[
  {
    path: url1,
    component: props => <Bundle load={loadHome}>{Home => <Home {...props} />}</Bundle>,
    exact: true,
  },
  // other routes
  ]

Это прекрасно работает с разделением кода, и я получаю пакет для каждого маршрута и еще один пакет для узлов node_modules, которые позже можно разделить.

Моя проблема в том, что у меня есть один node_module (реакции-пятно), который находится в нескольких пакетах. Поэтому я хочу выпустить его в основной комплект.

Моя конфигурация веб-пакета:

module.exports = {
  entry: [
    'whatwg-fetch',
    './src/scripts/index.js',
  ],
  output: {
    path: path.resolve(__dirname, 'src/build'),
    publicPath: '/build/',
    chunkFilename: "[name].js?[hash]",
    filename: '[name].js',
  },
  plugins: [
    new BundleAnalyzerPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': '"production"'
      }
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: ['4_node-modules'],
      minChunks(module) {
       const context = module.context;
       return context && context.indexOf('node_modules') >= 0;
      },
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: ['3_react'],
      chunks: ['4_node-modules'],
      minChunks(module) {
        return module.context && /.*\/react.*/.test(module.context);
      },
    }),
    new webpack.optimize.CommonsChunkPlugin({
        children: true,
        minChunks: 2,
    }),
    new ExtractTextPlugin({
      filename: '[name].css',
      allChunks: true,
    }),
    new HtmlWebpackPlugin({
      filename: '../index.prod.html',
      template: 'src/template.index.prod.html',
      inject: false,
      hash: true,
    }),
  ],
};

Согласно документации, это должно сделать свое дело:

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

Но ничего не происходит, у меня все еще есть "реакция-пятно" в 3 из моих связок.

У кого-нибудь есть подсказка о том, что происходит?

Любая помощь приветствуется:) Спасибо!

Answer 1

И я наконец-то получил решение;)

Я позволил это, чтобы это могло помочь кому-то.

Ответ таков: не указание чанка, по-видимому, не нацелено на все чанки, а только на последний созданный.

Допустим, с помощью router-маршрутизатора V4 мы создали 2 асинхронных блока "home-chunk" и "welcome-chunk". Чтобы вытащить из него общие блоки, добавьте в файл конфигурации webpack (в плагинах):

new webpack.optimize.CommonsChunkPlugin( {
  name : 'common',
  chunks : ['home-chunk', 'welcome-chunk'],
  minChunks : 2,
}),

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

Answer 2

Ответ ниже, скопированный отсюда: Как удалить повторяющиеся компоненты Ant Design в чанках

---

Решение без модификации webpack:

В родительском компоненте (или более высоком родительском компоненте) выполните точно такой же импорт здесь.

import { Row, Col, Button } from "antd"

Вы могли бы использовать React.lazyтакже сюда импортировать. Я не думаю, что это необходимо, но вы можете поместить это вuseEffect поэтому этот код читается вашим приложением только при монтировании родительского компонента.

useEffect(() => {
  React.lazy(() => import("antd"))
}, []);

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

import { Row, Col, Button } from "antd"