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

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

我猜想您在React.lazy中使用了lib，这使事情混在一起。

我希望这会有所帮助！

其他问题/信息：

为什么需要代码拆分？您的demo应用包太大了吗？

看看webpack的tree-shaking并确保您的lib是树可摇动的：）这样，您可以在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',
  },

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

lib / webpack.config.js

文件夹结构

demo / package.json

2 个答案: