1

我正在构建一个反应应用程序并使用 webpack 来捆绑资产。我还拆分了所有 node_module 包，这样文件大小就不会膨胀。

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

到目前为止，这是我在 webpack 配置文件中的 optimization.splitChunks 代码。如果有什么解释不清楚，我是 webpack 和 babel 的新手，请原谅。

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',
    },
  },
},

然后这是我在查看 chrome devtool 元素选项卡时得到的结果

// 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>
4

0 回答 0