1.16.0 / 1.16.1 / 1.17.0 : Horrible reload experience with historic dev server #6560

raskyer · 2023-06-07T17:31:31Z

What version of Remix are you using?

1.17.0

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

Yes

Steps to Reproduce

Have a window
Install remix 1.16.0 / 1.16.1 or 1.17.0
Make some change, save, make some other change, save (without waiting the first rebuilt to stop)
Wait ...

Precision : Use the historic dev server and not the new one.

Expected Behavior

The dev server reloads correctly under a manageable and ok time

Actual Behavior

It reloads but sometimes get stucks, sometimes throws 10 errors in console (No routes matched location "/build/_shared/chunk-MVBW4HBB.js"), sometimes takes up to 10 seconds to fully reload, sometimes requires to restart completly the server because it fails in loop.

That's a terrible step backward compared to 1.15.0 and is unmanageable to work with in dev for real world project.

raskyer · 2023-06-07T17:48:05Z

It seems that unstable_dev is not better on load times (but since it's unstable, that's fine) :

For successive changes, new dev server is better (it canceled correctly the app and dev server without issue or multiple errors) but it's very long :

pcattori · 2023-06-07T18:27:58Z

Are you able to share your repo with us so we can diagnose?

If not, are you able to share your remix.config.js and your package.json scripts?

raskyer · 2023-06-07T21:11:56Z

To have an iso repo, it will be hard since it's for a client, but I can have the same result with a newly created repository with createRemix.

For my remix.config.js :

const { createRoutesFromFolders } = require('@remix-run/v1-route-convention');

/**
 * @type {import('@remix-run/dev').AppConfig}
 */
module.exports = {
  ignoredRouteFiles: ['**/.*'],
  serverDependenciesToBundle: ['marked', 'p-pipe'],
  future: {
    v2_meta: true,
    v2_errorBoundary: true,
    v2_normalizeFormMethod: true,
    v2_routeConvention: true,
    v2_headers: true,
  },
  routes(defineRoutes) {
    return createRoutesFromFolders(defineRoutes);
  },
};

package.json scripts :

"scripts": {
    "build": "remix build",
    "build:sourcemap": "remix build --sourcemap",
    "dev": "remix dev",
    "start": "remix-serve build"
  },

pcattori · 2023-06-08T12:44:48Z

Other users have had significant slowdowns due to slow CSS compilation.

#6535 may (partially or entirely) address this. You can try nightly release to see if it helps.

lili21 · 2023-06-09T05:39:15Z

I ran into similar issue. #6539

I upgrade from deferred to latest version, the (re)building time has increased about 4 times.

pcattori · 2023-06-15T18:27:46Z

v1.17.1 just released which includes a couple perf improvements for the CSS compilation

samadadi · 2023-06-15T19:51:51Z

I am using remix 1.17.1 with tailwind with 10 routes and almost 30 components and it takes 3 seconds just to update a single component. This is horrible. My laptop has 2.5GHz cpu with 4 core and 8G ram.

pcattori · 2023-06-15T20:00:26Z

I am using remix 1.17.1 with tailwind with 10 routes and almost 30 components and it takes 3 seconds just to update a single component. This is horrible. My laptop has 2.5GHz cpu with 4 core and 8G ram.

@samadadi can you provide a reproduction?

pcattori · 2023-06-15T20:04:23Z

To have an iso repo, it will be hard since it's for a client, but I can have the same result with a newly created repository with createRemix.

@raskyer can you specify how you created that newly created repo? Which template did you use?

raskyer · 2023-06-15T20:24:41Z

@pcattori I can't reproduce in new repo for : 1.17.1 which is good news.

But my project for my client is still unmanageable.

1.17.1 :

1.15.0 :

Not perfect but better.

Precision about the libraries used :

