Laravel Mix 대 Vite: Laravel이 Vite로 전환한 이유
- Linda Hamilton원래의
- 2024-11-10 06:37:02352검색
에셋 번들링은 최신 웹 개발의 핵심 부분으로, CSS, JavaScript 및 기타 리소스를 최적화하고 관리하는 데 도움이 됩니다. 수년 동안 Laravel Mix는 이 프로세스를 간소화했지만 JavaScript 도구가 발전함에 따라 Laravel은 Laravel 11의 기본값으로 Vite로 전환했습니다.
그러면 Laravel은 왜 이런 전환을 하게 되었나요?
성능과 속도
Vite는 개발 속도와 생산 성능이라는 두 가지 주요 사항에 중점을 둡니다. 빌드를 기다리는 데 지쳤다면 Vite의 즉각적인 피드백은 신선한 공기를 마시는 것처럼 느껴질 것입니다. 핫 모듈 교체(HMR)를 통해 Vite의 개발 서버는 변경 사항을 실시간으로 전달하므로 전체 페이지를 새로 고치지 않고도 즉시 업데이트를 확인할 수 있습니다. 이러한 즉각적인 피드백은 더욱 빠르고 즐거운 개발 경험을 선사합니다.
Laravel Mix는 이 접근 방식을 사용하며 상당한 초기 번들링 시간이 필요하므로 서버가 준비되기까지 지연이 발생합니다.
이 ESM 기반 접근 방식은 전체 번들링 프로세스를 방지하므로 개발 속도가 훨씬 빠릅니다. Vite는 이 접근 방식을 사용하여 개발자가 전체 번들을 기다리지 않고 즉시 변경 사항을 확인할 수 있도록 합니다.
(사진은 Vite 공식 문서에서 발췌)
프로덕션 빌드의 경우 Vite는 Rollup을 번들러로 사용하여 코드를 최적화하고 축소하여 빠른 성능을 보장합니다. 이를 통해 Vite는 코딩 중 속도를 위한 번들 없는 개발과 최적화된 프로덕션 빌드를 위한 기존 번들링이라는 두 가지 장점을 모두 제공할 수 있습니다.
최신 자바스크립트 지원
Vite는 나무 흔들기와 코드 분할에도 뛰어납니다. Vite는 롤업을 활용하여 최적화된 프로덕션 번들을 생성하고, 사용되지 않는 코드를 제거하고 필요에 따라 자산을 분할합니다. 결과적으로 앱의 성능을 향상시키는 더 작고 더 빠르게 로드되는 번들이 탄생합니다.
향상된 개발자 경험
Vite의 구성 프로세스는 매우 간단합니다. 구성이 조밀하고 복잡해질 수 있는 Webpack과 달리 Vite의 vite.config.js 파일은 광범위한 번들러 경험이 없더라도 쉽게 읽고 사용자 정의할 수 있습니다.
또한 Vite는 Vue 및 React와 같은 널리 사용되는 프레임워크와 원활하게 작동하도록 제작되었습니다. 이러한 프레임워크는 Vite의 HMR 및 최적화된 개발 환경의 이점도 제공하므로 프런트 엔드가 많은 Laravel 프로젝트에서 보다 효율적으로 작업할 수 있습니다.
미래 보장 및 커뮤니티 채택
JavaScript 생태계는 빠르게 발전하고 있으며 Vite는 탄탄한 기반을 확보했습니다. 지속적인 개선과 풍부한 플러그인 리소스를 제공하는 크고 활동적인 커뮤니티를 통해 널리 채택되고 지원됩니다. Vite의 디자인은 프런트 엔드 개발이 향하는 방향과 잘 일치하므로 프로젝트의 미래 경쟁력을 확보하려는 경우 현명한 선택이 됩니다.
Vite를 채택하기로 한 Laravel의 결정은 최신 표준과의 명확한 일치를 보여주며 Laravel 프로젝트가 최신 프런트엔드 기술과 계속 호환되도록 포지셔닝합니다.
라라벨 통합
Laravel의 Vite 플러그인에는 블레이드 템플릿용 @vite와 같은 편리한 도우미 기능이 포함되어 자산 버전 관리 및 캐시 무효화를 자동으로 처리합니다. @vite('resources/css/app.css')만 사용하면 오래된 캐시 문제에 대한 걱정 없이 CSS 파일을 연결할 수 있습니다.
Laravel Vue 프로젝트에 대해 vite.config.js를 설정하는 방법은 다음과 같습니다.
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
});
그리고 블레이드에서는 다음과 같이 합니다.
<!DOCTYPE html>
<html>
<head>
@vite('resources/css/app.css')
</head>
<body>
<h1>Hello, Vite!</h1>
</body>
</html>
그리고 이제 Vite에 초점을 맞춘 Laravel의 공식 지원과 문서를 통해 이 도구를 최대한 활용하는 데 도움이 되는 일관된 지침과 리소스를 찾을 수 있습니다.
요약하자면 Vite는 최신 Laravel 프로젝트에 필요한 속도, 단순성 및 미래 지향적 기능을 제공합니다. Laravel 11에서 Vite를 기본값으로 설정함으로써 Laravel은 특히 JavaScript 및 웹 개발 표준이 계속 발전함에 따라 개발자가 더 빠르고, 더 간결하며, 더 효율적인 애플리케이션을 구축할 수 있도록 지원합니다. 더 많은 통찰력을 얻으려면 Laravel의 공식 문서를 살펴보고 지금 Vite를 시작하세요!
위 내용은 Laravel Mix 대 Vite: Laravel이 Vite로 전환한 이유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!