减小包大小

在优化应用程序性能时，每个字节都很重要。本页面介绍了一些配置更改，有助于减少Apollo 客户端's 压缩包大小：

• 关闭 Apollo 客户端的发展模式
• 选择一致的导入风格

关闭开发模式

默认情况下，Apollo 客户端处于“开发模式”。这意味着 Apollo 客户端执行额外的检查，浏览器控制台显示警告。您可以通过设置globalThis.__DEV__为false来禁用开发模式。这样做将关闭这些检查，但它们最终会包含在您的生产压缩包中——您必须告诉打包器在构建时删除这些检查！

您可以考虑删除这些检查将在生产压缩包中减少1-3 KB。

打包器特定配置

以下是一些与打包器相关的建议，用于配置打包器，以在构建时删除globalThis.__DEV__。

Vite

1
export default defineConfig({
2
  // ...
3
  define: {
4
    "globalThis.__DEV__": JSON.stringify(false),
5
  },
6
});

Next.js

1
// ...
2
/** @type {import('next').NextConfig} */
3
const nextConfig = {
4
  webpack(config, { webpack }) {
5
    config.plugins.push(
6
      new webpack.DefinePlugin({
7
        "globalThis.__DEV__": false,
8
      })
9
    );
10
    return config;
11
  },
12
};
13

14
module.exports = nextConfig;

create-react-app

使用create-react-app，您需要使用第三方包craco来修改打包器配置。

1
const webpack = require("webpack");
2
module.exports = {
3
  webpack: {
4
    plugins: [
5
      new webpack.DefinePlugin({
6
        "globalThis.__DEV__": false,
7
      }),
8
    ],
9
  },
10
};

esbuild

1
{
2
  "define": {
3
    "globalThis.__DEV__": "false"
4
  }
5
}

Webpack

1
config.plugins.push(
2
  new webpack.DefinePlugin({
3
    "globalThis.__DEV__": false,
4
  })
5
);

Rollup

1
export default [
2
  {
3
    // ... input, output, etc.
4
    plugins: [
5
      minify({
6
        mangle: {
7
          toplevel: true,
8
        },
9
        compress: {
10
          toplevel: true,
11
          global_defs: {
12
            "@globalThis.__DEV__": "false",
13
          },
14
        },
15
      }),
16
    ],
17
  },
18
];

SWC

1
{
2
  "jsc": {
3
    "transform": {
4
      "optimizer": {
5
        "globals": {
6
          "vars": {
7
            "globalThis.__DEV__": "false"
8
          }
9
        }
10
      }
11
    }
12
  }
13
}

为什么使用globalThis.__DEV__而不是process.env.NODE_ENV？

Apollo Client使用__DEV__变量而非process.env.NODE_ENV，因为后者的非Node.js环境中不可用。Apollo Client可以通过CDN使用ESM导入。在此场景下，在库中使用process变量会导致您的应用程序崩溃。

Apollo Client无法使用类似typeof process !== "undefined" && process.env.NODE_ENV !== 'production'的守卫语句，因为一些打包器，例如esbuild，无法在构建时替换像typeof process这样的语句。Apollo Client的开发者代码在构建后会保留，导致包大小无减少。

相反，检查globalThis.__DEV__不会使浏览器崩溃，并且可以被每个打包器消除。

导入Apollo Client

根据您的打包器的功能和设置，您可以使用多种从Apollo Client导入的方式。

选择导入风格

Apollo Client提供了两种导入风格：

1
// "main entrypoint import" style
2
import { ApolloClient, InMemoryCache, useQuery } from "@apollo/client";
3

4
// "deep entrypoint import" style
5
import { ApolloClient, InMemoryCache } from "@apollo/client/core";
6
import { useQuery } from "@apollo/client/react/hooks";

在使用许多现代打包器的情况下，您选择哪一种风格通常无关紧要。
但是，需要记住的是，打包器很复杂，它可能会产生影响——特别是当您的打包器拾取CommonJS工件而不是ESM工件时。
每个打包配置都是不同的，我们无法保证哪种风格会导致最小的包大小。我们建议在小型设置中尝试这些风格，以确定在您的环境中哪种效果最佳。

为什么要有一个较大的库？

Apollo Client不仅仅是数据获取器。它是一个规范请求和响应缓存、状态管理器和React组件集成器，包括React测试工具。

要使用其他库构建类似的经验，您需要编写自定义逻辑、库和组件包装器。将此自定义代码扩展到所有应用程序组件通常会创建比Apollo Client更大的包。

自定义实现还意味着您的团队需要额外的维护工作。通过使用Apollo Client，您将所有权转交给一个专门研究GraphQL客户端的团队。

遗留支持

Apollo Client v3支持遗留JavaScript语法，并包括对一些已弃用的功能的支持。类似地，v3提供了广泛的浏览器兼容性，回溯到IE11。

下一个主要版本将优先考虑现代浏览器的支持。这次过渡将通过删除不必要的polyfills和逐步淘汰遗留语法和功能的支持来简化客户端。这些更改最终会减小包大小，但需要发行一个主要版本的更新。