"dependencies": {
    "@amplitude/analytics-node": "^1.2.2",
    "@azure/communication-email": "^1.0.0",
    "@azure/storage-blob": "^12.14.0",
    "@emotion/react": "^11.11.1",
    "@emotion/server": "^11.11.0",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.11.16",
    "@mui/lab": "^5.0.0-alpha.134",
    "@mui/material": "^5.13.5",
    "@mui/x-data-grid": "^6.7.0",
    "@prisma/client": "^4.15.0",
    "@remix-run/node": "1.15.0",
    "@remix-run/react": "1.15.0",
    "@remix-run/serve": "1.15.0",
    "@remix-run/v1-route-convention": "^0.1.2",
    "@sentry/remix": "^7.55.2",
    "@tanstack/react-virtual": "3.0.0-beta.54",
    "@tiptap/extension-bold": "^2.0.3",
    "@tiptap/extension-code": "^2.0.3",
    "@tiptap/extension-document": "^2.0.3",
    "@tiptap/extension-history": "^2.0.3",
    "@tiptap/extension-italic": "^2.0.3",
    "@tiptap/extension-link": "^2.0.3",
    "@tiptap/extension-paragraph": "^2.0.3",
    "@tiptap/extension-strike": "^2.0.3",
    "@tiptap/extension-text": "^2.0.3",
    "@tiptap/extension-underline": "^2.0.3",
    "@tiptap/react": "^2.0.3",
    "@upstash/qstash": "^0.3.6",
    "algoliasearch": "^4.17.2",
    "bcrypt": "^5.1.0",
    "chart.js": "^3.9.1",
    "chroma-js": "^2.4.2",
    "color": "^4.2.3",
    "combine-promises": "^1.1.0",
    "cron-parser": "^4.8.1",
    "cronstrue": "^2.27.0",
    "date-fns": "^2.30.0",
    "date-fns-tz": "^2.0.0",
    "exceljs": "^4.3.0",
    "google-libphonenumber": "^3.2.32",
    "handlebars": "^4.7.7",
    "haversine": "^1.1.1",
    "ical-generator": "^5.0.0",
    "just-capitalize": "^3.2.0",
    "just-debounce": "^1.1.0",
    "just-extend": "^6.2.0",
    "just-filter-object": "^3.2.0",
    "just-group-by": "^2.2.0",
    "just-index": "^4.2.0",
    "just-map-values": "^3.2.0",
    "just-replace-all": "^2.2.0",
    "just-split": "^3.2.0",
    "leaflet": "^1.9.4",
    "lru-cache": "^9.1.2",
    "marked": "^5.1.0",
    "node-html-parser": "^6.1.5",
    "object-to-formdata": "^4.5.1",
    "openai": "^3.3.0",
    "otplib": "^12.0.1",
    "p-pipe": "^4.0.0",
    "pretty-cache-header": "^1.0.0",
    "qrcode": "^1.5.3",
    "qs": "^6.11.2",
    "randomcolor": "^0.6.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.44.3",
    "react-swipeable": "^7.0.1",
    "reflect-metadata": "^0.1.13",
    "remix-utils": "^6.4.1",
    "rxjs": "^7.8.1",
    "telegraf": "4.12.2",
    "tsyringe": "^4.7.0",
    "twitter-api-v2": "^1.15.0",
    "ua-parser-js": "^2.0.0-alpha.2",
    "use-long-press": "^3.1.5",
    "uuid": "^9.0.0",
    "yup": "^1.2.0",
    "yup-locales": "^1.2.12",
    "zustand": "^4.3.8"
  },

Material ui is used. Here is the root.tsx :

Here is entry.client.tsx :

And entry.server.tsx is the default one.
I can try to make a reproduction this weekend, but I suspect it's because of Mui (big css librairie).

On new project, rebuilt are done in 10ms.

samadadi · 2023-06-15T22:03:57Z

@pcattori Since actual project has more private code I can't publish it. But I cloned remix-tailwind example from remix repository and changed some settings and updated package.json file and added more than 10 routes that is similar to my actual project. But the result is almost the same even in this simple project. It almost took 2 seconds to rebuild a single route file.
Repository (remix: 1.17.1): https://github.com/samadadi/remix-tailwind-boilerplate

Screenshot from my actual project with exact configuration: (remix: 1.17.0)

Screenshot from my actual project with exact configuration: (remix: 1.17.1)

As you see it took more than 3 seconds just for a simple component. In fact it got worse.

Without tailwindcss (remix: 1.17.1):

pcattori · 2023-06-17T01:45:58Z

