reactjs - 如何在 Laravel 8 webpack.mix.js 中设置 React lazy

Question

我正在使用 Laravel 8 中的 React 脚手架。这是我的 webpack.mix.js

const mix = require('laravel-mix');
mix.ts("resources/js/index.tsx", "public/js").react();
mix.js('resources/js/laravel_app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);
mix.webpackConfig({
    output: {
        filename:'[name].js',
        chunkFilename: 'chunk/[name].js',
    },
});
//mix.babelConfig({
//    plugins: ['@babel/syntax-dynamic-import'],
//  });
//  mix.extract();

这只会制作 2 个默认的 js 文件（index.js（10 MB）、laravel_app.js（600 KB））。当我使用 mix.extract() 它只是将 js 拆分为基于节点模块的各种文件，而不是基于延迟导入（就像他们在文档中所写的那样（https://laravel-mix.com/docs /6.0/提取））。
懒惰地实施 React 我错过了什么？

我的 tsx 文件是；
进口；

import React, { useRef, Suspense, lazy } from 'react';
const Works = lazy(() => import('./pages/Works'));

用法;

  <Routes>
    <Route path="/works/*" element={
      <Suspense fallback={<>...</>}>
        <Works theme={theme}/>
      </Suspense>} />
  </Routes>