React 代码分割：ChunkLoadError：加载块 0 失败

Question

我试图在我的项目中引入代码分割，但我无法让它发挥作用。我得到的错误是：

我有一个 monorepo 设置，lib/其中包含我正在创建的整个 React 库的工作区，以及demo/仅导入该 React 模块并显示它的工作区，以用于测试目的。

我认为问题在于这两者如何交互以及块的输出或其他内容，但无法弄清楚。

我的文件是这样的：

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

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

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

我希望这有帮助！

额外问题/信息：

1. 为什么需要代码分割？您的demo应用程序包是否太大了？
2. 看一下 webpack 的tree-shaking并确保你的libtree -shakable :) 这样你就可以使用代码分割demo而不用担心它lib