在使用 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 在打包过程中不会压缩代码，从而保留原始代码结构，方便后期维护。 需要注意的是，禁用代码压缩会显著增加打包后文件的大小，进而影响加载速度。因此，需要根据实际项目需求权衡利弊。
以上就是React静态页面打包：如何避免代码压缩以方便后期维护？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
1014
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
