mmintel/e-tib.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions 150 Packages Projects Releases Wiki Activity

fix(perf): dynamic import of framer-motion features to eliminate 43 KiB unused JS

Browse Source
This commit is contained in:
Marc Mintel
2026-06-29 21:04:01 +02:00
parent 837567c1f4
commit cec08e3ab3
1 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/blocks/InteractiveMapPins.tsx
View File

@@ -1,12 +1,14 @@
'use client'; 'use client';
import React from 'react'; import React from 'react';
import { m, AnimatePresence, LazyMotion, domAnimation } from 'framer-motion'; import { m, AnimatePresence, LazyMotion } from 'framer-motion';
import { MapPin, CheckCircle2, ArrowUpRight } from 'lucide-react'; import { MapPin, CheckCircle2, ArrowUpRight } from 'lucide-react';
import Image from 'next/image'; import Image from 'next/image';
import Link from 'next/link'; import Link from 'next/link';
import { Location } from '@/lib/map-data'; import { Location } from '@/lib/map-data';
const loadFeatures = () => import('@/lib/framer-features').then(res => res.default);
const MinorNode = React.memo(({ loc, isActive, onEnter, onLeave }: { loc: Location, isActive: boolean, onEnter: (loc: Location) => void, onLeave: () => void }) => ( const MinorNode = React.memo(({ loc, isActive, onEnter, onLeave }: { loc: Location, isActive: boolean, onEnter: (loc: Location) => void, onLeave: () => void }) => (
<div <div
className={`absolute group/minor cursor-pointer w-8 h-8 md:w-5 md:h-5 flex items-center justify-center ${isActive ? 'z-[60]' : 'z-10 hover:z-30'}`} className={`absolute group/minor cursor-pointer w-8 h-8 md:w-5 md:h-5 flex items-center justify-center ${isActive ? 'z-[60]' : 'z-10 hover:z-30'}`}
@@ -76,7 +78,7 @@ export default function InteractiveMapPins({
handleMouseLeave: () => void handleMouseLeave: () => void
}) { }) {
return ( return (
<LazyMotion features={domAnimation}> <LazyMotion features={loadFeatures}>
{locations.filter(l => l.type === 'minor_node').map((loc, idx) => ( {locations.filter(l => l.type === 'minor_node').map((loc, idx) => (
<MinorNode <MinorNode
key={`minor-${loc.id || idx}`} key={`minor-${loc.id || idx}`}