How to split my 9.5K lines of index.html?

Discussions  Featured Discussions
1

Hey guys,

after adding all my features and working for a few months with cursor on this web app, now I’m sitting on 11k lines of code inside one Index.html. However, I was able to move 1.5k lines of CSS into .css files.

However right now I’m stuck with 9.5k lines of HTML + JS included.
for the past 6hrs I’ve used tons of AI to try and split them up to no avail. I ended up with many working functions, but app is heavily broken. restored app right now and lookin what can I do?

2

bro don’t depend on AI :slight_smile: If you want to split it, go to youtube to know what is external css. Just ctrl c + ctrl v.

1 Like
3

lol thanks, but I know how to split both CSS and JS. I was just looking into how can I let Ai do that for me, since I got around 7k lines of JS in that index with many Ai generated functions

4

You cant, the context is too large.

1 Like
5

split script tag into single js file then ask AI to refactor it to mutiple js file in functional perspective

index.html
components┬ui.js
          ├event-coordinator.js
          ├api-fetcher.js
          ├dom-helper.js
          ├sanitizer.js
          ├styles.js
          └template.js

something like this

6
  • Have you tried asking the AI how to split this file?
  • Have you tried asking the AI what you’re doing wrong?
7

Thanks, I’m trying to do this right now. My JS file is 7k lines which is going to be very tough, but its worth it. Whats a sweet spot for JS files? 100-500 lines?

8
  • I did, it gave me a very clear plan
    we went through it, the issue is without claude 4, claude 3.5 messes the process up so bad since the file is huge. GPT 4 just destroys more than builds.

So in this case, I either wait for Claude 4 to reset in the new month, or try and suffer trying to split with 3.5 and pray

9

Upload the entire file to the Gemini context and ask it to build a Roadmap for breaking down the project into separate modules.

10

You can also try applying my Agent Docstrings to your file - it’s specifically designed to help the AI navigate large files. Don’t forget to save your code through Git before applying it.

Just ask the Agent to add this thing to the project and run it on your file.

1 Like
11

It’s really depends on how your 7K lines of your code have what functional perspective. Yes, 100-500 lines that’s ideal.
In my project, I refoctored 2.3K lines of Typescript ui.ts into multiple ts file but ui-refoctored.ts have still 1.4K of code. Claude 4 Sonnet says “These codes are heaveliy related each other so leave them as it is”. Well, so I leave it as it is. Anyway I should compile source code via vite, so it is maybe same. Final output will be giant single *.es.js file.