コミュニティ・ウィキ & フォーラム
フロントエンド開発
2024年1月
アクティブな投稿者 42人
Optimize your web apps for speed and efficiency
Split your bundle into smaller chunks to reduce initial load time and improve performance.
// Dynamic import with React.lazy
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));
function App() {
return (
<Suspense fallback={<Loading />}>
<HeavyComponent />
</Suspense>
);
}
// Route-based code splitting
const routes = [
{
path: '/dashboard',
component: React.lazy(() => import('./Dashboard')),
},
{
path: '/profile',
component: React.lazy(() => import('./Profile')),
},
];Optimize images for better performance using modern formats, lazy loading, and responsive images.
<!-- Responsive images with srcset -->
<img
src="small.jpg"
srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"
alt="Responsive image"
loading="lazy"
/>
<!-- Next.js Image component -->
<Image
src="/photo.jpg"
alt="Optimized image"
width={800}
height={600}
loading="lazy"
placeholder="blur"
/>Use React.memo, useMemo, and useCallback to prevent unnecessary re-renders and expensive calculations.
// Memoize component
const ExpensiveComponent = React.memo(({ data }) => {
return <div>{/* render */}</div>;
});
// Memoize expensive calculation
function Component({ items }) {
const total = useMemo(() => {
return items.reduce((sum, item) => sum + item.price, 0);
}, [items]);
return <div>Total: {total}</div>;
}
// Memoize callback
function Parent() {
const handleClick = useCallback(() => {
console.log('clicked');
}, []);
return <Child onClick={handleClick} />;
}まだコメントはありません。最初のディスカッションを始めましょう！