Javascript 网页包静态和动态导入都不会导致块

我一直在为一些事情挣扎（做出反应，但并不重要）。 设想以下设置：

// modules/A/index.ts
export { actions } from '/actions'
export { default as RootComponent } from './component' // imagine this to be big, I tried adding 250kb of data to it.
export { default as reducer } from './reducer'
export { default as saga } from './saga'

现在。。在应用程序中，有以下内容：

// index.js
import {actions} from './modules/A';

const LazyComponent = React.lazy(() => import('./modules/A').then(res => {
  // doing something with the reducer/saga
  return {default: res.RootComponent}
}));

// LazyComponent as a route, using an action from actions to trigger something (if present)

所有这些都很好，除了当我从模块静态导入操作时，不会再生成块，所有内容都会在主js中结束。如果我想从模块的actions文件本身导入actions，它将为动态导入生成一个块，如所需

如果有什么方法可以达到我想要的效果： 静态地从模块导入一些内容，但仅在需要时加载其余内容（因为大小）

我们的想法是，稍后可以将模块提取为依赖项（es模块），然后pkg.module将成为某种索引，那么如何支持这样的代码拆分呢

简化的网页包配置（从另一个项目复制，尚未真正完成）（v4.43）：

---

您能否提供您的

webpack

config文件，以及您使用的webpack版本？另外，React

lazy

和

suspend

未准备好SSR，因此这不会在服务器上起到提示作用。

const config = {
    target: 'web',
    entry: {
        app: './src/index.tsx',
    },

    output: {
        filename: '[name].[chunkhash].bundle.js',
        path: path.join(__dirname, 'dist'),
        publicPath: '/',
    },

    resolve: {
        extensions: ['.tsx', '.ts'],
        modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    },

    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: [
                    {
                        loader: 'thread-loader',
                        options: {
                            poolTimeout: isProduction ? 500 : Infinity,
                        },
                    },
                    {
                        loader: 'ts-loader',
                        options: {happyPackMode: true},
                    },
                ],
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(ttf|eot|svg|jpg|gif|png|woff(2)?)(\?[a-z0-9]+)?$/,
                loader: 'file-loader',
            },
        ],
    },

    plugins: [
        ...(isProduction ? new CleanWebpackPlugin() : []),
        new webpack.DefinePlugin({
            PRODUCTION: isProduction,
        }),
        new htmlWebpackPlugin({template: './src/index.html'}),
        new CopyWebpackPlugin({
            patterns: [
                {
                    context: './public',
                    from: '**/*',
                },
            ]
        }),
        new CircularDependencyPlugin({
            exclude: /node_modules/,
            failOnError: true,
        }),
    ],

    devServer: { /* blabla*/ },
    optimization: {
        noEmitOnErrors: true,
    },
    stats: {
        warningsFilter: /export .* was not found in/,
    },
}