Vite loads all files (ts, tsx) in network traffic

[YuesIt17]

I have a very basic Vite setup:

import {defineConfig, loadEnv} from 'vite';
import react from '@vitejs/plugin-react';
import viteTsconfigPaths from 'vite-tsconfig-paths';
import fs from 'fs';

export default defineConfig(({command, mode}) => {
  const isDev = command === 'serve';

  const config = {
    plugins: [react(), viteTsconfigPaths()],
    server: {
      https: true,
      port: 443,
      cors: false,
    },
    build: {
      rollupOptions: {
        external: ['jss-plugin-{}'],
        output: {
          manualChunks(id) {
            if (id.includes('node_modules')) {
              return id.toString().split('node_modules/')[1].split('/')[0].toString();
            }
          },
        },
      },
      outDir: 'build',
    },
  };

  if (isDev) {
    config.define = {global: {}};
  }
  return config;
});

But I'm seeing the local server loads all my ts, tsx files.
But this way works only for development.

Please, tell me, is there any workaround to this problem, i.e. load only minified code (chunks)?

There is the same question in https://stackoverflow.com/questions/75224291/vite-serves-up-jsx-files-in-network-traffic

[bluwy]

You're configuring the build which works on during build. In dev Vite serves files as-is (with transformations to JS), saw you see the individual requests. It's an intentional design of how Vite works.

If you want to pre-minify them, you need to run a separate build step and load them instead.

[bluwy]

You can also run vite preview together, but whenever you make a change, you might have to manually refresh the page.

[YuesIt17]

Yes, it works for me! 👍
I added to package.json "preview": "vite build --watch --mode preview & vite preview --mode preview",
But like you have said without hot reload (this problem is discussed in #5196)

[EyR1oN]

@bluwy yes, that works, but doing build is very expensive each time you changed anything... Is there any plugin to load only part of tsx or other files during development instead loading them all? Or anyhow make this load faster

[bluwy]

What do you mean by loading part of tsx files? vite dev should do that by default as it's lazy-loaded. https://github.com/antfu/vite-plugin-prebundle might help, but at that point it's not really an ideal DX that Vite guarantees.

[YuesIt17]

I have tried this library, it works, but looks like a sly hack🙂
I had added vite-plugin-prebundle to plugins and loading only a main tsx file./src/index.tsx

Or

But it's working without hot realod (hmr)

[YuesIt17]

And I also try use lazy imports (e.g. const MarkdownPreview = lazy(() => import('./MarkdownPreview.js'));).
This ensures that the files you use are loaded.