Load JavaScript on specific page with @wordpress compiler

I'm new to WordPress development.

I have been following a tutorial in Udemy to build my new WordPress website. As recommended by the trainer, it is useful to use npm to package the JavaScripts using @wordpress/scripts. The npm command monitors a single index.js file, which is then compiled into WordPress friendly version. Then in functions.php I added the wp_enqueue_script() function to call the index.js from build folder.

The problem: I have created multiple JavaScript files, which contain new classes with the required code and are imported into the main index.js file. Each parent JavaScript file is responsible for a specific functionality, e.g. I have MyLogin.js file which is responsible for handling user login and another file EditProfile.js which handles user profile editing functionality. The EditProfile.js should be called/instantiated only when the user is logged in and the MyLogin.js should be called/instantiated only when user is not logged in. According to the articles I have read online, I can use functions.php to enqueue specific JavaScript files when a user is on a specific page. This would work if I would not use the npm to package my JavaScripts into a single file, but how do I handle the load of required JavaScript files from a single bundled index.js file?

The only solution I thought of, was to create an evaluation statement in the index.js file to only call/instantiate the required class if the current page is home page or profile page respectively, but to me it seems as a bad coding practice.

Can you please guide me to the right direction?

P.S. Is it even worth to use @wordpress/scripts to compile everything into a single file?

Here is my index.js file

import ../css/general.css;
import ../css/style.css;
import ../css/queries.css;
import ../css/profile.css;
import ../css/login.css;
import ../css/front-page.css;

import EditProfile from ./modules/EditProfile;
import MyLogin from ./modules/MyLogin;

const myLogin = new MyLogin();
const editProfile = new EditProfile();

The logic I was thinking of would be something like this:

import ../css/general.css;
import ../css/style.css;
import ../css/queries.css;
import ../css/profile.css;
import ../css/login.css;
import ../css/front-page.css;

import EditProfile from ./modules/EditProfile;
import MyLogin from ./modules/MyLogin;

if (window.location.href == https://site_url) {
  const myLogin = new MyLogin();
}

if (window.location.href == https://site_url/profile) {
  const editProfile = new EditProfile();
}