如何禁用React代码分割机制并打包单个JS文件适配CRM？

一、先处理代码分割禁用问题 #

代码分割的产生通常来自两方面：Webpack的默认分割配置，以及项目中使用的动态导入（如React.lazy）。需要同时处理这两点：

1. 移除项目中的动态导入代码 #

如果项目里用了React.lazy或手动动态导入，直接替换为静态导入：

• 原代码：

  const PrintComponent = React.lazy(() => import('./PrintComponent'));
  

• 修改为：

  import PrintComponent from './PrintComponent';
  

2. 修改Webpack配置（分两种项目场景） #

场景A：Create React App（CRA）项目

无需eject，用customize-cra和react-app-rewired修改配置：

• 安装依赖：

  npm install customize-cra react-app-rewired --save-dev
  

• 修改package.json中的scripts：

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test"
  }
  

• 项目根目录创建config-overrides.js：

  const { override, adjustWebpackConfig } = require('customize-cra');
  
  module.exports = override(
    adjustWebpackConfig((config) => {
      // 禁用Webpack代码分割
      config.optimization.splitChunks = false;
      config.optimization.runtimeChunk = false;
      // 强制输出单个JS文件
      config.output.filename = 'static/js/bundle.js';
      config.output.chunkFilename = 'static/js/bundle.js';
      // 锁定jspdf路径，避免额外chunk
      config.resolve.alias['jspdf'] = require.resolve('jspdf');
      return config;
    })
  );
  

• 执行npm run build，构建完成后dist/static/js下会生成单个bundle.js文件。

场景B：自定义Webpack配置的项目

直接修改webpack.config.js：

const path = require('path');

module.exports = {
  entry: './src/index.js', // 项目入口文件
  output: {
    filename: 'bundle.js', // 输出单个文件名称
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    splitChunks: false, // 禁用代码分割
    runtimeChunk: false,
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      // 根据项目需求添加其他loader（如css、图片处理）
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      'jspdf': require.resolve('jspdf') // 避免jspdf相关分割
    }
  }
};

执行webpack --mode production，dist目录下会生成单个bundle.js。

二、验证构建结果 #

执行构建命令后，检查输出目录：

• 确保只有一个JS文件，没有chunk开头的额外文件
• 测试该JS文件在CRM系统中的运行效果，确认JSPDF的打印功能正常

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