Webpack-4如何制作具有多个条目和SSR的独立和有条件的splitChunk

编程问答 2022-06-08

问题描述

我想从某个捆绑包中制作多个块，并使用服务器有条件地渲染它。放置或不放置某些脚本的逻辑 html由另一个应用程序控制，不是问题。我尝试使用可加载组件，但对我不起作用，因为他会生成不良的树相关性。

 export const entry = {
  testAB: testABPath,clients: clientsPath,styles: stylesPath,amp: ampPath,}

然后，我有：

export const optimization = {
  splitChunks: {
    chunks: 'async',cacheGroups: {
      vendor: {
        test(mod) { return checkTest(/[\\/]node_modules[\\/]/,mod)},name: 'vendor',reuseExistingChunk: true,filename: '[name].bundle.js',priority: -10,chunks: 'all'
      },headerA: {
        test: new Regex('/app/src/modules/header/headerA'),name: 'header-module-A',headerB: {
        test: new Regex('/app/src/modules/header/headerB'),name: 'header-module-B',chunks: 'all'
      }
    }
  }
}

这将生成一个没有Header模块代码，header-module-A和header-module-B文件很酷的client.js。

场景1

我在页面中调用clients.js，header-module-A和header-module-B。一切都很好。

场景2

我在特定页面中调用clients.js，头模块A，但没有头模块B。 client.js文件不起作用，因为他的header-module-b具有依赖项（该文件使用checkDeferredModules函数检查所有模块）。

这时，我找到了带有runtimeChunk：'single'选项的解决方案https://github.com/webpack/webpack/issues/9629，它们生成了一个新的Runtime文件。此时的配置如下：

export const optimization = {
runtimeChunk: 'single',splitChunks: {
    chunks: 'async',...getotherChunks,}
  }
}

我已将runtime.js文件放在页眉，其余的脚本放在页脚，但是不起作用。

新方案1

我在页面中调用clients.js，header-module-A和header-module-B。标头不起作用。

新方案2

我在特定页面中调用clients.js，头模块A，但没有头模块B。标头不起作用。

我在做什么错了？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptvendorvendorwebpackwebpackwebpackwebpack-splitchunks