Build size and Lighthouse Score

[huseyindeniz]

Hi all,
Finally I couldn't resist anymore and migrated my CRA template to Vite.
It was easier than I expected.
But I'm a little bit confused about the build size and Lighthouse score of my template.
I was expecting significant improvement, coz on every Vite vs CRA post, It's said that Vite is much better in development speed but better in production as well.
Maybe I'm doing smt. wrong in Vite version.
React.Lazy might be the issue. Not sure.
And currently I don't see a significant performance difference in production.
Actually CRA has better Lighthouse score in production.

I'll add screenshots below and if anyone interested I'll share the repositories of both CRA and Vite version of the same template. Maybe someone can see if there is a wrong usage in Vite version.

PS: During the migration I didn't change React components. Both templates are almost identical.

CRA Build - Network on Chrome

Vite Build - Network on Chrome

CRA Build - Lighthouse Report

Vite Build - Lighthouse Report

CRA Build - Network on Firefox

Vite Build - Network on Firefox

[manyuemeiquqi]

CRA you means create react app? You actuall compare webpack wiith vite?.
Just view why vite, you know the difference the two tools
Why vite
Vite target is to improve the developer's Slow Server Start problem with using ES module above the
large project

As for you Lighthouse Score，webpack is goot at better backward compatibility. It's no surpise that webpack has slightely higher score.

[huseyindeniz]

Hi,

Thanks for the insights.

Yes, CRA is create-react-app, I forgot that in Vite, React is just another option like Vue.

Actually I checked that page you added and I also made a quick search on the internet, and production performance is mentioned in all of them. TBH, I don't get the "Slow Server Start" problem much. In big projects, starting the server is the least important topic to me. I just start my Storybook at the beginning of the day and work until it crashes. Or start the application and work until it crashes. Production performance is 10times important than dev env start speed. Anyway, I migrated it because nowadays all React younglings are enforcing either Vite or Nextjs.

I almost forgot, yesterday, I replicated one of my dApp with Vite version of my dapp template. It has multiple pages and is more complex than the template itself. Build size difference is almost 100kb, Vite version is 100kb smaller than CRA version. Not too much but not bad I think. Lighthouse score is much closer, almost same. And in CRA version, I can't use Typescript 5x, but it works in Vite version.

Thanks again.

[huseyindeniz]

update: after a long weekend, here is the Vite version of my dapp's Lighthouse Score.

PS: trick is configuring rollup in vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'build',
    sourcemap: false,
    modulePreload: {
      resolveDependencies: (url, deps, context) => {
        return [];
      },
    },
    rollupOptions: {
      output: {
        sourcemap: false,
        manualChunks: {
          ethers: ['ethers'],
          router: ['react-router-dom'],
          rtk: ['@reduxjs/toolkit'],
          redux: ['react-redux'],
          chakra: ['@chakra-ui/react'],
        },
      },
    },
  },
});

[jonathasborges1]

Please, Could you share your project link to GitHub?

[huseyindeniz]

The dapp I mentioned in my last comment is not public, but my "dapp template" repo is here: https://github.com/huseyindeniz/vite-react-dapp-template