[FEATURE] Optimize front-end performance

[wu0407]

[FEATURE] Optimize front-end performance

[Sped0n]

suggestions

• Use Rollup for tree-shaking and bundling in JavaScript, then use ESM’s await import syntax in theme.js to dynamically import the required libraries.

• For CSS, I think there are two approaches. One is to replace it entirely with Tailwind to reduce coupling. The other is to divide it into some small files like the critical CSS way. I might prefer the former one because the latter can be time-consuming and labor-intensive for a large static generated site. Additionally, I think [what Stylex has adopted](https://stylexjs.com/docs/learn/thinking-in-stylex/#one-small-file-over-many-smaller-files) is inspiring.

but

Benchmarking is benchmarking, and the improvements from these optimizations are limited in most user scenarios nowadays. Personally, I don’t find Doit’s loading speed unacceptable. The purpose of using Hugo as a framework is simplicity and developers have to consider most things themselves. It would be difficult to achieve best practices in so many aspects, or it will come with great complexity, which hugo is not born for.

[HEIGE-PCloud]

I would say the performance of DoIt is fine currently based on real world statistics from Google PageSpeed Insights (Collected from all Chrome users) and Cloudflare Pages Analytics (The hosting service provider).

The main reason why multiple attempts have been closed as you pointed out is because I have limited personal bandwith on maintaining this project, and all these changes are rather complicated. Also, a lot of low hanging fruits you might think of have already been implemented. To make things worse, we have zero testing for DoIt so it takes a lot of care to make sure nothing is broken and backwards compatibility is properly kept.

You will find most external JavaScript and CSS libraries are only loaded if required based on individual page configurations (See KaTeX as an example). And of course all JavaScript and CSS bundles are minified as you suggested here.

Here are some further optimisation ideas if you want to look into it:

• Load LightGallery only when the user clicks the image (Already implemented for search)
• Get rid of clipboard.js (I think now all browsers have a consistent API for this)
• Inline FontAwesome icons (Quite tricky because of this https://hugodoit.pages.dev/theme-documentation-content/#fontawesome)
• Get rid of animate.css and cherry pick the necessary animations
• Refactor all SCSS styles into tailwindCSS. (Quite tricky because of the sheer volume of the styles and dependencies in some JavaScript code)
• Upgrade deprecated dependencies (e.g. autocomplete for search, LightGallery for photos etc)
• Refactor code blocks to use the markdown render hook and reduce JavaScript dependency.