CODEWITHSUNDEEP
reactjs
r121
r121

Reputation: 2728

How to compress build files in react app?

I want to know How to compress the .js and .css files after a normal react build. Right now I am using this script

    "build": "npm run watch:css && react-scripts build",
    "postbuild": "cd ./build/static && gzip *.js && gzip *.css",

to compress the files but it's showing me this error message every time when I build the app using npm run build.

enter image description here

build folder structure: enter image description here

Anyone, please help me with this.

Upvotes: 2

Views: 5455

Answers (2)

GMKHussain
GMKHussain

Reputation: 4681

  • Add compress-create-react-app npm i compress-create-react-app

  • Edit script in package.json

// package.json
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && compress-cra", // <-- Edited
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  • Create compress-cra.json file on root folder
// compress-cra.json
{
    "algorithms": ["br", "gz"],
    "filetypes": [
      ".html",
      ".js",
      ".css",
      ".svg",
      ".png",
      ".jpg",
      ".mp3",
      ".wav",
      ".tff",
      ".woff2"
    ],
    "directory": "/build"
  }

Create build and check

npm run build

npx serve -s build

Upvotes: 3

Samira
Samira

Reputation: 2733

first: npm i gzipper -g

second: you can write these commands on package.json

"build": "react-scripts build && gzipper --verbose ./build"

then for compress, you need to use this :

"build":"react-scripts build && gzipper compress ./build"

if you want to zip CSS and js you can use :

"build": "react-scripts build && gzipper compress ./build/static/css && gzipper compress ./build/static/js",

it works for me very well :

enter image description here

Upvotes: 3

Related Questions