Optimize your Bundle Size with SWC and GraphQL Codegen

1

Vite

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' } ] ] }) ] }).

#Software Development #Web Frameworks #Developer Tools 378 social mentions

2

Next.js

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.

#Developer Tools #Web Frameworks #JavaScript Framework 923 social mentions

3

Babel

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.

#Development Tools #Javascript UI Libraries #JavaScript Framework 134 social mentions