使用After.js的服务器端渲染和代码拆分

我在带有SSR的React上有应用程序,并使用After.js和Razzle进行了代码拆分。我在自己的路线上使用了asyncComponent功能

//routes.js

export default [
  {
    path: '/',exact: true,component: asyncComponent({
      loader: () => import('./page/Home'),}),},{
    path: '/user',component: asyncComponent({
      loader: () => import('./page/User'),

当我构建应用程序时,webpack会创建主文件和大块(用于js和css),并随已构建的文件一起显示。

//manifest.json
{
  "client": {
    "css": "/static/css/bundle.0b1a612d.css","js": "/static/js/bundle.5d3df609.js"
  },"chunks": {
    "css": [
      "/static/css/0.96013900.chunk.css","/static/css/2.8c059b73.chunk.css","/static/css/4.9870ccba.chunk.css","/static/css/5.9a8343b5.chunk.css"
    ],"js": [
      "/static/js/0.6cbf5f35.chunk.js","/static/js/2.66eeb070.chunk.js","/static/js/3.64d2e8cc.chunk.js","/static/js/4.4689019c.chunk.js","/static/js/5.d1025987.chunk.js"
    ]
  }

我包括从清单到html文档的主文件(client.cssclient.js)。 在这种情况下,应用程序可以正常运行,但是我有FOUC问题。例如,当我请求主页时,服务器仅向我发送主包(js和css),而其他css块(在主页上具有组件样式)仅在加载主js文件后才会得到。

如何在服务器端包含特定页面的所有必需的CSS文件?

hewei600 回答:使用After.js的服务器端渲染和代码拆分

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/2994014.html

大家都在问