Question

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

//routes.js

export default [
  {
    path: '/',
    exact: true,
    component: asyncComponent({
      loader: () => import('./page/Home'),
    }),
  },
  {
    path: '/user',
    exact: true,
    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.css和client.js）。在这种情况下，应用程序可以正常运行，但是我有FOUC问题。例如，当我请求主页时，服务器仅向我发送主包（js和css），而其他css块（在主页上具有组件样式）仅在加载主js文件后才会得到。

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

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

0 个答案: