Svelte Compiler Speed - Flowbite

Learn how you can manage and improve the Svelte compilation speed when using the Flowbite Svelte library by checking out this tutorial

If your Svelte app only requires a few components, it’s recommended that you import them directly. Doing so can help optimize compilation speed and improve performance by reducing the amount of code that needs to be processed during compilation. Since version 0.34.1, it’s now possible to import individual components.

  • Svelte
<script>
  // import Alert from 'flowbite-svelte/Alert.svelte'
  // TODO: correct that so the above works
  import { Alert } from 'flowbite-svelte'
</script>

<div class="p-8">
  <Alert>
    <span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
  </Alert>
</div>

Requirements #

If you are a TypeScript user, install typescript version 5.0.0 or above.

As of March 2023, the typescript@beta version is now available:

pnpm i -D typescript@beta

To avoid any complaints from the editor, add node16 or nodenext to moduleResolution in your tsconfig.json file.

{
  //...
  "compilerOptions": {
    // ...
    "moduleResolution": "nodenext"
  }
}

Speed comparisons #

Files Time Avg
1 3.3ms 3.3ms
2 9.0ms 4.5ms
7 20.7ms 3.0ms
7 60.6ms 8.7ms

The above table shows examples from using import Alert from 'flowbite-svelte/Alert.svelte'. Compare these numbers to the following table where using normal import.

Files Time Avg
151 1.10s 7.3ms
154 0.40s 2.6ms
151 1.04s 6.9ms
154 1.32s 8.8ms