Help tracking down slow hot reload times

[mikeymop]

Hello,
I just introduced vite to our medium sized React project.
The project is build primarily using the material-ui components @mui/*@v5.1.1.

We are using pnpm and vite v2.9.9.
Generally our site in dev more reloads faster than you can switch to the web browser to see the changes. However on certain pages the hot reload can take 9-10 seconds.

I was reading through the thread for #6030 where resolve.preserveSymLinks is suggested. Reading through the documentation for this it seems this is very applicable to pnpm's module resolution which is primarily based on sym/hard links.

I tried adding this to my config in hopes it can speed up these specific pages that are slow. However when restarting the dev server with this option set to true the bundler failes to resolve any of my modules in node_modules.

An example of one of these errors are

 [ERROR] Could not resolve "@mui/base"

    node_modules/@mui/material/Select/SelectInput.js:12:58:
      12 │ import { unstable_composeClasses as composeClasses } from '@mui/base';
         ╵                                                           ~~~~~~~~~~~

  You can mark the path "@mui/base" as external to exclude it from the bundle, which will remove
  this error.

I tried adding:

  optimizeDeps: {
    exclude: ['@mui/core', '@mui/base', '@mui/utils']
  }

To my vite config, however for every dependency I add, the same error will pop up for another peer dependency until I add every dependency to exclude.
I think I am misunderstanding something in regards to preserveSymlinks.

Has anyone been able to work through the slow hmr reloads and get the fast reload times back on components that are slow?

[mikeymop]

Upon further investigation it looks like when I made a change on one of the pages it reloads ALL of the source files in my project even those unrelated to the change I made.

Are we required to lazy load every single component in our application? Currently we only lazy load the 'pages' that our router points to. The Pages contain the components we manage and generally just have a div in them for positioning the content.

Fresh runs take about 10min and hot reloads take around 3 min.

EDIT:

Using React dev tools and 'why did I rerender' I ultimately discovered that the way I was passing props down the tree was causing these long reloads.

I was following a pattern where each component sits in a directory next to an index.ts. In the index I was exporting the Component.

export {default as MyComponent} from './MyComponent';
...

Instead, I switched to making the Component the default export from the directory and stopped bundling them all in to index.ts.
This is because when I was using the index.ts I was taking the components default export and making it a named export. It is more difficult to tree-shake a named export so by making sure to use default exports as much as possible my hot reload times dropped significantly.

The last change I made was how I was calling apis in my components. I noticed that each hot-reload required another network call. By decoupling the api calls to a Provider component towards the top of my tree, I was able to achieve the very fast hot-reloads again.

graph TD
P[Page] --> p[State Provider]
p -->|Network Response| Component1
p -->|Network Response| Component2
p --> ComponentN

Loading

[damianon]

I'm currently trying to migrate a project from webpack to vite and have the exact same issue. Debug shows a lot of things being compiled needlessly and taking a ton of time. Initial time is 15 seconds and hot reload at least 5 seconds.

While that's not as much as yours, unfortunately due to the fact that there is nothing at all online on how to find the issue in these cases we will probably go with Parcel (as a colleague already has a working setup that loads in 3 seconds initial and 2 seconds hot reload).

[mikeymop]

Hello @damianon, in case you are still working on this, I edited my question with the solution that worked for me. I hope this helps!

[davestewart]

FWIW, there is some information in the Vite docs about this:

https://vitejs.dev/guide/performance#avoid-barrel-files