代码拆分将从包到不同包的导出分开

Question

我有一个盖茨比网站，它使用了许多软件包。其中一个包是从我们的monorepo发布的：@example/forms。该包包含许多命名的导出，每个导出对应于我们在网站上使用的表单组件。有相当多的形式，其中一些是相对复杂的多步骤形式，规模非常大。

目前，Gatsby/Webpack在树共享方面做得很好，并且确实生成了大量捆绑包，一些通用捆绑包和一个用于站点的每个页面的捆绑包，其中包含仅在该页面上使用的任何本地资产或组件。但是，来自@example/form的所有组件都被添加到Commons捆绑包中，尽管大多数仅在单个页面上使用。这导致加载到每个页面上的Commons捆绑包不必要的膨胀。

如果感觉应该可以将@example/form中的各个组件拆分为特定于页面的捆绑包，但我不确定我是否希望太多。例如，如果表格A仅用于第4页，我希望表格A仅添加到第4页的捆绑包中。

这是被支持的吗？如果是的话，是什么阻止了这一切的发生。

@example/forms在ES6导出保持不变的情况下进行传输，副作用在其包中设置为false。json。

它的主文件是索引。js将所有表单组件作为单独的命名导出（重新）从它们自己的文件中导出：

export {default as FormA} from './forms/formA'
export {default as FormB} from './forms/formB'
...

另一件可能相关的事情是，所有从@example/forms导出的内容都在盖茨比网站内使用，只在单独的页面上使用。似乎树木摇动不能跨束使用，即首先进行树木摇动，然后将剩下的部分拆分为束。使用这种逻辑，@example/forms将在多个页面上使用，并移动到commons。然而，这肯定不是最优的，希望不是正在发生的事情。

Answer 1

树摇动过程是缩小步骤的一部分，这实际上处于后期阶段，因为不可能颠倒顺序，首先是树摇动，然后是块分割。

但是，您可以使用一些启发式方法来拆分表单库

1. 基本的一个是使用splitChunks将这个@example/form模块整体拆分为一个单独的块，这将减少公地膨胀

// webpack.config.js

module.exports = {
  ...
  optimization: {
    splitChunks: {
      cacheGroups: {
        formComponents: {
          chunks: 'all',
          enforce: true,
          minChunks: 1,
          name: 'form-components',
          priority: 10,
          test: /[\\\/]node_modules[\\\/]@example[\\\/]forms[\\\/]/,
        },
      },
    },
  },
  ...
};

// webpack.config.js

module.exports = {
  ...
  optimization: {
    splitChunks: {
      cacheGroups: {
        formComponents: {
          chunks: 'all',
          minChunks: 1,
          name(module) {
            const libPath = path.resolve(path.join('node_modules/@example/forms'))
            const folderBasedChunk = path.relative(libPath, module.context);
            const hash = crypto.createHash('sha1');
            hash.update(folderBasedChunk)
            return hash.digest('hex').substring(0, 8)
          },
          priority: 10,
          reuseExistingChunk: true,
          enforce: true,
          test: /[\\\/]node_modules[\\\/]@example[\\\/]forms[\\\/]src[\\\/]forms[\\\/]/,
        },
      },
    },
  ...
};

您可以查看我创建的一个模拟场景的小示例。https://github.com/felixmosh/webpack-module-split-example

希望这能有所帮助