When I run vite preview I get the bundle size of 300KB and when I run vite build it creates a bundle with 900KB

I am using Vite in a react project.

Versions -

"react": "^18.2.0",
"react-dom": "^18.2.0",
"vite": "^3.0.0",
"@vitejs/plugin-react": "^2.0.0",

Here is my vite.config.js

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'build',
  },
});

Here is my package.json scripts -

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "prettier": "prettier src -check",
    "prepare": "husky install"
  },

When I do npm run preview and open a site in the browser I get bundle of size 301KB. But when I do npm run build it gives me bundle size of 986KB! If vite preview is intended to preview the site as in production why vite build is not giving me the bundle with the same size when I build?

When I build it shows following messages -

Also, What is the meaning of 986.76 KiB / gzip: 292.94 KiB?