Development React JS Tutorials Web Development

Optimalisasi React JS Pake Code Splitting: Biar Web Lu Ngebut!

November 9, 2024 / November 9, 2024 by Yogi Nugraha | Leave a comment

Yo guys! Pernah gak sih ngerasa aplikasi React lu lemot banget pas loading? Apalagi kalo udah numpuk banyak fitur, bundle size membengkak, terus user pada komplain “kok loadingnya lama banget sih?” Nah, ini saatnya lu level up skill optimization lu dengan teknik code splitting!

Pain Points yang Sering Kita Temui:

Bundle JavaScript kegedean
First Load Performance lambret
Time to Interactive (TTI) yang bikin gregetan
Resource usage yang boros

Apa itu Code Splitting?

Code splitting itu kayak strategi “divide and conquer” buat JavaScript bundle lu. Daripada kirim satu file gede banget, mending dipecah-pecah jadi bundle yang lebih kecil dan di-load sesuai kebutuhan.

// Cara Jadul (Tanpa Code Splitting)
import BigComponent from './BigComponent';
 
// Cara Keren (Dengan Code Splitting)
const BigComponent = React.lazy(() => import('./BigComponent'));

Kapan Harus Pake Code Splitting?

Aplikasi lu udah gede dan kompleks
Ada fitur yang jarang dipake
Halaman dengan konten berat (charts, editors, etc.)
Routing dengan banyak pages

Implementasi Code Splitting

1. React.lazy() dan Suspense

// App.js
import React, { Suspense } from 'react';
 
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));
 
function App() {
  return (
    <Suspense fallback={<div>Loading bro...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

2. Route-Based Code Splitting

// Router.js
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import React, { Suspense } from 'react';
 
const Home = React.lazy(() => import('./pages/Home'));
const Dashboard = React.lazy(() => import('./pages/Dashboard'));
const Settings = React.lazy(() => import('./pages/Settings'));
 
function Router() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Sabar ya loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/settings" element={<Settings />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

Best Practices

1. Error Boundary Implementation

class ErrorBoundary extends React.Component {
  state = { hasError: false };
 
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
 
  render() {
    if (this.state.hasError) {
      return <div>Waduh error nih bro! <img draggable="false" role="img" class="emoji" alt="" src="https://s.w.org/images/core/emoji/15.1.0/svg/1f605.svg"></div>;
    }
    return this.props.children;
  }
}

2. Loading Strategy

// Pake preload hint
const ComponentA = React.lazy(() => import('./ComponentA'));
 
// Somewhere in your code
const preloadComponent = () => {
  const componentPromise = import('./ComponentA');
  // Component bakal ke-cache sama webpack
}

Case Study: E-commerce Dashboard

Sebelum Code Splitting:

Bundle Size: 2.5MB
First Load: 4.2s
Time to Interactive: 6.8s

Setelah Code Splitting:

Bundle Size: 800KB (initial load)
First Load: 1.8s
Time to Interactive: 3.2s

Tips Pro Buat Lu!

Chunk Names yang Jelas

const MyComponent = React.lazy(() => 
  import(/* webpackChunkName: "my-component" */ './MyComponent')
);

Preload Component Penting

// Pas user hover
<Link 
  onMouseEnter={() => import('./HeavyComponent')}
  to="/heavy-route"
>
  Go to Heavy Route
</Link>

Monitor Performance

// Install web-vitals
import { getCLS, getFID, getLCP } from 'web-vitals';
 
getCLS(console.log);
getFID(console.log);
getLCP(console.log);

Kesimpulan

Code splitting itu game changer buat performance React app lu! Key points yang perlu diinget:

Split bundle berdasarkan routes/features
Implement proper loading states
Handle errors dengan baik
Monitor performance metrics

Resources Buat Belajar Lebih Lanjut:

Nah, sekarang lu udah tau cara bikin React app ngebut pake code splitting! Tinggal praktekin aja di project lu. Keep coding, keep optimizing!

Tags: #ReactJS #WebPerformance #FrontEnd #WebDevelopment