Optimizing Performance with TanStack Config

Illustrate how to use TanStack Config to optimize the performance of a JavaScript application, including strategies for bundle size reduction.

import { defineConfig } from 'tanstack-config';

export default defineConfig({
  build: {
    minify: true, // Enable minification for smaller bundle sizes
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            // Split vendor modules into separate chunks
            return 'vendor';
          }
        }
      }
    }
  }
});

This code snippet demonstrates configuring TanStack Config for a JavaScript project to minimize bundle sizes. It enables minification and uses Rollup's manualChunks function to separate vendor modules into their own chunks, reducing the initial load time.

import { defineConfig } from 'tanstack-config';

export default defineConfig({
  esbuild: {
    treeShaking: true, // Enable tree-shaking to remove unused code
  }
});

This configuration enables tree-shaking with esbuild through TanStack Config. Tree-shaking eliminates dead code from the final bundle, further optimizing performance by ensuring that only the code actually used is included in the build.