So, I tried splitting a single HTML file into multiple files for management and modifying only the parts that are needed.

How It Works

The basic workflow is as follows:

1. Split a single HTML file into HTML, CSS, JavaScript, and so on
2. Have the AI load the files needed for the modifications, focusing on those files
3. After making the modifications, combine the split files using Python
4. Ultimately, use the result as a single HTML file, as before

The advantage of splitting is that it reduces the need to have the AI load the entire, huge HTML file every time.

Also, because the combining process is performed on the Python side, there is no need to have the AI output the entire completed HTML file.

Key Points for Saving Tokens

For example, when modifying a 100KB single HTML file, you would previously often have to load the entire file.

However, if you split it by feature, you may be able to focus the modifications on just a few KB of JavaScript.

This can potentially reduce both input and output tokens.

However, depending on the AI development environment and the nature of the work, you may also need to load related files or the overall structure, so token consumption is not necessarily reduced.

Publishing the Splitting Prompt

This time, I bundled the prompt and sample files for splitting and managing a single HTML file into a ZIP.

The ZIP also includes the implementation example as a ZIP, along with a Python script for recombining the files into a single HTML file.

This seems useful when you want to continue publishing and distributing the project as a single HTML file while minimizing the tokens consumed by ongoing AI-based modifications.

In particular, if you keep adding features to a single HTML file, I think it is worth trying.

※The effectiveness of token reduction varies depending on the development details and the AI usage environment.