React 애플리케이션을 최적화하려면 성능, 번들 크기 감소, 효율적인 렌더링 및 전반적인 사용자 경험에 초점을 맞춘 몇 가지 주요 전략을 사용할 수 있습니다. React와 관련된 최적화 기술은 다음과 같습니다.
코드 분할을 사용하면 전체 애플리케이션을 한 번에 로드하는 대신 필요에 따라 로드할 수 있는 작은 단위로 앱을 나눌 수 있습니다. 이렇게 하면 초기 로드 시간이 향상됩니다.
const LazyComponent = React.lazy(() => import('./Component')); function App() { return ( <react.suspense fallback="{<div">Loading...}> <lazycomponent></lazycomponent> </react.suspense> ); }
React 애플리케이션의 성능을 향상하려면 불필요한 재렌더링을 피하는 것이 중요합니다.
const MyComponent = React.memo(({ value }) => { return <div>{value}</div>; });
const computedValue = useMemo(() => expensiveComputation(value), [value]);
const handleClick = useCallback(() => { console.log('Clicked'); }, []);
불필요한 렌더링을 방지하는 방식으로 상태를 처리하면 성능이 크게 향상될 수 있습니다.
const [state, dispatch] = useReducer(reducer, initialState);
긴 목록이나 테이블을 렌더링하면 성능이 저하될 수 있습니다. 목록 가상화 기술을 사용하여 화면에 보이는 것만 렌더링하세요.
import { FixedSizeList as List } from 'react-window'; const MyList = ({ items }) => ( <list height="{500}" itemcount="{items.length}" itemsize="{35}" width="{300}"> {({ index, style }) => <div style="{style}">{items[index]}</div>} </list> );
애플리케이션이 번들 크기를 줄이는 데 사용되는 라이브러리 부분만 가져왔는지 확인하세요.
// Instead of this: import _ from 'lodash'; // Do this: import debounce from 'lodash/debounce';
이미지는 페이지에서 가장 큰 자산인 경우가 많습니다. 지연 로딩을 사용하면 이미지가 뷰포트에 나타날 때까지 이미지 로딩을 지연할 수 있습니다.
import LazyLoad from 'react-lazyload'; const ImageComponent = () => ( <lazyload height="{200}" once> <img src="image-url.jpg" alt="React 애플리케이션 최적화"> </lazyload> );
const LazyImage = ({ src, alt }) => { const [inView, setInView] = useState(false); const imgRef = useRef(null); useEffect(() => { const observer = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) { setInView(true); observer.disconnect(); } }); observer.observe(imgRef.current); }, []); return <img ref="{imgRef}" src="%7BinView" : alt="{alt}">; };
빌드 프로세스 중에 JavaScript 번들의 크기를 줄이려면 Terser 또는 Webpack에 내장된 축소 기능을 사용하세요.
Create React App은 프로덕션 빌드를 위한 코드를 자동으로 축소합니다.
npm run build
JavaScript 번들의 크기를 분석하여 개선할 수 있는 영역을 식별하세요.
npm install --save-dev webpack-bundle-analyzer
Webpack 구성에서:
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); module.exports = { plugins: [ new BundleAnalyzerPlugin() ] };
npm install @fullhuman/postcss-purgecss
PostCSS 구성 예:
const purgecss = require('@fullhuman/postcss-purgecss')({ content: ['./src/**/*.js', './public/index.html'], defaultExtractor: content => content.match(/[\w-/:]+(? <h3> 10. <strong>네트워크 요청 최적화</strong> </h3> <p>네트워크 요청 수를 줄이고 API 호출을 최적화하면 성능이 크게 향상될 수 있습니다.</p>
const fetchResults = debounce((query) => { // API call logic }, 300);
import useSWR from 'swr'; const fetcher = url => fetch(url).then(res => res.json()); const MyComponent = () => { const { data, error } = useSWR('/api/data', fetcher); if (error) return <div>Error loading data</div>; if (!data) return <div>Loading...</div>; return <div>{data.message}</div>; };
Avoid adding unnecessary elements to the DOM by using React Fragments ( and >) when wrapping multiple elements.
const MyComponent = () => ( <h1>Title</h1> <p>Content</p> > );
Use the React Developer Tools profiler to identify performance bottlenecks in your app.
Optimizing a React application requires careful attention to performance, bundle size, and rendering efficiency. By employing techniques like code splitting, memoization, lazy loading, tree shaking, and minimizing network requests, you can significantly improve the performance of your app. Make sure to regularly analyze and test your app’s performance to catch any potential inefficiencies.
위 내용은 React 애플리케이션 최적화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!