File-based routing in Svelte - Performance & Optimization

Performance: File-based routing

MEDIUM IMPACT

File-based routing impacts initial page load speed and navigation responsiveness by controlling how routes are resolved and components are loaded.

Loading all routes and components upfront in a Svelte app

Svelte

const routes = {
  '/': () => import('./routes/Home.svelte'),
  '/about': () => import('./routes/About.svelte'),
  '/contact': () => import('./routes/Contact.svelte')
};

// Components loaded only when route is visited

Uses dynamic imports to lazy load route components, reducing initial bundle size and speeding up load.

📈 Performance GainSaves 200-300kb on initial load, reduces blocking time by 100-200ms.

Loading all routes and components upfront in a Svelte app

Svelte

import Home from './routes/Home.svelte';
import About from './routes/About.svelte';
import Contact from './routes/Contact.svelte';

// All routes imported and bundled together
const routes = {
  '/': Home,
  '/about': About,
  '/contact': Contact
};

Imports all route components at once, increasing initial bundle size and delaying first contentful paint.

📉 Performance CostAdds 200-300kb to initial bundle, blocks rendering for 100-200ms on slow networks.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Eager loading all routes	Low (few nodes initially)	1 reflow on load	High paint cost due to large bundle	[X] Bad
Lazy loading routes on demand	Low (nodes added per route)	1 reflow per route load	Lower paint cost initially	[OK] Good

Rendering Pipeline

File-based routing affects how the browser loads and renders route components. Eager loading increases bundle size and delays Style Calculation and Paint. Lazy loading defers component loading, improving initial rendering.

→Network

→Style Calculation

→Layout

→Paint

⚠️ BottleneckNetwork and Style Calculation due to large initial bundles

Core Web Vital Affected

LCP

File-based routing impacts initial page load speed and navigation responsiveness by controlling how routes are resolved and components are loaded.

Optimization Tips

1Avoid importing all route components upfront to keep initial bundle small.

2Use dynamic imports to lazy load routes only when visited.

3Monitor bundle size and load times with DevTools Network panel.

Performance Quiz - 3 Questions

How does eager loading all route components affect page load?

A Reduces initial bundle size and speeds up load

B Increases initial bundle size and delays first paint

C Has no effect on load performance

D Improves navigation speed only

DevTools: Network

How to check: Open DevTools > Network tab, reload page, filter by JS files, observe size and timing of route component files.

What to look for: Large initial JS bundle indicates eager loading; multiple smaller files loaded on navigation indicate lazy loading.

Practice

1. What does a +page.svelte file inside src/routes represent in SvelteKit?

easy

A. A page that users can visit via a URL

B. A component that cannot be accessed directly

C. A configuration file for routing

D. A style sheet for the app

Solution

1. Step 1: Understand the role of +page.svelte

   In SvelteKit, +page.svelte files define pages that users can visit through URLs.

2. Step 2: Connect file location to URL

   Files inside src/routes map directly to URL paths, so +page.svelte creates a page at that path.

3. Final Answer:

   A page that users can visit via a URL -> Option A

4. Quick Check:

   File-based routing means files = pages [OK]

Hint: Remember: +page.svelte files become pages [OK]

Common Mistakes:

• Thinking +page.svelte is just a component
• Confusing routing config with page files
• Assuming styles are defined in +page.svelte

2. Which of the following is the correct way to create a dynamic route for a user profile page in SvelteKit?

easy

A. src/routes/user/id/+page.svelte

B. src/routes/user/{id}/+page.svelte

C. src/routes/user/:id/+page.svelte

D. src/routes/user/[id]/+page.svelte

Solution

1. Step 1: Identify dynamic route syntax in SvelteKit

   SvelteKit uses square brackets [param] to define dynamic route parameters.

2. Step 2: Match the correct folder structure

   The folder src/routes/user/[id] captures the id part dynamically for user profiles.

3. Final Answer:

   src/routes/user/[id]/+page.svelte -> Option D

4. Quick Check:

   Dynamic routes use square brackets [OK]

Hint: Use square brackets for dynamic route folders [OK]

Common Mistakes:

• Using curly braces or colons instead of square brackets
• Placing dynamic parameter in file name instead of folder
• Omitting the +page.svelte file

3. Given the folder structure:

src/routes/
  +page.svelte
  about/+page.svelte
  blog/[slug]/+page.svelte

What URL will render the blog/[slug]/+page.svelte page when visiting /blog/hello-world?

medium

A. /blog/slug/hello-world

B. /blog/[slug]

C. /blog/hello-world

D. /blog/hello-world/+page

Solution

1. Step 1: Understand dynamic route matching

   The folder blog/[slug] matches any URL starting with /blog/ followed by any value as slug.

2. Step 2: Match URL to folder structure

   The URL /blog/hello-world matches the dynamic route [slug] with slug = 'hello-world'.

3. Final Answer:

   /blog/hello-world -> Option C

4. Quick Check:

   Dynamic folder matches URL part directly [OK]

Hint: Dynamic folders match URL parts exactly [OK]

Common Mistakes:

• Confusing literal folder names with dynamic parameters
• Expecting the URL to include brackets
• Adding extra path segments incorrectly

4. You created a file src/routes/blog/[id].svelte instead of src/routes/blog/[id]/+page.svelte. What will happen when you visit /blog/123?

medium

A. The page will not load; routing fails because the file is misplaced

B. The page loads correctly showing the blog with id 123

C. A syntax error occurs during build

D. The app shows a 404 page

Solution

1. Step 1: Check correct file placement for routing

   SvelteKit requires dynamic routes to be folders with +page.svelte inside, not files named with brackets.

2. Step 2: Understand routing failure

   Placing [id].svelte as a file breaks routing because SvelteKit expects [id] as a folder.

3. Final Answer:

   The page will not load; routing fails because the file is misplaced -> Option A

4. Quick Check:

   Dynamic routes need folders with +page.svelte [OK]

Hint: Dynamic routes must be folders with +page.svelte inside [OK]

Common Mistakes:

• Naming dynamic routes as files instead of folders
• Expecting SvelteKit to accept bracketed filenames
• Ignoring folder structure rules for routing

5. You want to create nested routes for category pages (/shop/electronics) and product pages (/shop/electronics/123) with a dynamic category and product ID. Which folder structure correctly implements this in SvelteKit?

hard

A. src/routes/shop/[category]/[product]/+page.svelte

B. src/routes/shop/[category]/+page.svelte and src/routes/shop/[category]/[product]/+page.svelte

C. src/routes/shop/[category]-[product]/+page.svelte

D. src/routes/shop/+page.svelte with query params for category and product

Solution

1. Step 1: Understand nested dynamic routes

   To handle URLs like /shop/electronics (category) and /shop/electronics/123 (product), you need nested folders: one for [category] and inside it one for [product].

2. Step 2: Confirm folder structure with pages

   Each folder can have its own +page.svelte. So src/routes/shop/[category]/+page.svelte can show category info, and src/routes/shop/[category]/[product]/+page.svelte shows product details.

3. Final Answer:

   src/routes/shop/[category]/+page.svelte and src/routes/shop/[category]/[product]/+page.svelte -> Option B

4. Quick Check:

   Nested folders for nested dynamic routes [OK]

Hint: Use nested folders for nested dynamic routes [OK]

Common Mistakes:

• Putting multiple params in one folder name
• Using query params instead of folder structure
• Not nesting folders for nested routes