Optimize your Bundle Size with SWC and GraphQL Codegen

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • graphql-typescript-integration

    For more information/ a history of this functionality, you can read more about it in this blog post from Laurin Quast about this new client-preset feature: Unleash the Power of Fragments with GraphQL Code Generator. It was based on the former gql-tag-operations-preset that is now replaced by the client-preset, which was originally explored by Maël Nison in this Github project.

  • vite

    Next generation frontend tooling. It's fast!

    or with Vite React, update your `vite.config.ts` to add the following: ```ts filename="vite.config.ts" import { defineConfig } from 'vite' import react from '@vitejs/plugin-react-swc' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ react({ plugins: [ [ '@graphql-codegen/client-preset-swc-plugin', { artifactDirectory: './src/gql', gqlTagName: 'graphql' } ] ] }) ] })

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  • Stack

    Tech Stack developed by The Guild (by the-guild-org)

    Then you're ready to go! The plugin will automatically optimize your generated code when SWC compiles your files. In conclusion, using the [`client-preset`](https://graphql-code-generator.com/plugins/presets/client-preset) for GraphQL Code Generator is a powerful way to improve the DX of your project. However, without proper optimization, the bundle size can quickly become bloated. By using the [@graphql-codegen/client-preset-swc-plugin](https://www.npmjs.com/package/@graphql-codegen/client-preset-swc-plugin), (or the [Babel plugin](https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#babel-plugin)) you can optimize the generated code and reduce the bundle size, and in the end improve the loading time of your application.

  • swc

    Rust-based platform for the Web

    There was already a Babel plugin for the client-preset for projects using Babel in the client-preset package. Now, as SWC itself, and Next.js is becoming more popular and uses SWC as its default compiler, there was a need for a SWC plugin as well. SWC is a fast and modern JavaScript/TypeScript compiler written in Rust, so the Babel plugin couldn't be used.

  • Next.js

    The React Framework

    However, this approach can come at a cost - the bundle size of your pages can increase significantly, especially as the number of queries and mutation grows. In this post, we will show you what the problem is and how to optimize your bundle size with the new @graphql-codegen/client-preset-swc-plugin plugin for your applications supported by the SWC compiler such as projects using Next.js or Vite.

  • babel-sublime

    Syntax definitions for ES6 JavaScript with React JSX extensions.

    There was already a Babel plugin for the client-preset for projects using Babel in the client-preset package. Now, as SWC itself, and Next.js is becoming more popular and uses SWC as its default compiler, there was a need for a SWC plugin as well. SWC is a fast and modern JavaScript/TypeScript compiler written in Rust, so the Babel plugin couldn't be used.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts