反应代码拆分：ChunkLoadError：加载块 0 失败

Question

我正在尝试将代码拆分引入我的项目，但我无法让它工作。 我得到的错误是：

我有一个 monorepo 设置，其中包含一个包含我正在创建的整个 React lib/工作区，以及一个仅导入该 React 模块并显示它的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

演示/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 ，这把事情React.lazy了。

我希望这有帮助！

---

额外的问题/信息：

1. 为什么需要代码拆分？ 你的demo应用程序包变得太大了吗？
2. 看看 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',
  },