Test the bundle size using esbuild instead of webpack.

Author: jaydenseric

changelog.md

@@ -14,6 +14,8 @@
 - Updated GitHub Actions CI config to run tests with Node.js v12, v14, v16.
 - Simplified JSDoc related package scripts now that [`jsdoc-md`](https://npm.im/jsdoc-md) v10+ automatically generates a Prettier formatted readme.
 - Added a package `test:jsdoc` script that checks the readme API docs are up to date with the source JSDoc.
+- Test the bundle size using [`esbuild`](https://npm.im/esbuild) instead of [`webpack`](https://npm.im/webpack) and [`disposable-directory`](https://npm.im/disposable-directory).
+- Increased the documented bundle size to “< 4 kB” to match that of [`esbuild`](https://npm.im/esbuild) instead of [`webpack`](https://npm.im/webpack).
 - Use the correct `kB` symbol instead of `KB` wherever bundle size is mentioned in the package description and readme.
 - Updated the [example Next.js app](https://graphql-react.vercel.app) URL in the readme.
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "graphql-react",
   "version": "13.0.0",
-  "description": "A GraphQL client for React using modern context and hooks APIs that’s lightweight (< 3.5 kB) but powerful; the first Relay and Apollo alternative with server side rendering.",
+  "description": "A GraphQL client for React using modern context and hooks APIs that’s lightweight (< 4 kB) but powerful; the first Relay and Apollo alternative with server side rendering.",
   "license": "MIT",
   "author": {
     "name": "Jayden Seric",
@@ -58,7 +58,7 @@
     "@testing-library/react-hooks": "^6.0.0",
     "abort-controller": "^3.0.0",
     "coverage-node": "^5.0.1",
-    "disposable-directory": "^4.0.0",
+    "esbuild": "^0.12.0",
     "eslint": "^7.26.0",
     "eslint-config-env": "^20.0.0",
     "eslint-config-prettier": "^8.3.0",
@@ -80,8 +80,7 @@
     "react-dom": "^17.0.2",
     "react-test-renderer": "^17.0.2",
     "revertable-globals": "^2.0.0",
-    "test-director": "^6.0.0",
-    "webpack": "^5.37.0"
+    "test-director": "^6.0.0"
   },
   "scripts": {
     "jsdoc": "jsdoc-md",

readme.md

@@ -4,7 +4,7 @@
 
 [![npm version](https://badgen.net/npm/v/graphql-react)](https://npm.im/graphql-react) [![CI status](https://github.com/jaydenseric/graphql-react/workflows/CI/badge.svg)](https://github.com/jaydenseric/graphql-react/actions)
 
-A [GraphQL](https://graphql.org) client for [React](https://reactjs.org) using modern [context](https://reactjs.org/docs/context) and [hooks](https://reactjs.org/docs/hooks-intro) APIs that’s lightweight (< 3.5 kB) but powerful; the first [Relay](https://relay.dev) and [Apollo](https://apollographql.com/apollo-client) alternative with server side rendering.
+A [GraphQL](https://graphql.org) client for [React](https://reactjs.org) using modern [context](https://reactjs.org/docs/context) and [hooks](https://reactjs.org/docs/hooks-intro) APIs that’s lightweight (< 4 kB) but powerful; the first [Relay](https://relay.dev) and [Apollo](https://apollographql.com/apollo-client) alternative with server side rendering.
 
 The [API](#api) can also be used to custom load, cache and server side render any data, even from non GraphQL sources.
 

test/bundle.test.mjs

@@ -1,43 +1,27 @@
 import { strictEqual } from 'assert';
-import fs from 'fs';
-import { join } from 'path';
 import { fileURLToPath } from 'url';
-import { promisify } from 'util';
-import disposableDirectory from 'disposable-directory';
+import esbuild from 'esbuild';
 import gzipSize from 'gzip-size';
-import webpack from 'webpack';
 
 export default (tests) => {
   tests.add('Bundle.', async () => {
-    await disposableDirectory(async (tempDirPath) => {
-      const filename = 'bundle.cjs';
-      const compiler = webpack({
-        context: fileURLToPath(new URL('./', import.meta.url)),
-        entry: '../public/index.js',
-        output: {
-          path: tempDirPath,
-          filename,
-          libraryTarget: 'commonjs2',
-        },
-        target: 'node',
-        mode: 'production',
-        externals: /^(?:object-assign|react|react-dom)(?:\/|\\|$)/u,
-      });
-      const compile = promisify(compiler.run).bind(compiler);
-      const stats = await compile();
-
-      if (stats.hasWarnings() || stats.hasErrors())
-        throw new Error(stats.toString('errors-warnings'));
+    const {
+      outputFiles: [bundle],
+    } = await esbuild.build({
+      entryPoints: [
+        fileURLToPath(new URL('../public/index.js', import.meta.url)),
+      ],
+      external: ['react'],
+      write: false,
+      bundle: true,
+      minify: true,
+      legalComments: 'none',
+    });
 
-      const bundleCode = await fs.promises.readFile(
-        join(tempDirPath, filename),
-        'utf8'
-      );
-      const kB = (await gzipSize(bundleCode)) / 1000;
+    const kB = (await gzipSize(bundle.contents)) / 1000;
 
-      console.info(`${kB} kB minified and gzipped bundle.`);
+    console.info(`${kB} kB minified and gzipped bundle.`);
 
-      strictEqual(kB < 3.5, true);
-    });
+    strictEqual(kB < 4, true);
   });
 };