🐛 BUG: Using chakra causes `snowpack dev` to take 42 seconds

[michal-ciechan]

Quick checklist

• [X] I am using the latest version of Snowpack and all plugins.

What package manager are you using?

npm

What operating system are you using?

Windows

Describe the bug

snowpack dev takes 90 seconds when warmed up. (42 in the below demo app).

This is reproducible on 2 separate people and machines.

Guessing this is more of the way Chakra is organised, but would consider this a bug considering it takes so long, and the output says server started in 38ms. Feel like I've been lied to!

Steps to reproduce

1. npx create-snowpack-app using template @snowpack/app-template-react-typescript
2. Install chakra: npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
3. Change App.tsx to use chakra:

import React from 'react';
import {
  Center,
  ChakraProvider,
  CSSReset,
  extendTheme,
} from '@chakra-ui/react';

interface AppProps {}

const theme = extendTheme({
  components: {
    Button: {
      baseStyle: {
        _focus: {
          boxShadow: 'none',
        },
      },
    },
  },
});

function App({}: AppProps) {
  return (
    <ChakraProvider theme={theme}>
      <CSSReset />
      <Center height="100vh"></Center>
    </ChakraProvider>
  );
}

export default App;

4. Run npm start takes 73s to run cold:

PS C:\src\snowpack-chakra-slow-test> get-date; npm start

03 July 2021 23:06:26

> start
> snowpack dev

[24:07:28] [snowpack] + @chakra-ui/react@1.6.4
[24:07:28] [snowpack] └── @chakra-ui/css-reset@1.0.0
[24:07:28] [snowpack]   └── @emotion/react@11.4.0
[24:07:29] [snowpack]     └── react@17.0.2 (dedupe)
 -- 7000 similar lines like previous 3, going through dep tree
[24:08:39] [snowpack] Ready!
[24:08:39] [snowpack] Server started in 50ms.
[24:08:39] [snowpack] Local: http://localhost:8080
[24:08:39] [snowpack] Network: http://172.17.48.1:8080
[24:08:39] [@snowpack/plugin-typescript] 23:07:39 - Starting compilation in watch mode...
[24:08:44] [@snowpack/plugin-typescript] 23:07:44 - Found 0 errors. Watching for file changes.

Not sure why Snowpack increments hour and minute by 1 😂 🤷‍♂️

5. run npm start again (warm) takes 42 seconds. In our actual project takes about 90 seconds, as we have a plethora of other packages installed)

PS C:\src\snowpack-chakra-slow-test> get-date;npm start

03 July 2021 23:19:13

> start
> snowpack dev

[24:20:55] [snowpack] Ready!
[24:20:55] [snowpack] Server started in 38ms.
[24:20:55] [snowpack] Local: http://localhost:8080
[24:20:55] [snowpack] Network: http://172.17.48.1:8080
[24:20:55] [@snowpack/plugin-typescript] 23:19:55 - Starting compilation in watch mode...
[24:21:00] [@snowpack/plugin-typescript] 23:20:00 - Found 0 errors. Watching for file changes.

This is on a decentish speced laptop (albeit 2/3 years old)

Operating System: Windows 10 Pro 64-bit (10.0, Build 19043) (19041.vb_release.191206-1406)
System Manufacturer: HP
System Model: HP Spectre x360 Convertible 15-ch0xx
Processor: Intel(R) Core(TM) i7-8705G CPU @ 3.10GHz (8 CPUs), ~3.1GHz

Link to minimal reproducible example (optional)

michal-ciechan/snowpack-chakra-slow-test: Example of snowpack slowness with chakra

[rossng]

Snowpack is also pretty slow for us. I had assumed that was 'just how things are', but perhaps not!

Here's our Chakra codebase that's compiled by Snowpack: https://github.com/clowdr-app/clowdr/tree/main/frontend

(I'm currently doing some changes to bring Snowpack up to date and improve our monorepo structure, so the Snowpack config will likely change in the near future)

[drwpow]

Thanks for filing. We’re working on some improvements to esinstall (the package that does all the preparation that takes so long) that should speed this up drastically.

[rossng]

Sounds good! I've been looking at Vite recently too and the pure-esbuild dev pipeline seems like a good direction to be going in.

[michal-ciechan]

We currently migrated to Vite for instant start-up's, biggest downside is lack of TS errors in browser, the old app just keeps running 😂 definitely willing to go back to snowpack if the start-up is quick (e.g. sub 2 seconds). Just impossible to use with a 90 second start-up 😢

[drwpow]

Thanks for your patience. In the recent snowpack@3.8.7 release, startup times across the board have improved. I’m seeing ~15 second cold start on my machine for @chakra-ui/react and all deps, with subsequent startups being instant, of course.