Question

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

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

使用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包含：

[ './标志/标志']

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

这就是我被困住的地方。上面提到的'通用组件'NPM模块都没有与Webpack 4兼容，并且依赖于之前的CommonChunksPlugin的技术已经不存在。

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

Webpack 4 - 通过名称/模块ID在SSR中获取异步“splitChunks”

0 个答案: