Replace util with something smaller

[steida]

Fauna DB driver uses require('util') for very-old-way inheritance. It was poly-filled with Webpack 4 and it's not with Webpack 5. The recommended fix from Webpack 5 adds 7kb gzipped.
JFYI, this is my next.config.js for Webpack 5.
Note // fix faunadb.

webpack: (config, { defaultLoaders }) => {
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      // Transform all direct `react-native` imports to `react-native-web`
      'react-native$': 'react-native-web',
      // /~https://github.com/GoogleChromeLabs/native-url#usage-with-webpack
      url: 'native-url',
      // fix faunadb
      https: false,
      http: false,
    };
    config.resolve.extensions.push('.web.js', '.web.ts', '.web.tsx');
    // fix faunadb
    config.resolve.fallback = {
      ...config.resolve.fallback,
      util: require.resolve('util/'),
    };
    return config;
  },

Fauna lib should provide browser and node versions so the users should not be forced to manually fix it.
Fauna lib should also be written in TypeScript and all queries should be tree-shakeable, but you probably are well aware of that.

[PierBover]

It's weird that there's no mention of this in the documentation.

This is going to be a serious issue going forward for people using Fauna on the front end. Most popular toolchains/scaffolding CLIs (eg: Create React App) are still using Webpack 4, but this is going to change in the coming months.

It's also broken when using Rollup which is the default bundler when using Svelte. The solution for Rollup is using the rollup-plugin-node-polyfills plugin. To make it work be sure that it's configured after the commonjs plugin and that these are your first Rollup plugins in use:

	plugins: [
		commonjs(),
		nodePolyfills(),
		// etc

Also, all the polyfills needed to make the driver work on the browser are adding substantial weight. My current front end app with nothing but the Fauna driver and the polyfills is already weighting 131kB minified which is unacceptable.

[n400]

Apologies for the delay in responding to this. Someone will take a look and respond soon.

[PierBover]

I've tried importing using a script tag to see if it made any difference.

When using:

<script src="https://cdn.jsdelivr.net/npm/faunadb@4.0.0/dist/faunadb-min.js"></script>

The driver weights 178kB mininified and 48kB gzip which is quite heavy.

Using a script tag certainly makes things easier for beginners but it is completely out of place in modern front end development.

[geirmarius]

Apologies for the delay in responding to this. Someone will take a look and respond soon.

Any updates on this? 😁

[n400]

We have more developers starting soon—specifically to help out with the drivers. This is at the top of the list.

[geirmarius]

That's good to hear. Thank you!

[parkhomenko]

@steida @geirmarius Release 4.0.2 adds a module you asked
Feel free to reply if it works for you?

[PierBover]

@parkhomenko is there any effort going on to reduce the driver for the browser?

The latest version has actually increased in size and now weights 185kB minified.

[geirmarius]

@steida @geirmarius Release 4.0.2 adds a module you asked
Feel free to reply if it works for you?

faunadb still depends on util with the newest version, so vite refuses to compile it (I'm not using webpack). I'm assuming the only solution is to replace and remove util entirely with something else. Since faunadb is made for the browser it shouldn't depend on util in the first place though, so imo that should be resolved either way.

I also fully agree with @PierBover and I would never ship fauandb in production with the current bundle size. It's way too big.

Edit: Very thankful for the issue being worked on tho 😄🎉

[parkhomenko]

Thank you for your answers, guys 😎 I'll discuss that with my team

[fireridlle]

Here is PR #395 that reduce bundle size to about 70kb in the minified version

[geirmarius]

Just tried it now. This is a massive improvement! 🎉 Seems to work without any hiccups in my projects 😄

If I may ask, what prevents the driver from being even 10x smaller than this again (7kb)? Seemingly the driver takes FQL and translates it into JSON, and surely that alone doesn't take 70kb of minified code?

[steida]

@geirmarius It could be even smaller with this proposal #270

[PierBover]

Thanks @fireridlle this is awesome!

Hopefully it will decrease even more though.

Is polyfilling Node modules still necessary for the client?

[fireridlle]

Is polyfilling Node modules still necessary for the client?

Unfortunately yes. For example, some browsers don't support fetch https://caniuse.com/?search=fetch. As we don't know at which browser/environment faunadb-js would run, we try to support as much as possible.

We have more ideas on how to reduce bundle size, going to prioritize it soon

[steida]

@fireridlle For IE11 you can use /~https://github.com/developit/unfetch, it's super small, but I don't think IE11 should be supported.

[parkhomenko]

Just a small note, the version with a decreased bundle size is released now, the version is 4.0.3

[geirmarius]

It's good practice to not include any polyfills either way. You'll end up with several libraries polyfilling the same things and a bunch of unused code shipped to the client. Let the users add the polyfills. On top of that, if you don't even need polyfills to begin with because you target only newer browsers, that would make it even lighter. 😄

[PierBover]

I agree with @steida and @geirmarius. The driver should not include a fetch polyfill. It should be up to the developers to include one if they need to support for old browsers. In 2021 it's really unnecessary. IE11 is 8 years old at this point, and there are barely any users left using Edge 12-13.

In any case, @fireridlle you should at least include a note in the docs of the driver mentioning this. As I wrote before, Webpack 5 and Rollup do not include NodeJS polyfills by default like Webpack 4 does. When create-react-app and other tools switch to Webpack 5 in the coming months users will freak out.