@samadadi Did some perf profiling on your repo (https://github.com/samadadi/remix-tailwind-boilerplate).

Looks like your app is bound by CSS compilation time. Running the tailwind CLI only takes ~100ms for me, but our tailwind: true processing is taking 500ms. So we are definitely doing more work than the tailwind CLI. Looking into this to see why that's the case.

I did notice that the browser JS compilation was also slow. I tracked it down to the polyfills we do for the browser. Removing them sped up the JS part of the compilation from ~450ms to ~30ms (15x faster). Definitely something we can look to optimize, though not sure how much low hanging fruit there will be there.

👆first run is normal, second run is with browser js polyfills disabled.

👆 Here's a run with CSS compilation disabled and browser js polyfills disabled. 6x faster than normal.

pcattori · 2023-06-17T03:03:25Z

@raskyer have you tried using path imports as described in MUI docs? You could verify if that has any effect on treeshaking my checking the contents of the chunks in public/build or just your build/index.js.

You could also try using esm as your server module format since CJS (I think) cannot be treeshaken.

👆this all assumes that the JS browser build is what is slowing you down. It could be that CSS compilation is also slow if it has to crawl your dependencies to find CSS to process. Or could be that both browser JS and CSS are factors and we need to speed both things up to get any perf improvements. Hard to tell without a repro.

samadadi · 2023-06-17T08:47:52Z

@pcattori How can i profile my remix app? I appreciate if you help or provide a tutorial link.

raskyer · 2023-06-17T16:34:58Z

@pcattori
https://github.com/raskyer/remix-issue

The issue comes from : @mui/icons-material without a doubt.
Mui itself do not really take so long but when icons are added ...

raskyer · 2023-06-17T16:36:01Z

I think my client project is worst since it has more routes, more styles, components, etc ... but this major time bump from just importing icons is probably one good step to fix

raskyer · 2023-06-17T16:37:33Z

Here is the same project without the single import of icons :

juniorforlife · 2023-06-18T14:43:03Z

I have the same issue with Tailwind. The app's CSS breaks a couple times a day for no reason while I'm making changes. I have to restart the server again. It happens on all browsers. Another issue is on Firefox, CSS doesn't get updated unless I specifically hit the reload button

pcattori · 2023-06-18T15:01:55Z

I have the same issue with Tailwind. The app's CSS breaks a couple times a day for no reason while I'm making changes. I have to restart the server again. It happens on all browsers. Another issue is on Firefox, CSS doesn't get updated unless I specifically hit the reload button

This discussion is about performance. Sounds like what you are experiencing is a different issue. If you are able to share a reproduction in a separate issue, I'd be happy to take a look.

juniorforlife · 2023-06-18T15:49:51Z

@pcattori sure. I'll create a repo with screen recording tomorrow

markdalgleish · 2023-06-19T21:56:55Z

@raskyer Other than icons, I was able to further improve rebuild speeds by rewriting the other MUI imports in root.tsx.

-import {
-  CssBaseline,
-  unstable_useEnhancedEffect as useEnhancedEffect,
-  type ThemeOptions,
-  createTheme,
-} from "@mui/material";
+import type { ThemeOptions } from "@mui/material";
+import createTheme from "@mui/material/styles/createTheme";
+import useEnhancedEffect from "@mui/material/utils/useEnhancedEffect";
+import CssBaseline from "@mui/material/CssBaseline";

raskyer · 2023-06-19T22:00:30Z

@markdalgleish Remix do not tree shake those ? It is surprising to see such a slowdown by importing the lib with ease (it's the prefered way to import things by Mui docs itself).

Or maybe Mui is misleading ? It will be a big refactoring to do in my client app to transform all those imports.

markdalgleish · 2023-06-19T22:04:48Z

They should get tree shaken but the bundler will still walk the source code, and in the case of a component library like MUI that's quite a lot.

pcattori · 2023-06-21T01:02:25Z

@samadadi some perf improvements just landed and your builds/rebuilds have gotten 4x faster for me

before (1.17.1)

👆 ~650ms build and ~400ms rebuilds

after (`dev` branch)

👆 ~180ms build and ~90ms rebuilds

TheRealFlyingCoder · 2023-06-21T03:58:03Z

@pcattori Do we have any ways of profiling / logging out detailed metrics for the build to locate problem packages / areas?

Switching over to the nightly build, i'm still working with a 21.8s build time 👀

EDIT: After building once, it only takes 10s the second time, if I run dev I get 3-4s rebuilds which is still quite slow

pcattori · 2023-06-21T04:12:01Z

@pcattori Do we have any ways of profiling / logging out detailed metrics for the build to locate problem packages / areas?

Switching over to the nightly build, i'm still working with a 21.8s build time 👀

EDIT: After building once, it only takes 10s the second time, if I run dev I get 3-4s rebuilds which is still quite slow

@TheRealFlyingCoder We just merged a bunch of performance improvements today that aren't yet in nightly. You can try again tomorrow to see if you got any perf improvements.

That said, I can write up my tips or make a video for how to profile the Remix compiler

pcattori · 2023-06-26T17:51:20Z

Closing this as 1.18.0 was released including performance fixes/improvements that target all of the reproductions in this issue. If you have poor perf in your app, please open a separate issue.

lili21 · 2023-07-04T04:17:48Z

@raskyer Other than icons, I was able to further improve rebuild speeds by rewriting the other MUI imports in root.tsx.

-import {
-  CssBaseline,
-  unstable_useEnhancedEffect as useEnhancedEffect,
-  type ThemeOptions,
-  createTheme,
-} from "@mui/material";
+import type { ThemeOptions } from "@mui/material";
+import createTheme from "@mui/material/styles/createTheme";
+import useEnhancedEffect from "@mui/material/utils/useEnhancedEffect";
+import CssBaseline from "@mui/material/CssBaseline";

can we provide a config to do this automatically? like modularizeImports

raskyer added the bug:unverified label Jun 7, 2023

MichaelDeBoey assigned pcattori Jun 7, 2023

brophdawg11 added the package:dev label Jun 8, 2023

jacob-ebey mentioned this issue Jun 16, 2023

cache getRouteModuleExports calls #6629

Merged

2 tasks

pcattori closed this as completed Jun 26, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

1.16.0 / 1.16.1 / 1.17.0 : Horrible reload experience with historic dev server #6560

1.16.0 / 1.16.1 / 1.17.0 : Horrible reload experience with historic dev server #6560

raskyer commented Jun 7, 2023

raskyer commented Jun 7, 2023

pcattori commented Jun 7, 2023

raskyer commented Jun 7, 2023

pcattori commented Jun 8, 2023 •

edited

Loading

lili21 commented Jun 9, 2023

pcattori commented Jun 15, 2023

samadadi commented Jun 15, 2023 •

edited

Loading

pcattori commented Jun 15, 2023

pcattori commented Jun 15, 2023

raskyer commented Jun 15, 2023

samadadi commented Jun 15, 2023 •

edited

Loading

pcattori commented Jun 17, 2023 •

edited

Loading

pcattori commented Jun 17, 2023 •

edited

Loading

samadadi commented Jun 17, 2023

raskyer commented Jun 17, 2023

raskyer commented Jun 17, 2023 •

edited

Loading

raskyer commented Jun 17, 2023

juniorforlife commented Jun 18, 2023 •

edited

Loading

pcattori commented Jun 18, 2023

juniorforlife commented Jun 18, 2023

markdalgleish commented Jun 19, 2023 •

edited

Loading

raskyer commented Jun 19, 2023

markdalgleish commented Jun 19, 2023

pcattori commented Jun 21, 2023 •

edited

Loading

TheRealFlyingCoder commented Jun 21, 2023 •

edited

Loading

pcattori commented Jun 21, 2023 •

edited

Loading

pcattori commented Jun 26, 2023

lili21 commented Jul 4, 2023

1.16.0 / 1.16.1 / 1.17.0 : Horrible reload experience with historic dev server #6560

1.16.0 / 1.16.1 / 1.17.0 : Horrible reload experience with historic dev server #6560

Comments

raskyer commented Jun 7, 2023

What version of Remix are you using?

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

Steps to Reproduce

Expected Behavior

Actual Behavior

raskyer commented Jun 7, 2023

pcattori commented Jun 7, 2023

raskyer commented Jun 7, 2023

pcattori commented Jun 8, 2023 • edited Loading

lili21 commented Jun 9, 2023

pcattori commented Jun 15, 2023

samadadi commented Jun 15, 2023 • edited Loading

pcattori commented Jun 15, 2023

pcattori commented Jun 15, 2023

raskyer commented Jun 15, 2023

samadadi commented Jun 15, 2023 • edited Loading

pcattori commented Jun 17, 2023 • edited Loading

pcattori commented Jun 17, 2023 • edited Loading

samadadi commented Jun 17, 2023

raskyer commented Jun 17, 2023

raskyer commented Jun 17, 2023 • edited Loading

raskyer commented Jun 17, 2023

juniorforlife commented Jun 18, 2023 • edited Loading

pcattori commented Jun 18, 2023

juniorforlife commented Jun 18, 2023

markdalgleish commented Jun 19, 2023 • edited Loading

raskyer commented Jun 19, 2023

markdalgleish commented Jun 19, 2023

pcattori commented Jun 21, 2023 • edited Loading

before (1.17.1)

after (dev branch)

TheRealFlyingCoder commented Jun 21, 2023 • edited Loading

pcattori commented Jun 21, 2023 • edited Loading

pcattori commented Jun 26, 2023

lili21 commented Jul 4, 2023

pcattori commented Jun 8, 2023 •

edited

Loading

samadadi commented Jun 15, 2023 •

edited

Loading

samadadi commented Jun 15, 2023 •

edited

Loading

pcattori commented Jun 17, 2023 •

edited

Loading

pcattori commented Jun 17, 2023 •

edited

Loading

raskyer commented Jun 17, 2023 •

edited

Loading

juniorforlife commented Jun 18, 2023 •

edited

Loading

markdalgleish commented Jun 19, 2023 •

edited

Loading

pcattori commented Jun 21, 2023 •

edited

Loading

after (`dev` branch)

TheRealFlyingCoder commented Jun 21, 2023 •

edited

Loading

pcattori commented Jun 21, 2023 •

edited

Loading