프런트 엔드 코드를 줄이는 방법

여기에서는 특히 css 코드를 줄이기 위해 프런트 엔드 코드 베이스를 줄이기 위한 몇 가지 접근 방식을 소개합니다.

순풍

링크: tailwindcss

tailwindcss는 빠르고 유연하며 안정적인 CSS 클래스를 제공합니다. tailwind를 사용하면 CSS 코드 작성 시간을 절약할 수 있습니다.

예를 들어 truncate:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

프로덕션에서 CSS 코드를 최적화하려면

cssnano에 언급된 Brotli 및 tailwind docs 참조

CSS 검사기

링크: css-checker

중복된 CSS 코드를 찾는 방법이 궁금하십니까? 모든 css 및 스타일 구성 요소 코드를 스캔하고 차이점이 있는 유사한 클래스를 표시하는 데 도움이 되는 자동 도구가 있습니다.

설치하려면:

npm install -g css-checker-kit

실행하려면:

css-checker

useSWR 사용

링크: useSWR

useSWR는 구성 요소 간의 구문 분석 상태를 줄이는 데 도움이 될 수 있습니다. 상태를 사용하려는 모든 위치에서 useSWR를 호출하기만 하면 됩니다.

useSWR는 또한 중복 요청을 줄이고 사용자가 다시 집중한 후 자동 가져오기를 줄이는 데 도움이 될 수 있습니다.

The name “SWR” is derived from stale-while-revalidate, a HTTP cache invalidation strategy popularized by HTTP RFC 5861. SWR is a strategy to first return the data from cache (stale), then send the fetch request (revalidate), and finally come with the up-to-date data.

사용 방법은 매우 간단합니다.

import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>failed to load</div>
  if (!data) return <div>loading...</div>
  return <div>hello {data.name}!</div>
}