From 10346d338fa8b1f9b7d8f0ccefe246ac0faa0696 Mon Sep 17 00:00:00 2001 From: Shane Myrick Date: Thu, 18 Apr 2024 15:01:37 -0700 Subject: [PATCH 1/4] [docs] Update explainer around reducing-bundle-size --- .../development-testing/reducing-bundle-size.mdx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/docs/source/development-testing/reducing-bundle-size.mdx b/docs/source/development-testing/reducing-bundle-size.mdx index 46e8c8f3e0c..fe20f1f7261 100644 --- a/docs/source/development-testing/reducing-bundle-size.mdx +++ b/docs/source/development-testing/reducing-bundle-size.mdx @@ -3,7 +3,7 @@ title: Reducing bundle size description: Squeeze those last few bytes out of your production build --- -Two quick configuration changes can help you reduce your bundle size: turning off Apollo Client's development mode and picking a consistent style for your imports. +Some quick configuration changes can help you reduce your bundle size: turning off Apollo Client's development mode and picking a consistent style for your imports. Every byte counts in optimizing your app's performance. ## Turning off development mode @@ -184,3 +184,11 @@ It is important to keep in mind though that bundlers are complex and it might ma Every bundling setup is different and we cannot guarantee which style results in the smallest bundle size. We recommend trying out these styles in a small setup to determine which results in the best outcome in your environment. **Note:** some entry points are not part of the "main" entrypoint `'@apollo/client'` and can only be imported directly (e.g. from `'@apollo/client/link/batch'`). It's perfectly fine to use these, even when using the "main" entrypoint. + +## Why havev a larger library in the first place? + +### What you get +Apollo Client is more than just a simple data fetcher: it is a request/response cache, state manager, and React component integration. Attempting to build a comparable experience to Apollo Client with other libraries would require you to write custom logic, libraries, and components wrappers. Scaling that out to all the components in your application would easily lead to a larger bundle and doing so with a custom and difficult to understand implementation that needs to be maintain by your team. By choosing Apollo Client, you hand off that ownership to a trusted team building Open Source Software since 2016. + +### Next major version +Apollo Client v3 supports a large range of browser compatiblity, back to IE11. In our next major version we plan to raise those targets which will allow us to remove included polyfills and as well as clean up deprecrated features. From dac49c6d603cb20247e8dd99235915de68053840 Mon Sep 17 00:00:00 2001 From: Shane Myrick Date: Thu, 18 Apr 2024 15:33:27 -0700 Subject: [PATCH 2/4] Update docs/source/development-testing/reducing-bundle-size.mdx Co-authored-by: Jerel Miller --- docs/source/development-testing/reducing-bundle-size.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/source/development-testing/reducing-bundle-size.mdx b/docs/source/development-testing/reducing-bundle-size.mdx index fe20f1f7261..902d9464b25 100644 --- a/docs/source/development-testing/reducing-bundle-size.mdx +++ b/docs/source/development-testing/reducing-bundle-size.mdx @@ -185,10 +185,10 @@ Every bundling setup is different and we cannot guarantee which style results in **Note:** some entry points are not part of the "main" entrypoint `'@apollo/client'` and can only be imported directly (e.g. from `'@apollo/client/link/batch'`). It's perfectly fine to use these, even when using the "main" entrypoint. -## Why havev a larger library in the first place? +## Why have a larger library in the first place? ### What you get Apollo Client is more than just a simple data fetcher: it is a request/response cache, state manager, and React component integration. Attempting to build a comparable experience to Apollo Client with other libraries would require you to write custom logic, libraries, and components wrappers. Scaling that out to all the components in your application would easily lead to a larger bundle and doing so with a custom and difficult to understand implementation that needs to be maintain by your team. By choosing Apollo Client, you hand off that ownership to a trusted team building Open Source Software since 2016. ### Next major version -Apollo Client v3 supports a large range of browser compatiblity, back to IE11. In our next major version we plan to raise those targets which will allow us to remove included polyfills and as well as clean up deprecrated features. +Apollo Client v3 supports a large range of browser compatibility, back to IE11. In our next major version we plan to raise those targets which will allow us to remove included polyfills and as well as clean up deprecated features. From a99eed15116a345f713be96746e8b30a9bae09f7 Mon Sep 17 00:00:00 2001 From: Lenz Weber-Tronic Date: Mon, 22 Apr 2024 16:53:19 +0200 Subject: [PATCH 3/4] Apply suggestions from code review Co-authored-by: Maria Elisabeth Schreiber --- .../reducing-bundle-size.mdx | 28 ++++++++++++++----- 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/docs/source/development-testing/reducing-bundle-size.mdx b/docs/source/development-testing/reducing-bundle-size.mdx index 902d9464b25..3ad44edee34 100644 --- a/docs/source/development-testing/reducing-bundle-size.mdx +++ b/docs/source/development-testing/reducing-bundle-size.mdx @@ -3,8 +3,11 @@ title: Reducing bundle size description: Squeeze those last few bytes out of your production build --- -Some quick configuration changes can help you reduce your bundle size: turning off Apollo Client's development mode and picking a consistent style for your imports. -Every byte counts in optimizing your app's performance. +Every byte counts in optimizing your app's performance. This page covers some configuration changes that can help reduce Apollo Client's bundle size: + +- Turn off Apollo Client's development mode +- Pick a consistent style for your imports + ## Turning off development mode @@ -183,12 +186,23 @@ With many modern bundlers, it should not matter which of these styles you choose It is important to keep in mind though that bundlers are complex and it might make a difference - especially when your bundler picks up the CommonJS artifacts instead of the ESM artifacts.
Every bundling setup is different and we cannot guarantee which style results in the smallest bundle size. We recommend trying out these styles in a small setup to determine which results in the best outcome in your environment. -**Note:** some entry points are not part of the "main" entrypoint `'@apollo/client'` and can only be imported directly (e.g. from `'@apollo/client/link/batch'`). It's perfectly fine to use these, even when using the "main" entrypoint. + + +Some entry points are not part of the "main" entry point `'@apollo/client'` and can only be imported directly, for example, from `'@apollo/client/link/batch'`. It's fine to use these, even when using the "main" entry point. + + ## Why have a larger library in the first place? -### What you get -Apollo Client is more than just a simple data fetcher: it is a request/response cache, state manager, and React component integration. Attempting to build a comparable experience to Apollo Client with other libraries would require you to write custom logic, libraries, and components wrappers. Scaling that out to all the components in your application would easily lead to a larger bundle and doing so with a custom and difficult to understand implementation that needs to be maintain by your team. By choosing Apollo Client, you hand off that ownership to a trusted team building Open Source Software since 2016. -### Next major version -Apollo Client v3 supports a large range of browser compatibility, back to IE11. In our next major version we plan to raise those targets which will allow us to remove included polyfills and as well as clean up deprecated features. +Apollo Client is more than a data fetcher. It's a normalized request and response cache, state manager, and React component integration, including React testing utilities. + +To build a similar experience with other libraries, you need to write custom logic, libraries, and component wrappers. Scaling this custom code to all your app components often creates a bundle larger than Apollo Client's. + +A custom implementation also means extra maintenance work for your team. By using Apollo Client, you hand off that ownership to a team specializing in GraphQL clients. + +### Legacy support + +Apollo Client v3 supports legacy JavaScript syntax. It also includes support for some now deprecated features. Similarly, v3 offers broad browser compatibility, extending back to IE11. + +The next major version will prioritize contemporary browser support. This transition will streamline the client by removing unnecessary polyfills and phasing out support for legacy syntax and features. Ultimately, these changes reduce bundle size but require a major version release. From 5da37c639efc1491306953ec60cf5ce678f3e608 Mon Sep 17 00:00:00 2001 From: Shane Myrick Date: Wed, 8 May 2024 13:42:21 -0700 Subject: [PATCH 4/4] Run format --- docs/source/development-testing/reducing-bundle-size.mdx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/docs/source/development-testing/reducing-bundle-size.mdx b/docs/source/development-testing/reducing-bundle-size.mdx index 3ad44edee34..11479d47ae8 100644 --- a/docs/source/development-testing/reducing-bundle-size.mdx +++ b/docs/source/development-testing/reducing-bundle-size.mdx @@ -8,7 +8,6 @@ Every byte counts in optimizing your app's performance. This page covers some co - Turn off Apollo Client's development mode - Pick a consistent style for your imports - ## Turning off development mode By default, Apollo Client is in "development mode". That means Apollo Client performs additional checks and the browser console displays warnings. @@ -194,10 +193,9 @@ Some entry points are not part of the "main" entry point `'@apollo/client'` and ## Why have a larger library in the first place? +Apollo Client is more than a data fetcher. It's a normalized request and response cache, state manager, and React component integration, including React testing utilities. -Apollo Client is more than a data fetcher. It's a normalized request and response cache, state manager, and React component integration, including React testing utilities. - -To build a similar experience with other libraries, you need to write custom logic, libraries, and component wrappers. Scaling this custom code to all your app components often creates a bundle larger than Apollo Client's. +To build a similar experience with other libraries, you need to write custom logic, libraries, and component wrappers. Scaling this custom code to all your app components often creates a bundle larger than Apollo Client's. A custom implementation also means extra maintenance work for your team. By using Apollo Client, you hand off that ownership to a team specializing in GraphQL clients.