1

反応アプリケーションを構築し、webpack を使用してアセットをバンドルしています。また、ファイル サイズが肥大化しないように、すべての node_module バンドルを分割しています。

目標は、ネットワーク リクエストを減らし、バンドル サイズを小さくすることです。そのため、サーバー側で jsx および js コードを事前に、babel を使用して commonjs モジュールに変換し、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 elementsタブを表示したときに得た結果です

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