为什么 Firebase 部署完整的反应应用程序而不是部署构建目录文件？

Question

So I created a react app using create-react-app toolchain. Wrote some components and ran

firebase init

npm run build

firebase deploy --only hosting

Now when i inspected my live app in source tab of chrome dev-tools it showed all the source files of react app including comments as it is.

Isn't firebase supposed to deploy only the chunks inside build directory which are optimised and minified for production?

I ran Network test to see what kind of files are being fetched and amazingly it fetches only the chunks inside build directory. Then how all the files of my src directory also present there in raw form?

Now chances are maybe browser construct them from chunks. Then it seems a react build problem that doesn't remove comments and uglify in production build.

But i also analyzed the js chunks in my build directory and they don't have comments embedded.

Here is my firebase config:

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Answer 1

So I found the solution.

And it's not related to firebase hosting.

It's react's build that needs to be configured to solve this problem. Basically, We have to stop react build generating source map.

It looks like these source map inside build directory contains our raw js files that get deployed to firebase.

Change your react build command in package.json to

"build": "GENERATE_SOURCEMAP=false react-scripts build",