Skip to content

perf: optmize page load time #726

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JoeyC-Dev wants to merge 3 commits into
base: main
Choose a base branch
from
Open

perf: optmize page load time #726

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
81537e7
perf: optmize page load time
JoeyC-Dev Feb 1, 2026
417c749
fix: format
JoeyC-Dev Feb 1, 2026
d8548eb
fix: wrong format due to wrong diff when merging changes
JoeyC-Dev Feb 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 111 additions & 5 deletions astro.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import expressiveCode from "astro-expressive-code";
import icon from "astro-icon";
import { defineConfig } from "astro/config";
import rehypeAutolinkHeadings from "rehype-autolink-headings";
import { fileURLToPath } from "url";
import rehypeComponents from "rehype-components"; /* Render the custom directive content */
import rehypeKatex from "rehype-katex";
import rehypeSlug from "rehype-slug";
Expand All @@ -29,6 +30,9 @@ export default defineConfig({
site: "https://fuwari.vercel.app/",
base: "/",
trailingSlash: "always",
build: {
inlineStylesheets: 'auto',
},
integrations: [
tailwind({
nesting: true,
Expand All @@ -49,10 +53,37 @@ export default defineConfig({
}),
icon({
include: {
"preprocess: vitePreprocess(),": ["*"],
"fa6-brands": ["*"],
"fa6-regular": ["*"],
"fa6-solid": ["*"],
"material-symbols": [
"keyboard-arrow-up-rounded",
"home-outline-rounded",
"palette-outline",
"menu-rounded",
"calendar-today-outline-rounded",
"edit-calendar-outline-rounded",
"book-2-outline-rounded",
"tag-rounded",
"chevron-right-rounded",
"chevron-left-rounded",
"more-horiz",
"copyright-outline-rounded",
"notes-rounded",
"schedule-outline-rounded",
"search",
"wb-sunny-outline-rounded",
"dark-mode-outline-rounded",
"radio-button-partial-outline"
],
"fa6-brands": [
"creative-commons"
],
"fa6-regular": [
"address-card"
],
"fa6-solid": [
"arrow-up-right-from-square",
"arrow-rotate-left",
"chevron-right"
],
},
}),
expressiveCode({
Expand Down Expand Up @@ -154,7 +185,36 @@ export default defineConfig({
],
},
vite: {
plugins: [
{
name: 'block-iconify-json-imports',
enforce: 'pre', // Run before vite:json plugin
load(id) {
// Block ALL @iconify-json imports since manual addIcon() is used in preload-icons.ts
// This prevents bundling large JSON files and forces dynamic icons to use CDN
if (id.includes('@iconify-json')) {
if (id.endsWith('/icons.json')) {
return JSON.stringify({
prefix: "",
icons: {},
width: 24,
height: 24
});
}
if (id.endsWith('/info.json')) {
return JSON.stringify({
name: "",
total: 0,
version: "1.0.0"
});
}
}
}
}
],
build: {
minify: 'esbuild',
cssCodeSplit: true,
rollupOptions: {
onwarn(warning, warn) {
// temporarily suppress this warning
Expand All @@ -166,7 +226,53 @@ export default defineConfig({
}
warn(warning);
},
output: {
manualChunks: (id) => {
Comment on lines +229 to +230
Copy link
Copy Markdown
Contributor Author

@JoeyC-Dev JoeyC-Dev Feb 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This works in Astro v5 but not working in v6:

Cannot find module 'CD:\blog-fuwari\dist\.prerender\_astro\vendor.B-wHfxiC.js' imported from D:\blog-fuwari\dist\.prerender\prerender-entry.CjqpiJ7Y.mjs
  Location:
    D:\blog-fuwari\node_modules\.pnpm\@tailwindcss+node@4.1.18\node_modules\@tailwindcss\node\dist\esm-cache.loader.mjs:1:69
  Stack trace:
    at finalizeResolution (node:internal/modules/esm/resolve:274:11)
    at defaultResolve (node:internal/modules/esm/resolve:990:11)
    at o (file:///D:/blog-fuwari/node_modules/.pnpm/@tailwindcss+node@4.1.18/node_modules/@tailwindcss/node/dist/esm-cache.loader.mjs:1:69)
    at AsyncLoaderHooksOnLoaderHookWorker.resolve (node:internal/modules/esm/hooks:269:30)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:845:20)
 ELIFECYCLE  Command failed with exit code 1.

manualChunks configuration here is creating separate vendor chunks during build that interfere with the prerender step in Astro v6. So this part needs to be removed if upgrading to v6.

// Vendor chunking for better caching and code splitting
if (id.includes('node_modules')) {
// Exclude icon JSON data from bundles - loaded from API instead
if (id.includes('@iconify-json') || id.includes('@iconify/json')) {
return undefined;
}
// Split heavy libraries into separate chunks
if (id.includes('photoswipe')) {
return 'vendor-photoswipe';
}
if (id.includes('swup') || id.includes('@swup')) {
return 'vendor-swup';
}
if (id.includes('overlayscrollbars')) {
return 'vendor-scrollbar';
}
if (id.includes('@iconify/svelte')) {
return 'vendor-iconify';
}
if (id.includes('astro-icon')) {
return 'vendor-icons';
}
// Split Tailwind/CSS frameworks
if (id.includes('tailwindcss')) {
return 'vendor-tailwind';
}
// Other vendor dependencies
return 'vendor';
}
},
// Optimize output with smaller chunks
chunkFileNames: '_astro/[name].[hash].js',
assetFileNames: '_astro/[name].[hash][extname]',
},
},
// Enable aggressive tree-shaking
target: 'esnext',
},
optimizeDeps: {
exclude: [
'@iconify-json/material-symbols',
'@iconify-json/fa6-brands',
'@iconify-json/fa6-regular',
'@iconify-json/fa6-solid'
]
},
},
});
});
49 changes: 49 additions & 0 deletions scripts/get-icon-data.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
#!/usr/bin/env node

/**
* Helper script to get icon data from Iconify API
* Usage: node scripts/get-icon-data.js <icon-name>
* Example: node scripts/get-icon-data.js material-symbols:search
*/

const iconName = process.argv[2];

if (!iconName) {
console.error('Usage: node scripts/get-icon-data.js <icon-name>');
console.error('Example: node scripts/get-icon-data.js material-symbols:search');
process.exit(1);
}

const [prefix, name] = iconName.split(':');

if (!prefix || !name) {
console.error('Icon name must be in format: <prefix>:<name>');
console.error('Example: material-symbols:search');
process.exit(1);
}

const url = `https://api.iconify.design/${prefix}.json?icons=${name}`;

fetch(url)
.then(res => res.json())
.then(data => {
const icon = data.icons[name];
if (!icon) {
console.error(`Icon "${name}" not found in set "${prefix}"`);
process.exit(1);
}

const width = icon.width || data.width || 24;
const height = icon.height || data.height || 24;

console.log('\n// Add this to src/utils/preload-icons.ts:\n');
console.log(`addIcon('${iconName}', {`);
console.log(`\tbody: '${icon.body}',`);
console.log(`\twidth: ${width},`);
console.log(`\theight: ${height},`);
console.log(`});\n`);
})
.catch(error => {
console.error('Error fetching icon data:', error.message);
process.exit(1);
});
12 changes: 12 additions & 0 deletions src/components/misc/BrandIcon.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<script lang="ts">

Check failure on line 1 in src/components/misc/BrandIcon.svelte

View workflow job for this annotation

GitHub Actions / quality

format 

File content differs from formatting output
import Icon from "@iconify/svelte";

interface Props {
icon: string;
class?: string;
}

let { icon, class: className = "" }: Props = $props();
</script>

<Icon {icon} class={className}></Icon>
5 changes: 3 additions & 2 deletions src/components/widget/Profile.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
---
import { Icon } from "astro-icon/components";

Check failure on line 2 in src/components/widget/Profile.astro

View workflow job for this annotation

GitHub Actions / quality

assist/source/organizeImports 

The imports and exports are not sorted.
import BrandIcon from "../misc/BrandIcon.svelte";
import { profileConfig } from "../../config";
import { url } from "../../utils/url-utils";
import ImageWrapper from "../misc/ImageWrapper.astro";
Expand All @@ -25,12 +26,12 @@
<div class="flex flex-wrap gap-2 justify-center mb-1">
{config.links.length > 1 && config.links.map(item =>
<a rel="me" aria-label={item.name} href={item.url} target="_blank" class="btn-regular rounded-lg h-10 w-10 active:scale-90">
<Icon name={item.icon} class="text-[1.5rem]"></Icon>
<BrandIcon icon={item.icon} class="text-[1.5rem]" client:load></BrandIcon>
</a>
)}
{config.links.length == 1 && <a rel="me" aria-label={config.links[0].name} href={config.links[0].url} target="_blank"
class="btn-regular rounded-lg h-10 gap-2 px-3 font-bold active:scale-95">
<Icon name={config.links[0].icon} class="text-[1.5rem]"></Icon>
<BrandIcon icon={config.links[0].icon} class="text-[1.5rem]" client:load></BrandIcon>
{config.links[0].name}
</a>}
</div>
Expand Down
Loading
Loading