React静态页面打包：如何避免代码压缩以方便后期维护？

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