Реакция разделения кода: ChunkLoadError: Ошибка загрузки фрагмента 0

Question

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

У меня есть установка monorepo с рабочим пространством lib/, которое содержит всю создаваемую мной библиотеку реагирования, и demo/ рабочее пространство, которое просто импортирует реагирующий модуль и отображает его для тестирования.

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

Мои файлы такие:

lib / webpack.config. js

var path = require('path')

module.exports = {
  entry: {
    maps: './src/index.js'
  },
  output: {
    path: __dirname + '/dist',
    filename: 'index.js',
    library: 'Map',
    libraryTarget: 'umd'
  },
  module: {
    rules: [
      {
        test: /\.[s]?css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: {
                  localIdentName: "[name]__[local]___[hash:base64:5]",
                }
            }
          },
          'sass-loader'
        ],
        include: /\.module\.[s]?css$/
      },
      {
        test: /\.[s]?css$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        exclude: /\.module\.[s]?css$/
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            rootMode: 'upward'
          }
        }
      },
      {
        test: /\.svg$/,
        use: ['@svgr/webpack']
      },
      {
        test: /\.(jpe?g|png)$/i,
        loader: 'file-loader?name=/public/icons/[name].[ext]'
      }
    ]
  },
  resolve: {
    modules: [
      path.resolve(__dirname, 'src'),
      path.resolve(__dirname, '../node_modules')
    ],
    extensions: ['.js', '.jsx']
  },
  externals: {
    // Use external version of React
    react: 'react',
    'react-dom': 'react-dom'
  },
  // NOTE: @claus added options to fix files not being watched
  watchOptions: {
    aggregateTimeout: 300,
    poll: 1000
  }
}

Структура папок

lib/ // In this project we try to use code splitting using React.Lazy()
  package.json
  webpack.config.js
demo/ // Includes the lib module for testing purposes
  package.json
babel.config.js
package.json

демо / пакет. json

{
  "name": "demo",
  "version": "0.1.0",
  "license": "MIT",
  "dependencies": {
    "maps": "link:../map/"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 11"
    ]
  }
}

Answer 1

Ошибка возникает при попытке загрузить чанк пакета, который недоступен.

Насколько я понимаю, разделение кода используется для приложений, а не для библиотек.

Использование разделения кода для библиотеки будет означать, что вам придется доставлять несколько фрагментов как dist - ни один файл, как ваши настройки

    path: __dirname + '/dist',
    filename: 'index.js',

Я не уверен, что разделение кода работает для библиотек - или что от этого выиграет.

Использование разбиения кода в demo означает, что необходимые куски из lib будут объединены в куски демо. Вам придется использовать React.lazy в demo, а не в lib, и при сборке demo каждый React.lazy будет генерировать новый пакет. demo имеет доступ ко всем исходным файлам lib (или к одному файлу dist), и только то, что нужно, окажется во встроенном приложении.

Полагаю, вы использовали React.lazy в lib, и это все перемешало.

Надеюсь, это поможет!

---

Дополнительные вопросы / информация:

1. зачем вам расщепление кода? Ваш demo пакет приложений становится слишком большим?
2. Взгляните на тряску деревьев в веб-пакете и убедитесь, что ваш lib шатается по дереву :) Таким образом, вы можете использовать разбиение кода в demo и не беспокоиться об этом в lib