🚅

@tabler/icons-svelte のビルドを 10 倍速くする

2023/06/16に公開

@tabler/icons-svelte

MIT ライセンスで使用できるアイコンです。

https://tabler-icons.io/

Svelte 用にコンポーネントが提供されています。

https://tabler.io/docs/icons/svelte

インストール
npm install @tabler/icons-svelte
+page.svelte
<script lang="ts">
import { IconHeart } from '@tabler/icons-svelte';
</script>

<main>
  <IconHeart />
</main>

簡単に使えるのですが体感で分かるくらい npm run dev 時の読み込み(ビルド)が遅くなります。

解決方法

コンポーネントをインポートする際に直下ではなく実際のファイルパスを指定します。
ビルド時に読み込むモジュールが減るようでビルドが劇的に速くなります。

+page.svelte
- import { IconHeart } from '@tabler/icons-svelte';
+ import IconHeart from '@tabler/icons-svelte/dist/svelte/icons/IconHeart.svelte';
ビルドログ(変更前)
> npm run build 

> web@0.0.1 build
> vite build     


vite v4.3.9 building SSR bundle for production...
✓ 4351 modules transformed.

vite v4.3.9 building for production...
✓ 4473 modules transformed.
.svelte-kit/output/client/_app/version.json                                  0.03 kB │ gzip:  0.05 kB
.svelte-kit/output/client/vite-manifest.json                                10.34 kB │ gzip:  1.21 kB
.svelte-kit/output/client/_app/immutable/assets/5.da51927f.css               0.11 kB │ gzip:  0.11 kB
.svelte-kit/output/client/_app/immutable/assets/6.5588a47f.css               0.26 kB │ gzip:  0.15 kB
.svelte-kit/output/client/_app/immutable/assets/9.1cc4032c.css               0.68 kB │ gzip:  0.28 kB
.svelte-kit/output/client/_app/immutable/assets/0.21299878.css               1.99 kB │ gzip:  0.75 kB
.svelte-kit/output/client/_app/immutable/assets/TimelineView.757fd329.css    2.26 kB │ gzip:  0.69 kB
.svelte-kit/output/client/_app/immutable/assets/Note.929906d8.css            3.75 kB │ gzip:  0.97 kB
.svelte-kit/output/client/_app/immutable/chunks/CustomEmojis.e8c16290.js     0.08 kB │ gzip:  0.09 kB
.svelte-kit/output/client/_app/immutable/chunks/EventHelper.0eca81c4.js      0.10 kB │ gzip:  0.11 kB
.svelte-kit/output/client/_app/immutable/chunks/navigation.4cfb85db.js       0.11 kB │ gzip:  0.12 kB
.svelte-kit/output/client/_app/immutable/chunks/index.2defaa64.js            0.11 kB │ gzip:  0.12 kB
.svelte-kit/output/client/_app/immutable/chunks/NoteDialog.09e32463.js       0.12 kB │ gzip:  0.12 kB
.svelte-kit/output/client/_app/immutable/chunks/stores.4661d024.js           0.24 kB │ gzip:  0.17 kB
.svelte-kit/output/client/_app/immutable/chunks/control.e7f5239e.js          0.26 kB │ gzip:  0.18 kB
.svelte-kit/output/client/_app/immutable/chunks/index.8dd84e56.js            0.50 kB │ gzip:  0.33 kB
.svelte-kit/output/client/_app/immutable/nodes/4.d2185f71.js                 0.53 kB │ gzip:  0.35 kB
.svelte-kit/output/client/_app/immutable/chunks/User.f9491327.js             0.70 kB │ gzip:  0.46 kB
.svelte-kit/output/client/_app/immutable/chunks/preload-helper.41c905a7.js   0.76 kB │ gzip:  0.48 kB
.svelte-kit/output/client/_app/immutable/nodes/1.b4c58928.js                 0.80 kB │ gzip:  0.50 kB
.svelte-kit/output/client/_app/immutable/nodes/11.370a00d8.js                2.03 kB │ gzip:  1.13 kB
.svelte-kit/output/client/_app/immutable/chunks/singletons.2810afc6.js       2.50 kB │ gzip:  1.26 kB
.svelte-kit/output/client/_app/immutable/nodes/8.bb2297b2.js                 2.72 kB │ gzip:  1.41 kB
.svelte-kit/output/client/_app/immutable/nodes/7.0e9e1d49.js                 2.72 kB │ gzip:  1.41 kB
.svelte-kit/output/client/_app/immutable/nodes/10.bb79a1a0.js                3.02 kB │ gzip:  1.44 kB
.svelte-kit/output/client/_app/immutable/nodes/6.a6f9ccd3.js                 3.97 kB │ gzip:  1.94 kB
.svelte-kit/output/client/_app/immutable/chunks/Api.3cde8a70.js              5.10 kB │ gzip:  1.76 kB
.svelte-kit/output/client/_app/immutable/nodes/3.cc622ced.js                 5.43 kB │ gzip:  2.41 kB
.svelte-kit/output/client/_app/immutable/nodes/5.f7a15d88.js                 6.69 kB │ gzip:  3.05 kB
.svelte-kit/output/client/_app/immutable/nodes/2.7a61135f.js                 8.36 kB │ gzip:  3.40 kB
.svelte-kit/output/client/_app/immutable/entry/app.577182ef.js              10.15 kB │ gzip:  2.55 kB
.svelte-kit/output/client/_app/immutable/chunks/index.fd22080f.js           10.66 kB │ gzip:  4.32 kB
.svelte-kit/output/client/_app/immutable/nodes/9.12697792.js                10.82 kB │ gzip:  4.28 kB
.svelte-kit/output/client/_app/immutable/entry/start.52d928ad.js            23.76 kB │ gzip:  9.46 kB
.svelte-kit/output/client/_app/immutable/chunks/tribute.esm.fd7ad100.js     27.59 kB │ gzip:  8.04 kB
.svelte-kit/output/client/_app/immutable/nodes/0.b6b4c7da.js                27.74 kB │ gzip:  8.77 kB
.svelte-kit/output/client/_app/immutable/chunks/TimelineView.0caf16c1.js    35.35 kB │ gzip:  9.71 kB
.svelte-kit/output/client/_app/immutable/chunks/Note.ad0a5558.js            87.91 kB │ gzip: 26.46 kB
.svelte-kit/output/client/_app/immutable/chunks/Signer.6b15dfa1.js          98.04 kB │ gzip: 36.86 kB
✓ built in 1m 6s
.svelte-kit/output/server/vite-manifest.json                                    7.09 kB
.svelte-kit/output/server/_app/immutable/assets/_page.da51927f.css              0.11 kB
.svelte-kit/output/server/_app/immutable/assets/_page.5588a47f.css              0.26 kB
.svelte-kit/output/server/_app/immutable/assets/_page.1cc4032c.css              0.68 kB
.svelte-kit/output/server/_app/immutable/assets/_layout.21299878.css            1.99 kB
.svelte-kit/output/server/_app/immutable/assets/TimelineView.757fd329.css       2.26 kB
.svelte-kit/output/server/_app/immutable/assets/Note.929906d8.css               3.75 kB
.svelte-kit/output/server/entries/matchers/naddr.js                             0.10 kB
.svelte-kit/output/server/entries/matchers/note.js                              0.10 kB
.svelte-kit/output/server/entries/matchers/npub.js                              0.14 kB
.svelte-kit/output/server/chunks/Preference.js                                  0.17 kB
.svelte-kit/output/server/internal.js                                           0.19 kB
.svelte-kit/output/server/chunks/NoteDialog.js                                  0.27 kB
.svelte-kit/output/server/chunks/stores.js                                      0.47 kB
.svelte-kit/output/server/entries/fallbacks/error.svelte.js                     0.47 kB
.svelte-kit/output/server/chunks/navigation.js                                  0.58 kB
.svelte-kit/output/server/entries/pages/post/_page.svelte.js                    0.76 kB
.svelte-kit/output/server/entries/pages/_page.svelte.js                         1.24 kB
.svelte-kit/output/server/chunks/User.js                                        1.32 kB
.svelte-kit/output/server/chunks/index2.js                                      1.33 kB
.svelte-kit/output/server/entries/pages/_naddr_naddr_/_page.svelte.js           1.43 kB
.svelte-kit/output/server/chunks/Pool.js                                        1.81 kB
.svelte-kit/output/server/entries/pages/_npub_npub_/bookmark/_page.svelte.js    1.90 kB
.svelte-kit/output/server/chunks/index.js                                       1.95 kB
.svelte-kit/output/server/entries/pages/preference/_page.svelte.js              3.21 kB
.svelte-kit/output/server/entries/pages/_npub_npub_/followees/_page.svelte.js   3.36 kB
.svelte-kit/output/server/entries/pages/search/_page.svelte.js                  4.57 kB
.svelte-kit/output/server/entries/pages/_note_note_/_page.svelte.js             4.59 kB
.svelte-kit/output/server/entries/pages/home/_page.svelte.js                    5.53 kB
.svelte-kit/output/server/chunks/internal.js                                    5.81 kB
.svelte-kit/output/server/chunks/index3.js                                      8.32 kB
.svelte-kit/output/server/chunks/Api.js                                         9.61 kB
.svelte-kit/output/server/entries/pages/_npub_npub_/_page.svelte.js             9.92 kB
.svelte-kit/output/server/entries/pages/_layout.svelte.js                      14.64 kB
.svelte-kit/output/server/chunks/TimelineView.js                               20.12 kB
.svelte-kit/output/server/chunks/Note.js                                       35.93 kB
.svelte-kit/output/server/index.js                                             82.65 kB

