javascript - 关于部署前端项目的困惑

Question

我是 Web 开发新手，通过与 Firebase 和 Cloud Firestore 一起做一个小型 React 项目来学习 React。我使用的 bundler 是 Parcel。

据我了解，前端项目在parcel build之后，所谓的生产就绪文件应该驻留在自动生成的dist中> 默认文件夹。我可以使用 firebase 来部署它。我确实做到了。不过，我在部署项目后遇到了一些问题。

1. 我认为 Parcel 会通过将我拥有的所有 js 文件缩小为单个压缩 js 文件来构建我的项目(除非我明确编写 parcel build index.html --no-minify)。因此，部署的项目应该只附带一个 js 文件，而不需要将每个 React 组件的 js 文件传递​​给客户端的开销。但奇怪的是，我通过检查部署项目的开发工具中的 Sources 找到了所有 js 文件。这是屏幕截图。 难道是我对捆绑的理解有误？或者只是因为 Parcel 的配置关闭了？
2. 我还通过检查已部署项目的开发工具中的Sources 找到了我的 firebaseConfig.js 文件，其中包含 appid key对于我的项目。我不知道这是否安全，也不知道如何避免这种情况。考虑到我使用的是 Firebase 的 Web SDK，并且没有为该项目设置自己的服务器，在这种情况下暴露您的 appidKey 的事情是不可避免的吗？
3. 最后，在我Parcel build之后，我认为缩小后的js文件会很小。但它们仍然很大。 .js.map 文件大约有 8 MB。这是正常的吗？

Answer 1

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

如Renaud Tarnec链接此答案Is it safe to expose Firebase apiKey to the public? ，根据这个答案以及我的知识和以前的经验，是的，它是安全的并且是不可避免的。将使用您的应用程序的用户将需要该配置才能知道要连接到什么。

如果您想了解更多信息，可以阅读我对此问题的回答，该问题与您关于 API key 的问题类似，正如您所见，没有办法仅“隐藏”API key 你那里有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?

虽然我已经很长一段时间没有使用parcel了，但在阅读文档时，您似乎在运行构建命令时缺少NODE_ENV=product标志

它看起来应该与此NODE_ENV=生产包构建入口.js

类似

这也应该解决第一点的问题，即检查时文件太多。

即使您在开发时使用 parcel watch 来提供文件，它也不会改变，而且最好让它们都像这样，未缩小且不丑化，这样您就可以当您的 HTML、JS 或 CSS 出现问题时更好地检查

此外，如果您正在开发，我建议您使用 parcel watch 而不是 parcel build，这样一旦您在前端更改某些文件，它就会自动更新.