Learn to Adjust Chunk Size Limit in React Warming

Learn how to adjust the chunk size limit in React to optimize your app's performance. This guide covers configuring Webpack for efficient code splitting, managing module sizes, and improving loading times.

Do you use a React template from Telerik or not?

This message will appear when you run the build.

Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

To fix it, adjust the limit of chunkSizeWarningLimit on the vite.config.ts file:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { fileURLToPath, URL } from 'url';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    chunkSizeWarningLimit: 1000, // Adjust the limit as needed
  },
  resolve: {
    alias: [
      {
        find: '@assets/templates/fashion-catalog',
        replacement: fileURLToPath(new URL('./src/assets', import.meta.url)),
      },
    ],
  },
});

In the code, I set it to 1000.

I hope this tip helps you or my future self fix it quickly.