What is the best practice to manage all the JavaScript dependencies?

[HEIGE-PCloud]

Currently, DoIt stores a copy for all JavaScript dependencies in assets/lib and maintains a list of their corresponding CDN links. This works fine until I want to upgrade some dependencies. I need to manually check updates for each library, update its file and CDN link. And I need to do that regularly to keep them up to date. This takes a huge amount of time and cannot be automated very easily. By using libraries (import as global variables) in this way, the code editor will not be able to provide any auto complete for theme.js, which results in hidden bugs and low development efficiency. The theme.js is processed by babel, which makes the build time very long, and requires manual building every time when it is changed during development.

With the ongoing refactor #368 for theme.js, I attempt to solve these problems, but there does not seem to have a perfect solution. By using the js.Build in Hugo, I am able to bundle theme.js and all its dependencies using ESBuild with no extra steps. But simply bundling everything together will result in an enormous bundle (several megabytes) which is not optimal. And because the bundle is built during hugo "build time", I cannot directly commit the bundle into the repo. Users have to build the bundle themselves which means they have to have npm installed and run npm install after downloading the theme. I can take advantage of the shim functionality (which is what I am doing in #368), which allows me to use local libraries during development and swap them with CDN files in production. But the same problem still exists, users need to access local libraries during development as well. I need to either keep all these libraries in assets/lib, update them manually and import them for local development, or ask users to run npm install and set the src for script to node_modules (probably a worse idea), or completely remove the local libraries and use them from CDN all the time (make it impossible to develop offline) and I have to manually update the version for these CDN links as well.

Are there any ways to achieve all the following goals at once?

1. Not committing dependencies into the repo
2. Automate the upgrade process for libraries (using dependabot?)
3. Use local libraries when develop, CDN in production
4. Not creating a giant bundle

[HEIGE-PCloud]

Maybe https://webpack.js.org/guides/code-splitting/

[HEIGE-PCloud]

https://gohugo.io/commands/hugo_mod_npm_pack/

[digitaltwinz]

Can these posts be relevant for the topic?
https://www.brycewray.com/posts/2021/12/fetching-remote-stuff-hugo-0-90-plus/
https://www.brycewray.com/posts/2021/12/bundling-javascript-hugo-esbuild/