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 在打包過程中不會壓縮代碼，從而保留原始代碼結構，方便后期維護。 需要注意的是，禁用代碼壓縮會顯著增加打包后文件的大小，進而影響加載速度。因此，需要根據實際項目需求權衡利弊。