React Code-Splitting: ChunkLoadError: Loading chunk 0 failed

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

demo/package.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 中需要的部分将捆绑在演示的块中。您必须在 demo 中使用 React.lazy，而不是在 lib 中，并且在构建 demo 时，每个 React.lazy 都会生成一个新的包。 demo 可以访问所有 lib 源文件（或单个文件 dist），并且只有需要的内容才会出现在构建的应用程序中。

我猜你在 lib 中使用了 React.lazy，这把事情搞混了。

希望对您有所帮助！

额外 questions/info：

为什么需要代码拆分？您的 demo 应用程序包是否变得太大了？

看看 webpack 的 tree-shaking 并确保你的 lib 是 tree-shakable :) 这样你就可以在 demo 而不用担心 lib

Answer 2

我遇到过这个问题，我的解决方案是对该文件进行以下更改

.erb/configs/webpack.config.renderer.prod.babel.js

更改自：

output: {
    path: path.join(__dirname, '../../src/dist'),
    publicPath: './dist/',
    filename: 'renderer.prod.js',
  },

更改为：

output: {
    path: path.join(__dirname, '../../src/dist'),
    publicPath: '../dist/',
    filename: 'renderer.prod.js',
  },

React Code-Splitting: ChunkLoadError: Loading chunk 0 failed