Watch files change very slowly

wilmerxu commented 2 years ago

Describe the bug

Watch files change very slowly, which takes about 10 seconds. The first time was very fast, and the later was very slow. The project code is about 10000 files.

Reproduction

src/node/server/index.ts

watcher.on('change', async (file) => {
  console.log(new Date(), 'watcher on file change:', file) // It's very slow here. The log is printed after a delay of about 10 seconds
  file = normalizePath(file)
  // invalidate module graph cache on file change
  moduleGraph.onFileChange(file)
  if (serverConfig.hmr !== false) {
    try {
      await handleHMRUpdate(file, server)
    } catch (err) {
      ws.send({
        type: 'error',
        err: prepareError(err)
      })
    }
  }
})

System Info

System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
    Memory: 12.58 GB / 31.76 GB
  Binaries:
    Node: 14.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (95.0.1020.40)
    Internet Explorer: 11.0.19041.1202

Used Package Manager

npm

Logs

vite v2.6.13 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 2179ms.

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

wilmerxu commented 2 years ago

The project uses umi and plugin: https://github.com/ltaoo/umi-preset-vite

Plugin demo: https://github.com/ltaoo/umi-preset-vite-example

jboler commented 2 years ago

I'm seeing this same issue on vite 2.6.14, 2.7.13 & v2.8.0-beta.3

yarn dev starts up the vite server in 500ms.
Loading the code in Chrome the first time loads ~1400 .ts(x) files in ~10 seconds. I can see the requests in the Network panel.
Refreshing the page reloads all ~1400 JS files almost instantly
If I make a small change to 1 of the React components, Chrome reloads ~500 .ts(x) files which takes ~7 seconds every time.

Here's my main.jsx that is loaded into index.html:

import { Buffer } from 'buffer';
import ReactDOM from 'react-dom';
import './index.css';
import { App } from './app';
import { initTranslations } from './lib/i18n';

window.Buffer = Buffer;
initTranslations();
ReactDOM.render(<App />, document.getElementById('root'));

If I change index.css the vite only hot reloads index.css
If I change /lib/i18n then vite hot reloads all ~1400 .ts(x) files but it's almost instant
If I change anything in ./app or it's sub-imports then vite hot reloads ~500 .ts(x) files in ~7 seconds. In this case every .ts(x) file requested has a new ?t=29429494 query param. eg. http://localhost:3001/src/components/metrics-panel/container.tsx?t=1643139904608 which invalidates the cache.

I'm wondering why 500 .ts(x) files are reloaded when only 1 of them has changed? I am changing a react component file that only exports a react component e.g.

import { Select } from '@material-ui/core';
import classNames from 'classnames';
import { Icon } from '@/components/icon';
import { useTranslation } from '@/lib/custom-hooks';
import { VisualizationSelectProps, VisualizationType, useStyles } from '.';

export function SelectVisualization({
  mode,
  visualizationType,
  onChangeContentType,
  className,
  hasPrivilege,
  ...props
}: VisualizationSelectProps) {
  const classes = useStyles();
  const [t] = useTranslation();

  return (
    <Select>
    ...
    </Select>
  );
}

Here's my vite.config.ts:

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      'react-infinite-scroller': 'react-infinite-scroller/index.js',
      '@material-ui/pickers': path.resolve(
        __dirname,
        './node_modules/@material-ui/pickers/esm'
      ),
    },
  },
});

I also tried enabling https and installed a valid certificate to see if the h2 protocol would improve things but it didn't.

I'm using:

Vite 2.7.13
Node 16
Yarn 1.22.17
React 17
Typescript 4.2
MacOS 11.6
Macbook Pro 16" 5Ghz Core i9 + 64GB

It's a basic but large, React app using react-router, redux, d3, material-ui, formik. I'm migrating from CRA v4. Unfortunately it's a private project and I can't share the code.

jboler commented 2 years ago

If I set server.hmr: false in vite config then editing a file and refreshing the browser manually actually reloads the changes faster than HMR. Very strange.

bluwy commented 2 years ago

I'm not sure what's the action item here. It's slow because there is a lot of files to watch, perhaps Vite is watching more files than needed? There isn't an example to verify that.

Regarding HMR changing tons of file, that's because if there are many files depending on the file you're editing, those files will be invalidated to acquire the new edit file module. The process will go on repeatedly based on the module graph, so IMO it's working as expected.

github-actions[bot] commented 2 years ago

Hello @wilmerxu. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.

bluwy commented 2 years ago

Please provide a repro so we can identify what is clogging up the watcher. It's not easy to tell what the issue is from the description alone.

vitejs / vite