refactor: dynamic import

app/routes/_main-menu.play.$/route.jsx

@@ -1,8 +1,6 @@
 import {useEffect, useState} from 'react';
 import {Outlet, useParams} from 'react-router-dom';
 
-import LocalClient from '@/net/client/local.js';
-import RemoteClient from '@/net/client/remote.js';
 import {decode, encode} from '@/packets/index.js';
 
 import styles from './play.module.css';
@@ -12,13 +10,14 @@ export default function Play() {
   const params = useParams();
   const [type] = params['*'].split('/');
   useEffect(() => {
+    async function loadClient() {
       let Client;
       switch (type) {
         case 'local':
-        Client = LocalClient;
+          ({default: Client} = await import('@/net/client/local.js'));
           break;
         case 'remote':
-        Client = RemoteClient;
+          ({default: Client} = await import('@/net/client/remote.js'));
           break;
       }
       class SilphiusClient extends Client {
@@ -30,6 +29,8 @@ export default function Play() {
         }
       }
       setClient(() => SilphiusClient);
+    }
+    loadClient();
   }, [type]);
   return (
     <div className={styles.play}>