Remove Unused JavaScript - babel asyncToGenerator.js - Webpack

Question

I'm new to Webpack/Babel and trying to leverage it to improve the lighthouse performance of a front-end website that utilizes React.

I ran the lighthouse scan and found a recommendation to remove unused javascript with the main component of this being Babel's asyncToGenerator.js.

Looking at my webpack output, I see the following:

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance. Entrypoints: main (543 KiB)

  vendors-node_modules_babel_runtime_helpers_asyncToGenerator_js-node_modules_babel_runtime_hel-<hash>.css
  vendors-node_modules_babel_runtime_helpers_asyncToGenerator_js-node_modules_babel_runtime_hel-<hash>.js

  main.css
  main.js

webpack.js:

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require( 'path' );
const WebpackPwaManifest = require('webpack-pwa-manifest');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const PreloadWebpackPlugin = require('preload-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
   context: __dirname,
   entry: [
      // "core-js/modules/es.promise",
      // "core-js/modules/es.array.iterator",
      './src/index.js',
   ],
   output: {
      path: path.resolve( __dirname, 'build' ),
      filename: '[name].js',
      publicPath: '/',
      chunkFilename: '[id].[chunkhash].js'
   },
   optimization: {
      chunkIds: "named",
      splitChunks: {
         chunks: 'all',
      },
   },
   devServer: {
      historyApiFallback: true
   },
   module: {
      rules: [
         {
            test: /.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
               loader: 'babel-loader',
               options: {
                 presets: ['@babel/preset-env'],
                 cacheDirectory: true
               }
            }
         },
         {
            test: /.(png|svg|jpg|jpeg|gif|ico)$/,
            exclude: /node_modules/,
            use: ['file-loader?name=[name].[ext]'] // ?name=[name].[ext] is only necessary to preserve the original file name
         },
         {
            test: /.css$/,
            use: [
               MiniCssExtractPlugin.loader,
                'css-loader',
            ],
         },
      ]
   },
   plugins: [
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        template: path.resolve( __dirname, 'public/index.html' ),
        filename: 'index.html',
        favicon: 'public/favicon.ico',
        title: 'Title'
      }),
      new PreloadWebpackPlugin({
         rel: 'preload',
         include: 'initial'
         //include: 'initial',//'asyncChunks',//'initial',//'allChunks',
      }),
      new MiniCssExtractPlugin({
         filename: '[name].css',
         chunkFilename: '[name]-[id].css',
      }),
      new WebpackPwaManifest({
        short_name: "Name",
        name: "Name",
        description: 'desc',
        icons: [
        {
            src: path.resolve('public/favicon.ico'),
            sizes: [64, 32, 24, 16]
          },
        ],
        start_url: "https://<url>.com/",
        display: "browser",
        theme_color: "#66fcf1",
        background_color: "#1f2833"
      }),
      
      new CopyPlugin({
         patterns: [
           { from: './src/serviceWorker.js', to: './serviceWorker.js' },
           { from: './public/offline.html', to: './offline.html' },
           { from: './public/manifest.json', to: './manifest.json' },
           { from: './public/manifest.json', to: './asset-manifest.json' },
           { from: './public/logo-png-192.png', to: './logo-png-192.png' },
           { from: './public/logo-png-512.png', to: './logo-png-512.png' },
           { from: './public/maskable_icon.png', to: './maskable_icon.png' },
         ],
       }),
   ]
};

.babelrc

    {
  "presets": [
    [
      "@babel/preset-env", {
        "modules": "auto",
        "targets": "> 0.25%, not dead"
      } 
    ],
    "@babel/preset-react"
  ],
  "plugins": [ 
    "@babel/plugin-proposal-class-properties",
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ],
    "@babel/plugin-syntax-dynamic-import"
  ]
}

What can I do to only include the asyncToGenerator when needed/only include what is needed?

The page does read from cloudfront and uses lazy loading.

Thoughts?

Answer 1

等待大神答复