`typeface-*` package optimization causes massive slowdown

[Namchee]

Do NOT ignore this template or your issue will have a very high chance to be closed without comment.

Describe the bug

Using typeface-* packages causes massive slowdown to the point it causes the system to freeze for some minutes. This problem occurs when vite tries to optimize .woff2 files.

Adding the corresponding package to exclude in dependency optimization of vite.config.js removes this issue.

Note: I haven't tried self hosting the .woff2 myself.

Reproduction

Repoduction link: https://github.com/Namchee/tetikus-playground/tree/vite-deps-opts Branch: vite-deps-opts

Steps to reproduce:

1. Clone the repository
2. Install all required dependency
3. Run npm run dev

System Info

• required vite version: 1.0.0rc4
• required Operating System: Windows 10 Build 2004
• required Node version: 12.18.2
• Optional:
  • npm/yarn version 6.14.6
  • Installed vue version (from yarn.lock or package-lock.json) 3.0.0-rc.1
  • Installed @vue/compiler-sfc version 3.0.0-rc.1

Logs (Optional if provided reproduction)

npm run dev

> tetikus-playground@0.0.0 dev D:\OS\tetikus-playground
> vite --debug

vite v1.0.0-rc.4
  vite:config env mode: development +0ms
  vite:config env: {} +1ms
  vite:config config resolved in 4ms +2ms
  vite:resolve (node_module entry) typeface-inter -> inter.css +0ms
  vite:optimize skipping typeface-inter (entry is not js) +0ms
  vite:resolve (node_module entry) vue -> dist/vue.runtime.esm-bundler.js +4ms
  vite:optimize optimizing vue (imports sub dependencies) +3ms
[vite] Optimizable dependencies detected:
vue
Pre-bundling them to speed up dev server page load...
(this will be run only when your dependencies have changed)

  Dev server running at:
  > Network:  http://172.18.0.1:3000/
  > Network:  http://192.168.43.104:3000/
  > Local:    http://localhost:3000/

  vite:server server ready in 2756ms. +0ms
  vite:hmr         / imports /:/src/main.js +0ms
  vite:rewrite (skipped) / +0ms
  vite:rewrite /: serving from cache +0ms
  vite:rewrite (skipped) / +8ms
  vite:rewrite /: serving from cache +155ms
  vite:rewrite (skipped) / +156ms
  vite:rewrite /src/main.js: rewriting +42ms
  vite:rewrite     "vue" --> "/@modules/vue.js" +2ms
  vite:hmr         /src/main.js imports /@modules/vue.js +209ms
  vite:resolve (node_module entry) typeface-inter -> inter.css +3s
  vite:rewrite     "typeface-inter" --> "/@modules/typeface-inter/inter.css?import" +3ms
  vite:hmr         /src/main.js imports /@modules/typeface-inter/inter.css +3ms
  vite:rewrite     "./App.vue" --> "/src/App.vue" +1ms
  vite:hmr         /src/main.js imports /src/App.vue +2ms
  vite:rewrite     "./index.css" --> "/src/index.css?import" +1ms
  vite:hmr         /src/main.js imports /src/index.css +1ms
  vite:rewrite (skipped) /vite/client +62ms
  vite:resolve (optimized) vue.js -> node_modules\.vite_opt_cache\vue.js +0ms
  vite:rewrite /@modules/vue.js: no imports found. +11ms
  vite:resolve (node_modules) typeface-inter/inter.css -> node_modules\typeface-inter\inter.css +8ms
  vite:hmr ws client connected +84ms

risk - There are upcoming breaking changes: removeDeprecatedGapUtilities
risk - We highly recommend opting-in to these changes now to simplify upgrading Tailwind in the future.
risk - https://tailwindcss.com/docs/upcoming-changes
  vite:rewrite (skipped) /src/index.css?import +7s
  vite:rewrite (skipped) /@modules/typeface-inter/inter.css?import +326ms
  vite:sfc D:\OS\tetikus-playground\src\App.vue parsed in 26ms. +0ms
  vite:rewrite /src/App.vue: rewriting +32ms
  vite:rewrite     nothing needs rewriting. +1ms
  vite:sfc D:\OS\tetikus-playground\src\App.vue parse cache hit +12ms
  vite:sfc /src/App.vue template compiled in 29ms. +29ms
  vite:rewrite /src/App.vue?type=template: rewriting +36ms
  vite:rewrite     "vue.js" --> "/@modules/vue.js" +1ms
  vite:hmr         /src/App.vue?type=template imports /@modules/vue.js +7s
  vite:resolve (node_modules) typeface-inter/Inter Web/Inter-ExtraBold.woff2 -> node_modules\typeface-inter\Inter Web\Inter-ExtraBold.woff2 +8s
  vite:resolve (node_modules) typeface-inter/Inter Web/Inter-SemiBold.woff2 -> node_modules\typeface-inter\Inter Web\Inter-SemiBold.woff2 +8ms
  vite:resolve (node_modules) typeface-inter/Inter Web/Inter-Regular.woff2 -> node_modules\typeface-inter\Inter Web\Inter-Regular.woff2 +3ms
  vite:resolve (node_modules) typeface-inter/Inter Web/Inter-Medium.woff2 -> node_modules\typeface-inter\Inter Web\Inter-Medium.woff2 +2ms
  vite:rewrite (skipped) /@modules/typeface-inter/Inter%20Web/Inter-Medium.woff2 +776ms
  vite:rewrite (skipped) /@modules/typeface-inter/Inter%20Web/Inter-Regular.woff2 +9ms
  vite:rewrite (skipped) /@modules/typeface-inter/Inter%20Web/Inter-SemiBold.woff2 +3ms
  vite:rewrite (skipped) /@modules/typeface-inter/Inter%20Web/Inter-ExtraBold.woff2 +5ms

[underfin]

The typeface-* package will not be optimized by vite, the optimizer only work for js module. Look like the slowdown caused by compiled taiwandcss, you should enable cache inside chrome devtools to let http cache worked.