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

iv

我正在尝试将代码拆分引入我的项目,但是我无法使其正常工作。我得到的错误是:

在此处输入图片说明

我有一个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"
    ]
  }
}
泰迪熊

尝试加载不可用的捆绑程序块时引发该错误。

据我了解,代码拆分用于应用程序,而不是库。

对库使用代码拆分意味着您将必须交付多个块,dist而不是像设置那样传输单个文件

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

我不确定代码拆分是否适用于库-否则会有什么好处。

使用代码分割demo一个需要从碎片手段lib将演示的块捆绑在一起。你将不得不使用React.lazydemo,而不是lib和建设时demo,各React.lazy将产生新的组合。demo有权访问所有lib源文件(或单个文件dist),并且只有所需的内容才会在生成的应用程序中结束。

我猜你用React.lazylib这种混合的东西了。

我希望这有帮助!


额外的问题/信息:

  1. 为什么需要代码拆分?您的demo应用包太大了吗?
  2. 看一下webpack的摇树,并确保您lib可以:)这样,您可以使用代码拆分,demo而不必担心lib

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

vue-router无法解析异步组件默认值:ChunkLoadError:加载块供应商〜演示失败

来自分类Dev

使用webpack代码拆分,如何加载块和HTML布局?

来自分类Dev

代码拆分导致在新部署 SPA 后无法加载块

来自分类Dev

webpack 2反应代码拆分

来自分类Dev

Django + Webpack + Vue + 代码拆分 - 如何更改块文件的加载 url

来自分类Dev

反应延迟加载导入失败

来自分类Dev

代码拆分将所有块文件加载到chrome上,但分别将它们加载到firefox中

来自分类Dev

代码块 OpenCV 构建失败

来自分类Dev

反应本机代码热加载

来自分类Dev

拆分编织程序块代码及其输出

来自分类Dev

Wepback。使用import()后加载块失败

来自分类Dev

代码::具有MinGW链接的块失败

来自分类Dev

视图加载后如何运行代码块

来自分类Dev

React Route Splitting代码无法加载块

来自分类Dev

Webpack即时加载代码拆分包

来自分类Dev

如何将代码块拆分为列表?

来自分类Dev

使用webpack设置块路径a并响应延迟代码拆分

来自分类Dev

AFNetworking 2.0从失败块中的代码400获取JSON

来自分类Dev

AFNetworking 2.0从失败块中的代码400获取JSON

来自分类Dev

异常代码块失败的机会是多少

来自分类Dev

如何挽救 ruby 异常,而不是代码块中的失败

来自分类Dev

该代码块在做什么?(u> 0)-(u <0)

来自分类Dev

ClojureScript Google关闭代码拆分部分加载

来自分类Dev

同构Redux,具有代码拆分和延迟加载的reducer

来自分类Dev

用户浏览时代码拆分/预加载内容?

来自分类Dev

在 try-catch 块中加载图像,让 catch 块响应特定的失败图像

来自分类Dev

什么时候应该使用代码拆分?,拆分片段是否加载一次?

来自分类Dev

进程在代码块中返回-1073741819(0xC0000005)

来自分类Dev

内联代码块与保证金:0自动

Related 相关文章

  1. 1

    vue-router无法解析异步组件默认值:ChunkLoadError:加载块供应商〜演示失败

  2. 2

    使用webpack代码拆分,如何加载块和HTML布局?

  3. 3

    代码拆分导致在新部署 SPA 后无法加载块

  4. 4

    webpack 2反应代码拆分

  5. 5

    Django + Webpack + Vue + 代码拆分 - 如何更改块文件的加载 url

  6. 6

    反应延迟加载导入失败

  7. 7

    代码拆分将所有块文件加载到chrome上,但分别将它们加载到firefox中

  8. 8

    代码块 OpenCV 构建失败

  9. 9

    反应本机代码热加载

  10. 10

    拆分编织程序块代码及其输出

  11. 11

    Wepback。使用import()后加载块失败

  12. 12

    代码::具有MinGW链接的块失败

  13. 13

    视图加载后如何运行代码块

  14. 14

    React Route Splitting代码无法加载块

  15. 15

    Webpack即时加载代码拆分包

  16. 16

    如何将代码块拆分为列表?

  17. 17

    使用webpack设置块路径a并响应延迟代码拆分

  18. 18

    AFNetworking 2.0从失败块中的代码400获取JSON

  19. 19

    AFNetworking 2.0从失败块中的代码400获取JSON

  20. 20

    异常代码块失败的机会是多少

  21. 21

    如何挽救 ruby 异常,而不是代码块中的失败

  22. 22

    该代码块在做什么?(u> 0)-(u <0)

  23. 23

    ClojureScript Google关闭代码拆分部分加载

  24. 24

    同构Redux,具有代码拆分和延迟加载的reducer

  25. 25

    用户浏览时代码拆分/预加载内容?

  26. 26

    在 try-catch 块中加载图像,让 catch 块响应特定的失败图像

  27. 27

    什么时候应该使用代码拆分?,拆分片段是否加载一次?

  28. 28

    进程在代码块中返回-1073741819(0xC0000005)

  29. 29

    内联代码块与保证金:0自动

热门标签

归档