Reactjs 使用babel服务器端预编译JSX/JavaScript，然后在生产构建中将babel从webpack包中排除。可能吗？怎么用？

我正在构建一个react应用程序，并使用webpack捆绑资产。我还将拆分所有节点模块捆绑包，以便文件大小不会过大

我们的目标是减少网络请求并减少捆绑包的大小，因此我认为最好将jsx和js代码预转换为commonjs模块，在服务器端使用babel，这样babel就不再需要发送到浏览器

这是我的optimization.splitChunks代码，目前在网页包配置文件中。我是webpack的新手，如果有什么事情没有解释清楚，巴贝尔请多多关照

splitChunks: {
  name: 'components',
  cacheGroups: {
    vendor: {
      test: /[\\/]node_modules[\\/]/,
      name(module) {
        const name = module.context.match(/node_modules[\\/](.*?)([\\/]|$)/)[1];
        return `${name.replace('@', '')}`;
      },
      filename: 'vendor/[name].js',
    },
    template: {
      test: /[\\/]template[\\/]/,
      name: 'template',
    },
  },
},

这就是我在查看ChromeDevTool元素选项卡时得到的结果

// rendered in DOM document.body 

<script async="" data-chunk="main" src="/static/js/runtime.a5cbbe54.js"></script>
<script async="" data-chunk="main" src="/static/js/main.4107eaec.js"></script>
<script async="" data-chunk="Home" src="/vendor/react-icons.js"></script>
<script async="" data-chunk="Home" src="/static/js/template.7880c2a3.js"></script>

// Is there a way to exclude babel here ? while preserving the functionality of react components ?

<script async="" data-chunk="Home" src="/vendor/babel.js"></script>   
<script async="" data-chunk="Home" src="/static/js/components.1dba9c56.js"></script>
<script async="" data-chunk="Home" src="/static/js/Home.503ffd56.js"></script>

//在DOM document.body中呈现
//有没有办法把巴贝尔排除在外？同时保留react组件的功能？