[Issues] Vite 번들링 이슈 - 단일 index.html 엔트리 포인트

1. 이슈 상황

• Vite 번들러 사용
• HTML, CSS, Vanilla JavaScript로 SPA 개발
• 프로필 사진 컴포넌트를 헤더 메뉴링크에 붙여 테스트 중이었다
• 구현된 라우팅 함수를 통해 해당 링크로 이동 시 화면전환 되고,
• HistoryAPI를 이용해 직접 주소창 입력을 통한 화면전환이 가능했다.

 

그런데 새로고침을 하고보니, 프로필이미지를 붙인 페이지의 css가 깨져버림

 

 

해당 에러(사파리 브라우저 콘솔)

• 밑에 빨간 에러를 보면 저기 경로로 css파일을 찾지 못했다고 나옴(해당 파일을 지워서 이미 존재하지 않음)

Did not parse stylesheet at 'http://localhost:5173/src/pages/clara-shin/css/ProfileImage.css' 
because non CSS MIME types are not allowed in strict mode.

 

 

2. 어떻게 해결?

 

<link rel="stylesheet" href="/src/pages/clara-shin/css/ProfileImage.css" />

 

 

👩🏻‍💻 이슈 분석

• 근본적인 문제는,  index.html 과 동일한 레벨에 또다른 html 파일이 있을 경우, 새로고침이 되었을 때 이것 또한 읽게 되어 해당 html파일에 명시된 link태그의 css가 없게 되면서 깨지는 거였다.
• 폴더구조 보면 index.html과 동일한 depth에 profile-image.html이 있고 여길 들여다보면 <link rel="stylesheet" href="/src/pages/clara-shin/css/ProfileImage.css" /> 를 볼 수 있다

🔥 여기서 궁금해지는 점: Vite는 어떻게 동작할까?

• Vite는 기본적으로 index.html 파일을 엔트리 포인트로 사용하여 프로젝트를 빌드한다.
• Vite는 index.html을 통해 애플리케이션의 구조와 필요한 리소스를 파악하고, 이를 기반으로 번들링을 수행한다.
• Vite는 단일 페이지 애플리케이션(SPA)을 만드는 데 최적화되어 있기 때문에, 보통 하나의 HTML 파일만 사용된다.

🔥 다른 HTML 파일을 사용할 때 발생하는 문제는,

• Vite가 기본적으로 index.html을 기준으로 리소스를 처리하기 때문에, 다른 HTML 파일에 대한 처리가 제대로 이루어지지 않는 경우가 많음
• 특히, 다른 HTML 파일에 잘못된 경로가 포함되어 있거나, 해당 파일에서 필요한 리소스가 누락된 경우 이러한 문제가 발생할 수 있음

 

👩🏻‍💻 이슈 해결

• 위의 폴더 구조에서, 만약 사용자가 /profile-image 로 접속(주소창에 경로 직접입력 또는 새로고침)하면 결과적으로 index.html을 사용자 브라우저로 전송하는게 아니라 profile-image.html을 사용자 브라우저로 전송했던 거였음
• index.html을 제외한 나머지 html를 모두 삭제함
• (나는 profile-image.html 한개뿐이었지만 index.html 하나만을 제외하고 다 지워야 함)
• 이후, 다시 npm run dev, npm run server 해보니 새로고침 해도 프로필 이미지 컴포넌트 css가 깨지지 않고 잘 나옴

 

 

 

 

📚 알게된 점 [1]

 

Vite의 번들링 프로세스

1. Entry Point: Vite는 기본적으로 index.html을 엔트리 포인트로 사용
2. HTML 파일 처리: index.html 파일을 읽고, <script> 및 <link> 태그를 파싱하여 애플리케이션의 종속성을 분석
3. Dependency Graph: 종속성을 기반으로 디펜던시 그래프를 생성. 이는 Vite의 빠른 핫 모듈 교체(HMR) 기능을 가능하게 함
4. Dev Server: 개발 서버를 시작하고, 소스 파일에 대한 요청이 있을 때마다 필요한 파일을 변환하고 제공하여 개발자가 변경 사항을 즉시 확인할 수 있도록 함
5. Build: 배포를 위해 빌드할 때는 모든 종속성을 최적화하고 번들링하여 성능을 향상시킴

다른 HTML 파일 사용 방법

여러 HTML 파일을 사용하려면 Vite 설정을 커스터마이징해야 한다. 예를 들어, vite.config.js 파일에서 rollupOptions를 사용하여 여러 엔트리 포인트를 지정할 수 있다.

// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: 'index.html',
        profile: 'profile-image.html' // 추가 HTML 파일
      }
    }
  }
});

 

이 설정을 통해 Vite는 index.html뿐만 아니라 profile-image.html도 엔트리 포인트로 사용하여 빌드한다. 그러나 이러한 경우 각 HTML 파일이 필요한 CSS 및 JS 파일을 올바르게 참조하는지 확인해야 한다.

 

요약

• Vite는 기본적으로 index.html을 엔트리 포인트로 사용하여 SPA를 빌드
• 추가 HTML 파일을 사용할 때는 Vite 설정을 수정하여 엔트리 포인트로 지정할 수 있음
• 각 HTML 파일이 필요한 리소스를 올바르게 참조하는지 확인해야 함
• 추가적인 HTML 파일을 사용할 때 발생하는 문제는 리소스 경로 문제나 Vite의 기본 설정으로 인해 발생할 수 있음

 

📚 궁금한 점[1]

• NEXT.js가 SSR과 SG가 Vite와 동일한 방식인가?
• 각 사용자 요청마다 해당하는 요청에 맞는 html을 next.js서버에서 만들고 사용자의 컴퓨터에 전송한다.