如何用React.lazy()拆分HandsOnTable代码包并兼容compression-webpack-plugin

问题背景 #

需要将以下HandsOnTable的导入代码改为React.lazy()实现Webpack代码分割，减少主包体积：

import {HotTable} from '@handsontable/react';
import {registerAllModules} from 'handsontable/registry';
registerAllModules();

尝试过的方案及问题 #

方案1 #

const HotTable = React.lazy(() => import('@handsontable/react'));
import {registerAllModules} from 'handsontable/registry';
registerAllModules();

• 代码能正常运行，但HandsOnTable没有被拆分出来，依然打包在主chunk中，达不到代码分割的目的。

方案2 #

const HotTable = React.lazy(() => import('@handsontable/react'));
React.lazy(
  () => import('handsontable/registry').then((registerAllModules) => {
    registerAllModules();
    return { registeredModules: true };
  })
);

• Webpack成功拆分出独立chunk，但页面加载时出现内容解码错误：

main.90757321a1336791f3c9.bundle.js:2 
GET http://localhost:5000/215.21bf19f9d6a7317b2ad5.bundle.js 
net::ERR_CONTENT_DECODING_FAILED 200 (OK)

• 排查后确认问题和compression-webpack-plugin相关，禁用压缩后组件可正常加载，但需要在启用压缩的前提下解决问题。

正确实现方式 #

问题根源在于第二个React.lazy的用法不符合规范——React.lazy要求返回的Promise必须resolve一个包含default导出的模块，而方案2中第二个lazy调用返回的对象不满足这个要求，同时模块注册逻辑不应该单独用一个React.lazy包裹。

正确的做法是把registerAllModules的逻辑整合到HotTable的lazy加载回调中，确保组件和依赖的模块注册逻辑被打包到同一个chunk，同时符合React.lazy的规范：

const HotTable = React.lazy(() => 
  Promise.all([
    import('@handsontable/react'),
    import('handsontable/registry')
  ]).then(([hotTableModule, registryModule]) => {
    registryModule.registerAllModules();
    return hotTableModule;
  })
);

解决原理 #

1. 合并组件加载与模块注册逻辑到同一个lazy任务，避免生成无意义的独立chunk（之前方案2中第二个lazy生成的chunk因不符合导出规范，导致webpack压缩后解析失败）。
2. 确保registerAllModules在组件初始化前执行，避免组件加载时出现模块未注册的错误。
3. 返回的Promise最终resolve的是包含HotTable的模块，符合React.lazy的要求，webpack可以正确处理该chunk的压缩与加载。

补充：compression-webpack-plugin配置建议 #

确保你的压缩插件配置正确，避免重复压缩或错误处理chunk：

// webpack.config.js示例配置
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  // ...其他webpack配置
  plugins: [
    new CompressionPlugin({
      algorithm: 'gzip',
      test: /\.(js|css|html|svg)$/, // 只压缩指定类型的文件
      threshold: 8192, // 文件大小超过8KB才压缩
      minRatio: 0.8 // 压缩率低于0.8才会生成压缩文件
    })
  ]
};

内容的提问来源于stack exchange，提问作者opike