에셋 번들링은 최신 웹 개발의 핵심 부분으로, 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
