# Cài đặt công cụ giám sát hiệu suất
npm install --save-dev webpack-bundle-analyzer
npm install --save-dev lighthouse

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  // ... cấu hình khác
  plugins: [
    process.env.ANALYZE && new BundleAnalyzerPlugin()
  ].filter(Boolean)
};

// package.json
{
  "scripts": {
    "analyze": "ANALYZE=true npm run build"
  }
}

// App.js - Tất cả đều được nhập trước
import Dashboard from './components/Dashboard';
import Analytics from './components/Analytics';
import Reports from './components/Reports';
import Settings from './components/Settings';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/analytics" element={<Analytics />} />
        <Route path="/reports" element={<Reports />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Router>
  );
}

// App.js - Tải lười các thành phần của route
import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./components/Dashboard'));
const Analytics = lazy(() => import('./components/Analytics'));
const Reports = lazy(() => import('./components/Reports'));
const Settings = lazy(() => import('./components/Settings'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div className="loading-spinner">Đang tải...</div>}>
        <Routes>
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/analytics" element={<Analytics />} />
          <Route path="/reports" element={<Reports />} />
          <Route path="/settings" element={<Settings />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

// Trước - Tái render trên mỗi lần cập nhật của cha
const UserCard = ({ user, onEdit }) => {
  return (
    <div className="user-card">
      <img src={user.avatar} alt={user.name} />
      <h3>{user.name}</h3>
      <button onClick={() => onEdit(user.id)}>Chỉnh sửa</button>
    </div>
  );
};

// Sau - Chỉ tái render khi dữ liệu người dùng thay đổi
const UserCard = React.memo(({ user, onEdit }) => {
  return (
    <div className="user-card">
      <img src={user.avatar} alt={user.name} />
      <h3>{user.name}</h3>
      <button onClick={() => onEdit(user.id)}>Chỉnh sửa</button>
    </div>
  );
}, (prevProps, nextProps) => {
  return prevProps.user.id === nextProps.user.id && 
         prevProps.user.name === nextProps.user.name;
});

// Trước - Tính toán lại trên mỗi lần render
const Dashboard = ({ data }) => {
  const processedData = data.map(item => ({
    ...item,
    calculations: heavyCalculation(item)
  }));

  return <Chart data={processedData} />;
};

// Sau - Chỉ tính toán lại khi dữ liệu thay đổi
const Dashboard = ({ data }) => {
  const processedData = useMemo(() => 
    data.map(item => ({
      ...item,
      calculations: heavyCalculation(item)
    })), [data]
  );

  return <Chart data={processedData} />;
};

// Hook tùy chỉnh cho tải hình ảnh tiến bộ
const useProgressiveImage = (src) => {
  const [loading, setLoading] = useState(true);
  const [imgSrc, setImgSrc] = useState(null);

  useEffect(() => {
    const img = new Image();
    img.onload = () => {
      setImgSrc(src);
      setLoading(false);
    };
    img.src = src;
  }, [src]);

  return { loading, imgSrc };
};

// Sử dụng thành phần
const ImageComponent = ({ src, placeholder, alt }) => {
  const { loading, imgSrc } = useProgressiveImage(src);

  return (
    <div className="image-container">
      {loading ? (
        <img src={placeholder} alt={alt} className="placeholder" />
      ) : (
        <img src={imgSrc} alt={alt} className="loaded" />
      )}
    </div>
  );
};

// Hook tùy chỉnh để ngăn chặn gọi API trùng lặp
const useApiCall = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const requestCache = useRef(new Map());

  const fetchData = useCallback(async () => {
    if (requestCache.current.has(url)) {
      return requestCache.current.get(url);
    }

    setLoading(true);
    try {
      const response = await fetch(url);
      const result = await response.json();

      requestCache.current.set(url, result);
      setData(result);
      return result;
    } catch (error) {
      console.error('Gọi API thất bại:', error);
    } finally {
      setLoading(false);
    }
  }, [url]);

  return { data, loading, fetchData };
};

// Tiền lấy dữ liệu cho các trang có khả năng truy cập tiếp theo
const Dashboard = () => {
  const { data: currentData } = useApiCall('/api/dashboard');

  useEffect(() => {
    // Tiền lấy dữ liệu phân tích (người dùng có khả năng truy cập tiếp theo)
    const timer = setTimeout(() => {
      fetch('/api/analytics').then(response => response.json());
    }, 2000);

    return () => clearTimeout(timer);
  }, []);

  return <DashboardContent data={currentData} />;
};

// Trước - Nhập toàn bộ thư viện
import _ from 'lodash';
import moment from 'moment';

// Sau - Nhập chỉ những gì bạn cần
import { debounce, throttle } from 'lodash';
import dayjs from 'dayjs'; // Thay thế nhỏ hơn cho moment

// Tải thư viện biểu đồ nặng chỉ khi cần thiết
const ChartComponent = ({ data }) => {
  const [ChartLibrary, setChartLibrary] = useState(null);

  useEffect(() => {
    import('react-chartjs-2').then((module) => {
      setChartLibrary(() => module.Line);
    });
  }, []);

  if (!ChartLibrary) {
    return <div>Đang tải biểu đồ...</div>;
  }

  return <ChartLibrary data={data} />;
};

// public/sw.js - Chiến lược lưu trữ cơ bản
const CACHE_NAME = 'app-v1';
const urlsToCache = [
  '/',
  '/static/css/main.css',
  '/static/js/main.js'
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((response) => response || fetch(event.request))
  );
});

// utils/performance.js
export const measureComponentPerformance = (componentName) => {
  return function(WrappedComponent) {
    return function MeasuredComponent(props) {
      useEffect(() => {
        const startTime = performance.now();

        return () => {
          const endTime = performance.now();
          console.log(`${componentName} thời gian render: ${endTime - startTime}ms`);
        };
      });

      return <WrappedComponent {...props} />;
    };
  };
};

// Sử dụng
export default measureComponentPerformance('Dashboard')(Dashboard);