javascript - webpack 5 模块联合中共享依赖项的树抖动

Question

我正在开发一个动态仪表板的架构，其中使用 webpack 5 模块联合从不同的远程反应包中提取组件。我确实有一些在这些远程包中共享的不同库。这些包是可摇树的。因此，每个远程包将具有来自同一包的不同代码。如果我将这些包作为单例共享，当两个具有相同依赖关系的组件在运行时加载到 DOM 时，webpack 是否可以从两个包合并中获取 lib 代码？或者我们是否有必要在此类共享库中禁用摇树？（通过共享库我指的是 npm 包）

Answer 1

由于无法准确看到您想要做什么，我不确定这是否完全回答了您的问题，但可能对这种情况有用。您可以通过 modules.exports 优化对捆绑包进行更精细的控制。你可以在这里变得非常细化。一个很棒的例子在代码片段的顶部以及优化设置

// Import within node app

  if ($('.fad').length) {
    import('../../node_modules/@fortawesome/fontawesome-pro/scss/duotone.scss');
  }

// Webpack 

modules.exports {
  optimization: {
    splitChunks : {
      chuncks: 'all',
      cacheGroups: {
      duotonecss: {
      test    : /[\\/]node_modules[\\/]@fortawesome[\\/]fontawesome-pro[\\/]scss[\\/](duotone)\.scss/,
      name    : 'duotonecss',
      chunks  : 'all',
      enforce : true,
       },
     },
    },
  },
};

Answer 2

Webpack 自动禁用共享包的 tree-shaking。