4

我正在尝试模仿Webpack 4中react-universal-component的效果。

TL;DR - 我想要一种在 SSR HTML 渲染中转储<link>和标记的方法，其中包含客户端在任何给定路由上请求的所有CSS/JS 块，而服务器则同步加载。<script>

使用react-loadable，一个典型的异步 React 组件在服务器和客户端包中都是这样的：

const Logo = loadable({
  loader: () => import("./logo/logo"),
  loading: ()  => <div>Loading...</div>,
  modules: ["./logo/logo"],
  webpack: () => [(require as any).resolveWeak("./logo/logo")],
});

在服务器上，我<Loadable.Capture>用来获取用于渲染路由的模块名称：

// Modules used to render this route
const modules: string[] = [];

// Generate the HTML from our React tree.
const components = (
  <Loadable.Capture report={moduleName => modules.push(moduleName)}>
    <StaticRouter location={ctx.request.url} context={routeContext}>
      <Root />
    </StaticRouter>
  </Loadable.Capture>
);

哪个工作正常 -modules路线/logo包含：

['./logo/logo']

我现在需要做的是以某种方式./logo/logo在 Webpack stats 中找到（在我的服务器环境中作为传递给中间件的变量或作为 Webpack 生成的静态 JSON 文件可用）并将其与生成的块相关联调用返回的模块 ID require.resolveWeak()...或（最好）直接在./logo/logo导入名称上。

这就是我卡住的地方。上面提到的“通用组件”NPM 模块中没有一个与 Webpack 4 兼容，并且依赖于以前的 CommonChunksPlugin 的技术已经失效。

是否有任何使用 Webpack 统计信息以根据传递给的字符串查找相关块文件名的示例import()？

4

0 回答 0