Code-split howler

src/app/components/sounds/SoundConfig.tsx

@@ -1,4 +1,4 @@
-import { Howl } from 'howler'
+import type { Howl, HowlOptions } from 'howler'
 import { useEffect, useRef, useState } from 'preact/hooks'
 import { Btn, NumberInput, RangeInput, TextInput } from '..'
 import { useLocale, useVersion } from '../../contexts'
@@ -13,12 +13,13 @@ export interface SoundConfig {
 	volume: number,
 }
 type SoundConfigProps = SoundConfig & {
+	howler: (options: HowlOptions) => Howl,
 	sounds: SoundEvents,
 	onEdit: (changes: Partial<SoundConfig>) => unknown,
 	onDelete: () => unknown,
 	delayedPlay?: number,
 }
-export function SoundConfig({ sounds, sound, delay, pitch, volume, onEdit, onDelete, delayedPlay }: SoundConfigProps) {
+export function SoundConfig({ howler, sounds, sound, delay, pitch, volume, onEdit, onDelete, delayedPlay }: SoundConfigProps) {
 	const { locale } = useLocale()
 	const { version } = useVersion()
 	const [loading, setLoading] = useState(true)
@@ -34,7 +35,7 @@ export function SoundConfig({ sounds, sound, delay, pitch, volume, onEdit, onDel
 		howls.current = (soundEvent?.sounds ?? []).map(entry => {
 			const soundPath = typeof entry === 'string' ? entry : entry.name
 			const url = getSoundUrl(version, soundPath)
-			const howl = new Howl({
+			const howl = howler({
 				src: [url],
 				format: ['ogg'],
 				volume,

src/app/pages/Sounds.tsx

@@ -1,3 +1,4 @@
+import type { Howl, HowlOptions } from 'howler'
 import { useEffect, useRef, useState } from 'preact/hooks'
 import config from '../../config.json'
 import { Btn, BtnMenu, ErrorPanel, SoundConfig, TextInput } from '../components'
@@ -15,6 +16,14 @@ export function Sounds({}: Props) {
 	const [error, setError] = useState<Error | null>(null)
 	useTitle(locale('title.sounds'))
 
+	const [howler, setHowler] = useState<undefined | ((options: HowlOptions) => Howl)>(undefined)
+	useEffect(() => {
+		(async () => {
+			const howler = await import('howler')
+			setHowler(() => (options: HowlOptions) => new howler.Howl(options))
+		})()
+	}, [])
+
 	const [sounds, setSounds] = useState<SoundEvents>({})
 	const soundKeys = Object.keys(sounds ?? {})
 	useEffect(() => {
@@ -71,7 +80,9 @@ export function Sounds({}: Props) {
 				</BtnMenu>
 			</div>
 			<div class="sounds">
-				{configs.map(c => <SoundConfig key={c.id} {...c} {...{ sounds, delayedPlay }} onEdit={editConfig(c.id)} onDelete={deleteConfig(c.id)} />)}
+				{howler && configs.map(c =>
+					<SoundConfig key={c.id} {...c} {...{ howler, sounds, delayedPlay }} onEdit={editConfig(c.id)} onDelete={deleteConfig(c.id)} />
+				)}
 			</div>
 			<a ref={download} style="display: none;"></a>
 		</>}