How to reduce the number chunks using Vite? - vite

Question

Vite produces unreasonably small chunks (90% of all chunks are under 1KB with a few 300KB+).
Here is the full build log:
https://gist.github.com/gajus/0149233592085181331dde7076fc50b1
This is example website:
https://contra.com/p/gkOQlbLq-validating-postgre-sql-results-and-inferring-query-static-types
This is out Vite configuration:
import path from 'path';
import { default as react } from '#vitejs/plugin-react';
import { defineConfig } from 'vite';
import { default as ssr } from 'vite-plugin-ssr/plugin';
const { VITE_BASE_URL } = process.env;
export default defineConfig(({ ssrBuild }) => {
let build;
if (!ssrBuild) {
build = {
emptyOutDir: true,
manifest: true,
minify: true,
polyfillModulePreload: false,
rollupOptions: {
output: {
chunkFileNames: 'chunk-[name].[hash].js',
entryFileNames: 'entry-[name].[hash].js',
inlineDynamicImports: false,
sourcemap: true,
},
},
sourcemap: true,
};
}
return {
base: VITE_BASE_URL ?? '/static/',
build,
plugins: [
react({
babel: {
plugins: [
'babel-plugin-relay',
[
'babel-plugin-styled-components',
{
displayName: true,
fileName: false,
pure: true,
ssr: true,
},
],
],
},
}),
ssr(),
],
resolve: {
alias: {
'#': path.resolve(__dirname, './src/'),
},
},
};
});
If you try to inspect this page using Google tools, it doesn't even load – presumably because of 200 JavaScript chunks that that page needs to load.
https://search.google.com/test/mobile-friendly/result?id=ULZhtOfQfp1Gxj2wYhyCUw
How to reduce the number of chunks?