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

[raskyer]

What version of Remix are you using?

1.17.0

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

• [X] 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]

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]

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]

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]

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]

I ran into similar issue. https://github.com/remix-run/remix/discussions/6539

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

[pcattori]

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

[samadadi]

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]

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]

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]

@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]

@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]

@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]

@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]

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

[raskyer]

@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]

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]

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

[juniorforlife]

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]

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]

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

[markdalgleish]

@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]

@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]

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]

@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]

@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]

@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]

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]

@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