如何为Graphiql+React应用生成单构建文件以解决部署分块错误？

你可以通过调整打包配置禁用代码分割，将所有代码合并为单个构建文件，具体分两种场景操作：

一、使用Create React App（CRA）搭建的项目 #

如果你的项目基于CRA，无需弹出配置，可借助工具修改打包规则：

1. 安装依赖

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

2. 在项目根目录创建config-overrides.js文件，添加以下配置：

const { override, disableChunk } = require('customize-cra');

module.exports = override(
  disableChunk()
);

3. 修改package.json中的scripts命令，替换原react-scripts为react-app-rewired：

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

4. 执行npm run build，构建完成后dist目录下会生成单个main.js文件。

二、自定义Webpack配置的项目 #

如果项目使用自定义Webpack配置，直接修改webpack.config.js：

1. 禁用代码分割和runtime chunk：

module.exports = {
  // ...其他已有配置
  output: {
    filename: 'bundle.js', // 指定单个输出文件名
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    splitChunks: false, // 禁用代码分割
    runtimeChunk: false, // 禁用独立的runtime chunk
  },
  // ...其他已有配置
};

2. 执行打包命令，即可得到单个构建文件。

注意事项 #

• 打包为单个文件会增大文件体积，可能影响首次加载速度，但能彻底解决生产环境的chunk加载错误问题。
• 你使用的GraphiQL相关依赖内部若存在动态导入，禁用代码分割后会被合并到单个文件中，不会影响功能运行。

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