React静态页面打包：如何保留未压缩代码以简化后期维护？

在使用 react-app-rewired 打包 react 应用时，代码通常会被压缩以优化加载速度。但对于静态页面项目，开发者可能更倾向于保留未压缩的源码，以便后期轻松修改和维护，避免重新编译部署的繁琐。本文将介绍如何利用 react-app-rewired 避免代码压缩。

问题：项目为静态页面，为了方便后续维护，需要打包后的代码保持未压缩状态，但又不想直接公开源码。

解决方案：修改Webpack配置。react-app-rewired 提供了自定义Webpack配置的能力。通过修改 optimization.minimize 属性，即可控制代码是否压缩。将该属性设置为 false 即可禁用代码压缩。

在 config-overrides.js 文件中添加如下配置：

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

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  (config, env) => {
    config.optimization.minimize = false;
    return config;
  }
);

此配置确保 react-app-rewired 在打包过程中不会压缩代码，从而保留原始代码结构，方便后期维护。 需要注意的是，禁用代码压缩会显著增加打包后文件的大小，进而影响加载速度。因此，需要根据实际项目需求权衡利弊。