🚅
@tabler/icons-svelte のビルドを 10 倍速くする
@tabler/icons-svelte
MIT ライセンスで使用できるアイコンです。
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
参考
Discussion
v3 で修正されたようです。