Next.js-将服务器端软件包导入文件中是否包含服务器端和客户端功能？

Question

假设我有一个名为utils.js的文件，其中包含两个函数s和c。 s是服务器端函数（在/ api端点处理程序上调用），并使用mongodb包。 c是客户端功能（将捆绑并发送到浏览器）。

使用下一个版本编译应用程序时，会引起任何问题吗？ Webpack是否知道仅捆绑文件/模块的一部分？ （考虑服务器端功能并以“死代码”形式导入，因为它们只能从服务器端代码中调用）

谢谢

Answer 1

我认为会有错误，但不会在构建时间内出现错误。问题很可能会在运行时发生。您将无法像访问服务器端的window对象一样访问客户端的文件系统。

在我当前的项目中，我们具有用于服务器端，客户端或通用的实用程序功能。在getServerSideProps中调用所有服务器端函数，以确保它们按预期工作。如果这就是您所谓的“死代码”，那么getServerSideProps中所有服务器端代码都不会作为客户端捆绑包的一部分导入。根据Next.js

注意：您可以导入顶级范围的模块以用于 getServerSideProps。 getServerSideProps中使用的导入将不会 捆绑在客户端。

这意味着您可以直接在其中编写服务器端代码 getServerSideProps。这包括从文件系统或 数据库。

我不知道您可以要求Webpack捆绑文件的一部分或执行导入语句的子集的方法。

我希望能提供一些帮助。

参考：

Docs - getServerSideProps

Custom Webpack Config

Answer 2

如果您需要知道哪些功能绑定到客户端，哪些功能绑定到服务器，有一种简单的方法可以知道这一点→https://next-code-elimination.now.sh/

只需将文件的内容复制并粘贴到其中，您将看到哪些代码被捆绑到客户端，哪些代码被捆绑到服务器。如果您有导入文件，请确保将所有导入文件放在一个文件中，以便了解其工作原理。

经验法则是：

诸如getServerSideProps，getStaticProps和getStaticPaths之类的内容将从捆绑的代码中删除。如果您从使用服务器端代码（例如fs）的文件中导入任何内容，但未在上述3个函数中的任何一个中使用它，则该文件将不会被删除（请在“下一个代码消除工具”处检查）并且给你一个错误。

该工具就是答案。我将文件复制粘贴到其中，并立即找到答案。