Laravel 프론트에 관해서 (Vite)

Laravel의 프론트 개발은 다양한 방법으로 가능하다.

Laravel-ui
Laravel Breeze
Laravel Jetstream(Livewire)
Laravel Jetstream(Inertia (Vue.js))

Laravel 9.18부터 내부적으로 사용되었던 webpack이 Vite가 되었다.

 

Vite는 프랑스어로 빠르다 라는 의미

개발자는 Even You

2022/6/28부터 webpack을 대신해서 Laravel에 탑재

Laravel 빌트 툴 탑재기간

2015/2 Laravel 5.0 Laravel Elixir (Gulp)

2017/1 Laravel 5.4 Laravel Mix (webpack)

2022/6/28 Laravel 9.18 Vite로 변경

webpack와 vite차이

webpack

빌드시에 전체 의존관계를 해석 후 빌드. 시간이 걸림

 

vite

로컬환경은 의존관계를 해석 후 pre-bundle만 실행

의존관계는 Go의 esbuild를 사용 (기존보다 10~100배 빠름)

빠른 핫 모듈 교환 (HMR) : 라이브 서버 처럼 코드 변환의 반영이 빠름

NativeESM(ES Modules) ECMAScript사양으로서 정의된 모듈 시트템 (import로 소스코드를 읽어들여 고속서버 실현)

 

package.json 차이

vite를 쓸경우

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@inertiajs/inertia": "^0.11.0",
        "@inertiajs/inertia-vue3": "^0.6.0",
        "@inertiajs/vue3": "^1.0.0",
        "@tailwindcss/forms": "^0.5.3",
        "@vitejs/plugin-vue": "^4.0.0",
        "autoprefixer": "^10.4.12",
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.2",
        "lodash": "^4.17.19",
        "postcss": "^8.4.18",
        "tailwindcss": "^3.2.1",
        "vite": "^4.0.0",
        "vue": "^3.2.41"
    },

webpack를 쓸경우

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14"
    }
}

설정 파일

vite.config.js 랑 webpack.mix.js로 다르다.

 

npm run build를 하면 생성되는 결과

vite의 경우

public/build/assets 폴더가 생김

 

webpack의 경우

public밑에 css, images, js 폴더가 생김

 

vite의 컴파일

개발용 서버

npm run dev

-> 프론트측 서버이기 때문에 css, javascript 반영

-> 백엔드측은 php artisan serve기동 필요

 

프로덕트용 빌드

npm run build