reactjs - 如何使用 Webpack/SplitChunks 插件按目录动态拆分？

Question

我正在尝试通过以下方式使用 splitChunks 插件拆分我的 React 代码(使用 create-react-app 创建):

我有以下组件(JSX)结构:

• 服务
  • 服务A
    • 组件A1
    • 组件A2
    • 子文件夹
      • 组件A3
    • ...
  • 服务B
    • 组件B1
    • 组件B2
    • ...
  • 服务C
    • 组件B1
    • 组件B2
    • ...
  • ...

我想要以下输出(构建):

• 静态/js
  • 服务A
    • serviceA.bundle.chunkhash.js
  • 服务B
    • serviceB.bundle.chunkhash.js
  • 服务C
    • serviceC.bundle.chunkhash.js

(其他运行时/主电源位于/static/js 的根目录)

另一个限制是组件是动态加载的

const Component = lazy(() => import(componentPath));
...
<Suspense fallback={..}>Component</suspense>

“componentPath”是动态确定的(当用户单击图标时，它会打开给定的服务)。

这样做的原因是我想将每个包包含到运行后端的单独 Docker 镜像中。然后，由于应用程序路由，每个 Docker 镜像都可以访问:

static/js/serviceA/  ==> js served by Docker container running service A
static/js/serviceB/  ==> js served by Docker container running service B
static/js/serviceC/  ==> js served by Docker container running service C

到目前为止，我尝试过:

• 将output.chunkFilename设置为[name]/[name].[chunkhash].js

• 将 webpackChunkName 与 [name] 和 [request] 一起使用:

  • [name] 似乎不起作用(只是乱七八糟地“[name]”作为我的目录名称的一部分)。

  • [请求]扁平化目录名称:

    serviceA-组件A1服务A-组件A2serviceA-子文件夹-ComponentA3服务B组件B1服务B-组件B2...

然后我尝试使用 splitChunks 插件，如下所示:

  splitChunks: {
    chunks: 'all',
    name: function(module) {
      let serviceName = module.rawRequest ? module.rawRequest : 'default';
      serviceName = serviceName.replace('../', '').replace('./', '');
      serviceName = serviceName.split('/')[0];
      return serviceName;
    },
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: -10
      },
      default: {
        minChunks: 2,
        priority: -20,
        reuseExistingChunk: true
      },
      serviceA: {
        test: /[\\/]serviceA[\\/]/,
        priority: -10
      },
      serviceB: {
        test: /[\\/]serviceB[\\/]/,
        priority: -10
      },
      serviceC: {
        test: /[\\/]serviceC[\\/]/,
        priority: -10
      },              
    }
  },

这种方法看起来很有效，因为我的所有服务都在它们自己的目录中。但我仍然有一些额外的目录作为数字(可能是捆绑 ID)，我希望将它们包含在默认值中。

所以问题是:我的方法正确吗？

Answer 1

我不确定以下选项是否适合您。我遇到了类似的问题，我需要在不同的包上输出不同的文件夹。

就我而言，我从 glob 解决方案开始，建议 here 。然后，知道我需要每个所需输出的输入数组，我想出了这个:

const path = require('path');
const glob = require('glob');

const plugins = [...];

module.exports = {
    entry: glob.sync('./src/**/*.js').reduce((acc, item) => {
        const path = item.split('/');
        path.pop();
        const rootFolder = path[2] ? `${path[0]}/${path[2]}` : path[0];
        if (acc[rootFolder]) {
            acc[rootFolder].push(item);
        } else {
            acc[rootFolder] = [item];
        }
        return acc;
    }, {}),
    output: {
        filename: '[name]/main.js',
        path: path.resolve(__dirname, 'dist'),
    },
  module: { ... },
    plugins,
};

这是我的配置的简化版本，可能还可以改进，但它可以很好地满足我的需求。 :)

有关 glob 库的更多信息:https://github.com/isaacs/node-glob