2

I am new to web development and been learning React by doing a small React project along with Firebase and Cloud Firestore. The bundler I am using is Parcel.

I understand that, a front end project, after being parcel build, the so called production ready files should reside in the automatically generated dist folder by default. And I can use firebase to deploy it. And I did manage to do that. However here are some questions I have after deploying the project.

  1. I thought Parcel will build my project by minifying all the js files I have to a single compressed js file(unless I explicitly write parcel build index.html --no-minify). So the deployed project should only come with that one js file without the overhead of passing every React components' js files to the client. But strangely I found all of the js files by inspecting Sources from the dev tool for my deployed project. Here is the screenshot. enter image description here Is my understanding about bundling wrong? Or it is just because the config for Parcel is off?
  2. I also found the my firebaseConfig.js file by inspecting Sources from the dev tool for my deployed project, which contains the appid key for my project. I don't know if this is safe and I don't know how to avoid this either. Consider that I am using the Web SDKs of Firebase and I didn't set up my own server for the project, is this exposing-your-appidKey thing inevitable in this case?
  3. Lastly, after I Parcel build, I thought the minified js files would be small. But they are still huge. The .js.map file is almost 8 mb. Is this normal?enter image description here
Joji
  • 4,703
  • 7
  • 41
  • 86
  • For point 2, see https://stackoverflow.com/questions/37482366/is-it-safe-to-expose-firebase-apikey-to-the-public – Renaud Tarnec Jul 29 '19 at 13:53
  • I am not an expert on parcel but how about testing it with webpack? The problems you describe never occured to me using webpack. Maybe its a good idea to read through a quick tutorial and give it a shot. Also the deployment structure looks like that someone intentionally deployed the whole project instead of just the dist of the project. Even the node_modules are there o_O. But nevertheless i like the FUN icon in the screenshot :D – arnonuem Aug 07 '19 at 14:02
  • @arnonuem hi thanks for your reply. I like that FUN icon too! Could you elaborate on why it looks like " someone intentionally deployed the whole project"? – Joji Aug 07 '19 at 23:11
  • For "But strangely I found all of the js files by inspecting Sources from the dev tool for my deployed project": it's due to source maps. You still have files bundled (there is only one `src.[hash].js` file) Read about source-maps here: https://stackoverflow.com/questions/21719562/javascript-map-files-javascript-source-maps. And `.map` files are generally large. – Sid Vishnoi Aug 12 '19 at 08:24

1 Answers1

3

I found that my firebaseConfig.js file is there, is exposing-your-appidKey inevitable/secure?

As Renaud Tarnec linked this answer Is it safe to expose Firebase apiKey to the public?, and from that answer and my knowledge and previous experience, yes, it's secure and it's inevitable. The users that will use your app will need that config to know what to connect to.

If you want to know more, you can read my answer to this problem, which is a similar question to the one you had regarding API keys, and as you can see there is no way to just "obscure" the api key that you have there https://stackoverflow.com/a/55196666/4229159

After I Parcel build, I thought the minified js files would be small. But they are still huge. The .js.map file is almost 8 mb. Is this normal?

Although I haven't used parcel in quite a long time reading through the docs, it seems like you might be missing the NODE_ENV=production flag when running the build command

It should look similarly to this NODE_ENV=production parcel build entry.js

This should also address the issue of the 1st point, in which you have too many files when inspecting.

Even though if you are using parcel watch to serve your files while developing, it won't change, and it's better to have them all like that, unminified, and not uglified, so you can inspect better when an issue happens with your HTML, JS or CSS

Also, if you are developing, I recommend you to use parcel watch over parcel build that way it will update automatically as soon as you change some file in the frontend.

Alejandro Vales
  • 2,816
  • 22
  • 41