dev_v2 performance variability

[matt-erhart]

What version of Remix are you using?

1.19

Are all your remix dependencies & dev-dependencies using the same version?

• [X] Yes

Steps to Reproduce

imports:

import React from "react";
import { Navbar, Typography } from "@material-tailwind/react";
import { NavLink } from "@remix-run/react";
import { clsx as cx } from "clsx"; 

I'm just making a basic navbar with the above deps ^, then I save a few times (with out making any edits) and get

 info  rebuilding... (~ app\components\TopNav.tsx)
 info  rebuilt (2.2s)
 info  app server ready (187ms)
 info  hmr

 info  rebuilding... (~ app\components\TopNav.tsx)
 info  rebuilt (1s)
 info  app server ready (159ms)
 info  hmr

 info  rebuilding... (~ app\components\TopNav.tsx)
 info  rebuilt (2.1s)
 info  app server ready (161ms)
 info  hmr

This is using the express cjs with ts template with dev_v2. In v1 rebuild was fast, but app server restart took a few seconds, now I'm seeing it flipped in dev_v2. I'd rather be seeing 500ms edit updates, but the variability is also surprising.

Expected Behavior

500ish ms updates

Actual Behavior

2-3 seconds (on a small project).

It's honestly tolerable except when I'm doing a ton of small css changes in a row, and I've worked on slower code bases, but I thought you might like the feedback.

[matt-erhart]

After removing material tailwind

 info  rebuilding... (~ app\components\TopNav.tsx)
 info  rebuilt (473ms)
 info  app server ready (158ms)
 info  hmr

 info  rebuilding... (~ app\components\TopNav.tsx)
 info  rebuilt (556ms)
 info  app server ready (151ms)
 info  hmr

 info  rebuilding... (~ app\components\TopNav.tsx)
 info  rebuilt (811ms)
 info  app server ready (155ms)
 info  hmr

[xHomu]

This is largely a problem of poor treeshaking from large dependencies. MUI recommends using path exports, is that an option with @material-tailwind?

https://mui.com/material-ui/guides/minimizing-bundle-size/#option-one-use-path-imports

[matt-erhart]

I ditched material-tailwind which saved a second or so and added a few other packages, and I'm back up to about the 3-4 second mark with v2. Will keep an eye out for those kinds of optimizations.

[pcattori]

Build and rebuild variability depends on the types of changes made and is ultimately a property of esbuild. Plus build times are heavily dependent on your hardware. We've got plans to further optimize rebuilds in the future, but for now we're seeing subsecond rebuilds for small apps on most machines and low second builds for slower machines.

[istarkov]

Please reopen, here at https://github.com/webstudio-is/webstudio-builder/tree/main/apps/builder We have remix dev time to start 2-3s on macbook air m1 Adding console.log here https://github.com/webstudio-is/webstudio-builder/blob/dafa7e8b35527bb5335feb2da6dcb1e54cf65f1d/apps/builder/app/routes/builder.$projectId.tsx#L26-L29 causes 42s rebuild.

IMO definitely something is wrong with build times.

[pcattori]

@istarkov can you open a separate issue with your specific use-case / reproduction? happy to take a look at that