Javascript 部署前端项目的困惑

我是web开发新手，通过与Firebase和Cloud Firestore一起做一个小型React项目来学习React。我用的捆扎机是包裹

我了解，前端项目在完成

地块构建

后，默认情况下，所谓的生产就绪文件应位于自动生成的

dist

文件夹中。我可以使用firebase来部署它。我确实做到了。然而，在部署项目之后，我有一些问题

我认为Parcel将通过将所有js文件缩小到一个压缩的js文件来构建我的项目（除非我显式地编写

Parcel build index.html——不缩小
）。因此，部署的项目应该只附带一个js文件，而不需要将每个React组件的js文件传递给客户端。但奇怪的是，我通过检查部署项目的dev工具中的
源代码
找到了所有的js文件。这是截图。我对捆绑的理解是错误的吗？或者只是因为地块的配置已关闭

我还通过检查部署项目的开发工具中的

Sources

找到了我的

firebaseConfig.js

文件，其中包含我的项目的

appid键。我不知道这是否安全，也不知道如何避免。考虑到我正在使用FielBASE的Web SDK，我没有为这个项目设置我自己的服务器，这是不是暴露了你的AppDIKE在这种情况下不可避免的？

最后，在我构建包之后，我认为缩小的js文件会很小。但它们仍然很大。

.js.map

文件几乎是8MB。这正常吗

我发现我的firebaseConfig.js文件在那里，是否公开您的appidKey/secure

根据这个答案，以及我的知识和以前的经验，是的，这是安全的，也是不可避免的。将使用你的应用程序的用户需要该配置才能知道要连接到什么

如果你想知道更多，你可以阅读我对这个问题的回答，这是一个与你关于API键的问题类似的问题，正如你所看到的，没有办法仅仅“模糊”你的API键

在我构建包之后，我认为缩小的js文件会很小。但它们仍然很大。.js.map文件几乎是8MB。这正常吗

虽然我已经很长时间没有使用packet来阅读文档了，但在运行build命令时，您可能缺少

节点_ENV=production

标志

它应该类似于这个

NODE_ENV=production parcel build entry.js

这还应该解决第1点的问题，即检查时文件过多

即使您在开发过程中使用

packetwatch

为您的文件提供服务，它也不会改变，最好让它们都像那样，未统一，不丑陋，这样当HTML、JS或CSS出现问题时，您可以更好地检查

---

此外，如果您正在开发，我建议您在

地块构建

上使用

地块观察

，这样，当您更改前端中的某些文件时，它将自动更新。

关于第2点，请看我不是地块专家，但如何使用webpack对其进行测试？你所描述的问题在我使用webpack时从未出现过。也许这是一个好主意，通过快速阅读教程，并给它一个镜头。此外，部署结构看起来像是有人故意部署了整个项目，而不仅仅是项目的范围。即使是节点模块也有，但我还是喜欢屏幕截图中的有趣图标：D@arnonuem你好，谢谢你的回复。我也喜欢那个有趣的图标！你能详细解释一下为什么看起来像是“有人故意部署了整个项目”？比如“但奇怪的是，我通过检查我部署项目的开发工具中的源代码找到了所有js文件”：这是源代码映射造成的。您仍然有捆绑的文件（只有一个

src.[hash].js

file）请在此处阅读有关源映射的信息：。和

.map

文件通常都很大。