React Native Web项目中Webpack未为React.lazy动态导入生成独立Chunk

我正在开发一个基于React Native Web的项目，使用自定义Webpack配置，试图通过React.lazy配合动态导入实现代码分割，但Webpack并没有按照预期为这些动态导入的模块生成独立的Chunk，试过多种方案都没能解决问题。

动态导入代码示例 #

const Apple = React.lazy(() => import(/* webpackChunkName: "Apple" */ './Apple'));

自定义Webpack配置 #

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

const config = (_, argv) => ({
    target: 'web',
    entry: {
        main: path.resolve(__dirname, 'src', 'main'),
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[contenthash].js',
        chunkFilename: '[name].[contenthash].js',
    },
    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
        alias: {
            'react-native$': 'react-native-web',
        },
    },
    module: {
        rules: [
            {
                test: /\.(tsx|jsx|ts|js)?$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true,
                        presets: [
                            ['@babel/preset-env', { modules: false }], // 转译现代JS
                            '@babel/preset-react', // 支持JSX
                            'module:metro-react-native-babel-preset',
                        ],
                        plugins: [
                            'react-native-web',
                            '@babel/plugin-syntax-dynamic-import',
                            '@babel/plugin-proposal-export-namespace-from',
                            'react-native-reanimated/plugin',
                            '@babel/plugin-transform-flow-strip-types',
                            [
                                '@babel/plugin-transform-private-methods',
                                { loose: true },
                            ],
                        ],
                    },
                },
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'public/index.html'),
        }),
        process.env.ANALYZE && new BundleAnalyzerPlugin(),
    ].filter(Boolean),
    optimization: {
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all',
                },
            },
        },
    },
});

module.exports = config;

当前打包产物 #

Assets: 
  main.d4d5a64793bc974cb170.js (2.05 MiB)
  vendors.e9f736b3a31c46ef0971.js (9.08 MiB)
Entrypoints:
  main (11.1 MiB)
      vendors.e9f736b3a31c46ef0971.js
      main.d4d5a64793bc974cb170.js

内容的提问来源于Stack Exchange，提问作者Mohsen