时间戳

首页 > 解决方案 > Webpack 从同构组件延迟加载模块（服务器和客户端之间的共享代码）

javascript - Webpack 从同构组件延迟加载模块（服务器和客户端之间的共享代码）

问题描述

假设我有一个节点快速服务器和一个客户端 JavaScript 应用程序。

两者共享相同的组件。

客户端 javascript 通过 webpack 捆绑。

自然有一些库只在客户端需要。

问题是如何配置 webpack 以延迟加载这些模块。

当我只有一个客户端应用程序时，我在一个只能在客户端调用的函数中使用它：

await import( /* webpackChunkName: "tinymce" */ 'tinymce' );

连同使用chunkFilename:webpacks 输出指令中的选项，这导致模块仅在请求时加载。

不幸的是，这在使用节点运行代码时不起作用，因为导入方法不可用。

如果我现在在函数内使用等效的节点调用：

require( 'tinymce' );

Webpack 将整个依赖项包含在入口点中，并且不再拆分块。

在服务器和客户端之间共享代码库时如何使用模块的延迟加载，而不必同时转换节点代码？

标签： javascriptnode.jswebpackbabeljs

解决方案

它可以在节点内和客户端重用相同的代码，而无需转换服务器端代码。

它通过使用require.ensure()而不是仅起作用require()：

// Returns a promise that resolves with the Module
require.ensure( [], ( require ) => require( 'pikaday' ) )

Node 不会抱怨，如果您chunkFilename在webpack.config.js output指令中定义 a，webpack 会成功地将模块放入自己的文件中，该文件将在必要时加载。

我只用我只在客户端需要的模块对此进行了测试，并通过检查typeof document === 'object'asrequire.ensure实际上不是标准方法而是特定于 webpack 来有条件地调用它们。因此，如果您在客户端和服务器端都需要一个模块，它可能不起作用，尽管您可以尝试使用 polyfill for require.ensure for node。

推荐阅读