reactjs - 反应代码拆分:ChunkLoadError:加载块 0 失败
问题描述
我正在尝试将代码拆分引入我的项目,但我无法让它工作。我得到的错误是:
我有一个 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
演示/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.lazy
in demo
,而不是 in lib
,并且在 building 时demo
,每个都React.lazy
将生成一个新包。
demo
可以访问所有lib
源文件(或单个文件 dist),并且只有需要的内容才会最终出现在构建的应用程序中。
我猜你用过React.lazy
,lib
这把事情搞混了。
我希望这有帮助!
额外的问题/信息:
- 为什么需要代码拆分?您的
demo
应用程序包是否变得太大? - 看看 webpack 的tree-shaking并确保你
lib
的tree-shakable :) 这样你就可以使用代码拆分demo
而不用担心它lib
推荐阅读
- python - 如何在不使用 [0] 的情况下打印出 json 对象?
- react-native - 反应本机:Virtualbox linux内核驱动程序不存在或权限问题
- amazon-web-services - IAM 创建策略只允许一个区域但所有全球服务都需要
- firebase - Firebase Cloud Functions Firestore - 无法读取 null 的属性“文本”
- mysql - 如何使用sql合并两列?
- json - Glue 抓取的混合模式事件的建议 JSON 结构
- angular - 使用异步管道会丢失对对象类型的引用
- angular - 没有连接后端的提供者
- jquery - 获取嵌套元素数组 JSON 文件
- orchardcms - Orchard SQL Server 数据库用户