假设我有一个节点快递服务器和一个客户端JavaScript应用。
两者共享相同的组件。
客户端javascript是通过webpack捆绑的。
自然，只有客户端才需要一些库。
问题是如何配置webpack来延迟加载这些模块。
当我只有一个客户端应用程序时，我在只能在客户端调用的函数中使用了此功能：
await import( /* webpackChunkName: "tinymce" */ 'tinymce' );
与webpacks输出指令中的chunkFilename:选项一起使用，导致仅在请求时加载模块。
不幸的是，这在使用node运行代码时不起作用，因为导入方法不可用。
如果我现在在功能内使用等效节点的require调用代替
require( 'tinymce' );
Webpack将整个依赖项包含在入口点内，并且不再拆分该块。
在服务器和客户端之间共享代码库时又如何无需移植节点代码，如何使用延迟加载模块？
答案 0 :(得分：0)
可以在节点内部和客户端重用相同的代码，而不必移植服务器端代码。
通过使用require.ensure()而不是仅require()起作用：
// Returns a promise that resolves with the Module
require.ensure( [], ( require ) => require( 'pikaday' ) )
Node不会抱怨，如果您在chunkFilename webpack.config.js指令中定义了output，则webpack将成功将模块放入其自己的文件中，并在必要时进行加载。
我仅使用仅在客户端需要的模块进行了测试，并通过检查typeof document === 'object'和require.ensure是否实际上不是标准方法而是特定于Webpack的条件调用它们。因此，如果您需要在客户端和服务器端都需要一个模块，则可能不起作用，尽管您可以尝试对节点的require.ensure使用polyfill。