技術標籤：ReactWebpackreactwebpack

在打包上傳伺服器過程中，為了進行優化，可謂較勁腦汁，其中有一個方式，是利用gzip減少靜態資源大小，這是個好主意，我打算嘗試一下。

網上的提示是利用compression-webpack-plugin外掛，但是這個外掛需要先npm run eject，即生成webpack相關的一些檔案，但是我想繼續使用react-app-rewired做個性化配置，於是在網上找了很多相關知識。

在此總結一下。

1、需要的配置外掛

yarn add react-app-rewired -s

yarn add react-app-rewire-
 
compression-plugin -s

yarn add customize-cra -s

2、修改package.json檔案內容

其中env-cmd是做動態配置的，你可以省去不加，其中eject，好像不支援react-app-rewired，會報錯，相關文件上也沒有修改

  "scripts": {
    "start": "react-app-rewired start",
    //"start:prod": "env-cmd -f .env.prod yarn start",
    "build"
 
: "react-app-rewired build",
    //"build:prod": "env-cmd -f .env.prod yarn build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject",
    "serve": "serve -s -l 80  build"
  }

3、在一級目錄下新建config-overrides.js檔案

4、新增外掛配置

override會給函式傳config和env相關引數

const { override, fixBabelImports } = require("customize-cra");
const rewireCompressionPlugin = require('react-app-rewire-compression-plugin');

// 在這裡進行自定義修改相關配置
const replaceConfig = () => (config,env) => {
	// 在這裡進行CompressionPlugin的配置
  config = rewireCompressionPlugin(config, env, {
    test: /\.js(\?.*)?$/i,
    cache: true
  })
  // 需要返回config物件
  return config;
};

module.exports = override(
	// 按需打包
  fixBabelImports("antd", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: "css",
  }),
  fixBabelImports("react-use", {
    libraryName: "react-use",
    libraryDirectory: "lib",
    camel2DashComponentName: false,
  }),
  replaceConfig()
);

5、結果