标签: loadable-component

我正在尝试将 Loadable 组件集成到我的 SSR 项目中，当我在 localhost:3000 中执行时它正在工作，然后我尝试将它部署在云功能中我收到此错误

[ERR_INVALID_ARG_TYPE]：“路径”参数必须是字符串类型。收到未定义

之后我尝试部署可加载组件服务器端渲染示例，示例代码也给出了同样的错误。

我在 package.json、server main.js 和 app.js 文件中做了一些更改以在 Cloud 函数中工作

这是我的服务器 main.js 文件

import path from 'path'
import express from 'express'
import React from 'react'
import { renderToString } from 'react-dom/server'
import { ChunkExtractor } from '@loadable/server'
import App from '../client/App'
const functions = require('firebase-functions');
const app = express()


//app.use(express.static(path.join(__dirname, '../../public')))


const nodeStats = path.resolve(
  __dirname,
  '../../public/dist/async-node/loadable-stats.json',
)

const webStats = path.resolve(
  __dirname,
  '../../public/dist/web/loadable-stats.json',
)

app.get('*', (req, res) => {
  const …

在将服务器端渲染React应用程序迁移到可加载组件以进行代码拆分和延迟加载后，初始包大小及其下载时间按预期减少。然而，在将经典的React渲染方法替换为Loadable Components 之后，在其余应用程序代码不变的情况下，我在PageSpeed / LightHouse 中的累积布局移位得分飙升，从 0.05 到 1 或更高。我的意思是即使没有动态加载任何组件，否则情况会更糟。

我做错了什么？

可加载组件之前的 SSR 代码（良好的 CLS 分数）：

服务器端 ：

...
import React from 'react'
import { renderToString } from 'react-dom/server'
import { StaticRouter } from 'react-router-dom'
...
const ssrApp = renderToString(
  <StaticRouter location={`/${this.requestedPage.uri}`} context={{}}>
    <App />
  </StaticRouter>
)

客户端 ：

...
import React from 'react'
import { BrowserRouter } from 'react-router-dom'
import { hydrate } from …

简化我的帖子：

我的 ssr 网页在启动客户端时闪烁，这意味着页面渲染服务器端渲染的 html，然后变为空白，然后开始重新加载所有内容。

详细说明：

我正在开发一个反应项目，我们决定将其从在客户端渲染更改为在服务器渲染。该项目包括react-router-dom,redux和react-redux，material-ui它附带react-jss, loadable/component，还通过 来处理头元素react-helmet-async，并且在 ssr 中它使用express.js这似乎是必须的。

• 因为react-router-dom我做了文档上的所有内容。BrowserRouter在客户端和StaticRouterssr 中使用并向context其传递一个对象。
• for redux，react-redux我保存preloaded_state在窗口中的变量中，并在客户端获取它，然后将其传递给存储。还获取了一些外部数据以获取页面源上的内容。所以我在 ssr 中有一些请求和数据获取。
• 因为material-ui我创建了一个new serverSideStyleSheet并收集了整个项目的所有样式。
• 因为react-helmet-async我Helmet为每个页面设置了不同的标签，收集不同的标题、描述和...个人。还有一个helmetProvidercsr 和 ssr 的包装器。
• 起初我使用了，react-helmet但它与 .i 不兼容。renderToNodeStream我没有更改react-helmet-async，尽管我没有使用 renderToNodeStream 但renderToNodeStream希望将其迁移到有一天。
• 关于express.js我按照文档所说使用它，但是在我添加之后，loadable/component …

我在一个使用以下项目的项目中工作：

• 反应/反应-dom@16.9.0
• @loadable/组件
• 样式组件
• 反应路由器dom

该应用程序呈现服务器端和客户端。

我正在使用@loadable/component这种方式动态代码拆分。

路由器.tsx

import * as React from 'react'
import loadable from '@loadable/component'
import { Route, Switch } from 'react-router-dom'

const NotFound = loadable(() =>
  import('../components/NotFound/NotFound' /* webpackChunkName: "notfound" */)
)

const routes = (
  <Switch>
    <Route component={NotFound} />
  </Switch>
)

export default routes

加载页面时，此错误出现在控制台上，页面似乎闪烁了一秒钟。

react-dom.development.js:546 Warning: Did not expect server HTML to contain a <div> in <main>.

当我检查双方（服务器/客户端）的输出时，它们是相同的。

当我@loadable/component像下面那样删除时，它可以工作并且错误消失了。

路由器无负载.tsx

import * as React …

we have got our ecommerce platform already in production and we are experiencing weird ChunkLoadError. This error happens randomly, and is not replicable. When we are trying to open failed file it is there and can be loaded normaly.

If user get's this error, he get's white screen (logicaly) but after refresh everything is fine.

We are running SSR ecommerce on React (latest), Express (latest)

our webpack / razzle config

const path = require('path');
const autoprefixer = require('autoprefixer');
const MiniCssExtractPlugin …

我正在尝试提高我的网站性能，而 Google Chrome Lighthouse 告诉我使用可加载组件进行 ssr 以“删除未使用的 javascript”。

我在文档中发现它似乎是一个对我的案例具有有用功能的库，例如：组件拆分/加载库。

我的问题是：

1. @loadable/component 真的那么好吗？
2. 如果它很好，我应该将它用于任何组件/库导入吗？

谢谢！