Run npm run preview to preview your production build locally.

> Using @sveltejs/adapter-auto
  Could not detect a supported production environment. See https://kit.svelte.dev/docs/adapters to learn how to configure your app to run on the platform of your choosing
  ✔ done
✓ built in 1m 35s
ビルドログ(変更後)
> npm run build

> web@0.0.1 build
> vite build     


vite v4.3.9 building SSR bundle for production...
✓ 155 modules transformed.

vite v4.3.9 building for production...
✓ 277 modules transformed.
.svelte-kit/output/client/_app/version.json                                  0.03 kB │ gzip:  0.05 kB
.svelte-kit/output/client/vite-manifest.json                                10.37 kB │ gzip:  1.22 kB
.svelte-kit/output/client/_app/immutable/assets/5.da51927f.css               0.11 kB │ gzip:  0.11 kB
.svelte-kit/output/client/_app/immutable/assets/6.5588a47f.css               0.26 kB │ gzip:  0.15 kB
.svelte-kit/output/client/_app/immutable/assets/9.1cc4032c.css               0.68 kB │ gzip:  0.28 kB
.svelte-kit/output/client/_app/immutable/assets/0.21299878.css               1.99 kB │ gzip:  0.75 kB
.svelte-kit/output/client/_app/immutable/assets/TimelineView.757fd329.css    2.26 kB │ gzip:  0.69 kB
.svelte-kit/output/client/_app/immutable/assets/Note.929906d8.css            3.75 kB │ gzip:  0.97 kB
.svelte-kit/output/client/_app/immutable/chunks/CustomEmojis.e8c16290.js     0.08 kB │ gzip:  0.09 kB
.svelte-kit/output/client/_app/immutable/chunks/EventHelper.0eca81c4.js      0.10 kB │ gzip:  0.11 kB
.svelte-kit/output/client/_app/immutable/chunks/index.2defaa64.js            0.11 kB │ gzip:  0.12 kB
.svelte-kit/output/client/_app/immutable/chunks/navigation.22b924c6.js       0.11 kB │ gzip:  0.12 kB
.svelte-kit/output/client/_app/immutable/chunks/NoteDialog.09e32463.js       0.12 kB │ gzip:  0.12 kB
.svelte-kit/output/client/_app/immutable/chunks/stores.811e0f67.js           0.24 kB │ gzip:  0.17 kB
.svelte-kit/output/client/_app/immutable/chunks/control.e7f5239e.js          0.26 kB │ gzip:  0.18 kB
.svelte-kit/output/client/_app/immutable/chunks/index.8dd84e56.js            0.50 kB │ gzip:  0.33 kB
.svelte-kit/output/client/_app/immutable/nodes/4.9d20cf20.js                 0.53 kB │ gzip:  0.35 kB
.svelte-kit/output/client/_app/immutable/chunks/User.f9491327.js             0.70 kB │ gzip:  0.46 kB
.svelte-kit/output/client/_app/immutable/chunks/preload-helper.41c905a7.js   0.76 kB │ gzip:  0.48 kB
.svelte-kit/output/client/_app/immutable/nodes/1.4419cbe3.js                 0.80 kB │ gzip:  0.50 kB
.svelte-kit/output/client/_app/immutable/nodes/11.5d08c53b.js                2.03 kB │ gzip:  1.13 kB
.svelte-kit/output/client/_app/immutable/chunks/singletons.3ac5421f.js       2.50 kB │ gzip:  1.26 kB
.svelte-kit/output/client/_app/immutable/nodes/8.8126066c.js                 2.72 kB │ gzip:  1.41 kB
.svelte-kit/output/client/_app/immutable/nodes/7.c842ee72.js                 2.72 kB │ gzip:  1.41 kB
.svelte-kit/output/client/_app/immutable/nodes/10.4b8abe63.js                3.02 kB │ gzip:  1.44 kB
.svelte-kit/output/client/_app/immutable/nodes/6.990f5a7a.js                 3.97 kB │ gzip:  1.94 kB
.svelte-kit/output/client/_app/immutable/chunks/Api.3cde8a70.js              5.10 kB │ gzip:  1.76 kB
.svelte-kit/output/client/_app/immutable/nodes/3.8fc9bb08.js                 6.12 kB │ gzip:  2.61 kB
.svelte-kit/output/client/_app/immutable/nodes/5.f7a15d88.js                 6.69 kB │ gzip:  3.05 kB
.svelte-kit/output/client/_app/immutable/nodes/2.97cb8d45.js                 8.36 kB │ gzip:  3.40 kB
.svelte-kit/output/client/_app/immutable/entry/app.42a376d7.js              10.22 kB │ gzip:  2.55 kB
.svelte-kit/output/client/_app/immutable/chunks/index.fd22080f.js           10.66 kB │ gzip:  4.32 kB
.svelte-kit/output/client/_app/immutable/nodes/9.5f681f8d.js                10.82 kB │ gzip:  4.28 kB
.svelte-kit/output/client/_app/immutable/entry/start.e31d0500.js            23.76 kB │ gzip:  9.46 kB
.svelte-kit/output/client/_app/immutable/chunks/tribute.esm.fd7ad100.js     27.59 kB │ gzip:  8.04 kB
.svelte-kit/output/client/_app/immutable/nodes/0.92381852.js                27.84 kB │ gzip:  8.83 kB
.svelte-kit/output/client/_app/immutable/chunks/TimelineView.f06cedd8.js    35.23 kB │ gzip:  9.69 kB
.svelte-kit/output/client/_app/immutable/chunks/Note.4e75e7ad.js            88.07 kB │ gzip: 26.86 kB
.svelte-kit/output/client/_app/immutable/chunks/Signer.6b15dfa1.js          98.04 kB │ gzip: 36.86 kB
✓ built in 5.37s
.svelte-kit/output/server/vite-manifest.json                                    7.11 kB
.svelte-kit/output/server/_app/immutable/assets/_page.da51927f.css              0.11 kB
.svelte-kit/output/server/_app/immutable/assets/_page.5588a47f.css              0.26 kB
.svelte-kit/output/server/_app/immutable/assets/_page.1cc4032c.css              0.68 kB
.svelte-kit/output/server/_app/immutable/assets/_layout.21299878.css            1.99 kB
.svelte-kit/output/server/_app/immutable/assets/TimelineView.757fd329.css       2.26 kB
.svelte-kit/output/server/_app/immutable/assets/Note.929906d8.css               3.75 kB
.svelte-kit/output/server/entries/matchers/naddr.js                             0.10 kB
.svelte-kit/output/server/entries/matchers/note.js                              0.10 kB
.svelte-kit/output/server/entries/matchers/npub.js                              0.14 kB
.svelte-kit/output/server/chunks/Preference.js                                  0.17 kB
.svelte-kit/output/server/internal.js                                           0.19 kB
.svelte-kit/output/server/chunks/NoteDialog.js                                  0.27 kB
.svelte-kit/output/server/chunks/stores.js                                      0.47 kB
.svelte-kit/output/server/entries/fallbacks/error.svelte.js                     0.47 kB
.svelte-kit/output/server/chunks/navigation.js                                  0.58 kB
.svelte-kit/output/server/entries/pages/post/_page.svelte.js                    0.76 kB
.svelte-kit/output/server/entries/pages/_page.svelte.js                         1.24 kB
.svelte-kit/output/server/chunks/User.js                                        1.32 kB
.svelte-kit/output/server/chunks/index2.js                                      1.33 kB
.svelte-kit/output/server/entries/pages/_naddr_naddr_/_page.svelte.js           1.43 kB
.svelte-kit/output/server/chunks/Pool.js                                        1.81 kB
.svelte-kit/output/server/entries/pages/_npub_npub_/bookmark/_page.svelte.js    1.90 kB
.svelte-kit/output/server/chunks/index.js                                       1.95 kB
.svelte-kit/output/server/entries/pages/preference/_page.svelte.js              3.21 kB
.svelte-kit/output/server/entries/pages/_npub_npub_/followees/_page.svelte.js   3.36 kB
.svelte-kit/output/server/entries/pages/search/_page.svelte.js                  4.57 kB
.svelte-kit/output/server/entries/pages/_note_note_/_page.svelte.js             4.59 kB
.svelte-kit/output/server/entries/pages/home/_page.svelte.js                    5.70 kB
.svelte-kit/output/server/chunks/internal.js                                    5.81 kB
.svelte-kit/output/server/chunks/index3.js                                      8.32 kB
.svelte-kit/output/server/chunks/Api.js                                         9.61 kB
.svelte-kit/output/server/entries/pages/_npub_npub_/_page.svelte.js             9.92 kB
.svelte-kit/output/server/entries/pages/_layout.svelte.js                      14.85 kB
.svelte-kit/output/server/chunks/TimelineView.js                               19.93 kB
.svelte-kit/output/server/chunks/Note.js                                       36.10 kB
.svelte-kit/output/server/index.js                                             82.65 kB

Run npm run preview to preview your production build locally.

> Using @sveltejs/adapter-auto
  Could not detect a supported production environment. See https://kit.svelte.dev/docs/adapters to learn how to configure your app to run on the platform of your choosing
  ✔ done
✓ built in 10.29s

参考

https://svelte.dev/repl/e80dc63d7019431692b10a77525e7f99?version=3.31.0

Discussion