[Vue.js] static VS assets

문제❓

• highchart map에 map data를 따로 넣어주는 코드가 너무 길어 json 파일에 저장 후 호출을 하려고 파일을 저장할 위치를 정하고 있었습니다. 이때에 json파일을 static에 넣어야 하는지 assets에 넣어야 하는지 명확하게 판단이 서지 않아 이참에 두 폴더의 차이점과 활용방법에 대해 정리해 보겠습니다.

static 폴더와 assets 폴더는 Vue CLI 기반의 Vue.js 프로젝트에서 사용되는 두 가지 다른 폴더입니다.

static 폴더

• static 폴더는 정적인 파일을 저장하는 용도로 사용됩니다.
• 해당 폴더에 있는 파일은 웹팩 번들링 과정에서 변환되지 않고 그대로 유지됩니다.
• 주로 이미지 파일, 외부 라이브러리 파일 등과 같이 웹팩에 의한 변환 또는 모듈 번들링이 필요 없는 파일을 저장합니다.
• 프로젝트에서 접근할 수 있는 경로는 루트('/')를 기준으로 합니다. 예를 들어, static 폴더에 static/img/logo.png 파일이 있다면, 해당 파일은 웹에서 '/img/logo.png' 경로로 접근할 수 있습니다.

assets 폴더

• assets 폴더는 프로젝트에서 사용되는 리소스 파일을 저장하는 폴더입니다.
• 해당 폴더에는 이미지 파일, 폰트 파일, 스타일시트 파일 등과 같은 프로젝트에서 사용되는 모든 리소스 파일을 저장합니다.
• assets 폴더에 있는 파일들은 웹팩에 의해 모듈 번들링 과정에서 로드되고 처리됩니다.
• 주로 컴포넌트에서 사용되는 리소스 파일을 저장하고, @나 상대경로(./ 또는 ../)를 사용하여 해당 리소스 파일을 참조합니다.
• 예를 들어, assets 폴더에 assets/img/logo.png 파일이 있다면, 해당 파일을 Vue 컴포넌트에서 참조할 때는 @/assets/img/logo.png 또는 ./assets/img/logo.png과 같이 사용할 수 있습니다.

즉 static은 원본 데이터를 그대로 제공을하고 assets는 번들링되고 압축되어 최적화된 형태로 제공을 합니다.

그렇다면 웹 로딩시에 속도차이가 존재할까? ❌

• 정적(static) 폴더에 있는 이미지 파일을 브라우저에서 호출할 때와 assets 폴더에 있는 이미지 파일을 호출할 때의 시간 차이는 일반적으로 크게 미미합니다.
• 정적 폴더에 있는 이미지 파일은 웹 서버에 의해 직접 제공되기 때문에 브라우저는 해당 이미지 파일을 별도로 요청하고 받아옵니다. 이미지 파일이 웹 서버에서 바로 제공되기 때문에 로딩 속도에는 큰 차이가 없습니다. 정적 폴더에 있는 이미지 파일은 웹 서버가 정적 파일들을 효율적으로 제공하기 위해 캐싱 등의 기법을 사용하기도 하므로 오히려 빠를 수도 있습니다.
• 반면에 assets 폴더에 있는 이미지 파일은 웹팩(Webpack) 등의 번들러를 통해 번들링되고 압축되어 최적화된 형태로 제공됩니다. 번들링된 이미지 파일은 JavaScript나 CSS 파일과 함께 하나의 번들 파일로 처리되므로 네트워크 요청의 수가 줄어들어 로딩 속도가 개선될 수 있습니다.
• 결론적으로, 정적 폴더와 assets 폴더에 이미지 파일을 각각 저장하는 경우에는 로딩 속도에 큰 차이는 없습니다. 이미지 파일의 크기, 압축 여부, 캐싱 설정 등이 로딩 속도에 영향을 미치는 요소이므로 이러한 측면을 고려하여 이미지 파일을 관리하는 것이 중요합니다.

static VS assets

• static 폴더의 파일은 웹 브라우저에 의해 캐싱될 수 있습니다. 캐싱은 이미지 파일을 임시로 저장하여 다음 요청 시에 빠르게 불러올 수 있게 도와주는 기능입니다. 자주 변경되는 이미지 파일을 static 폴더에 넣으면, 변경사항이 즉시 반영되지 않고 이전 캐시된 파일이 계속 사용될 수 있습니다.
• static 폴더는 웹 애플리케이션의 루트 경로에 위치하며, 그 안에 있는 파일들은 웹팩 등의 빌드 도구를 거치지 않고 그대로 서비스됩니다. 이는 이미지, 폰트, 비디오 파일 등과 같이 변환되지 않고 그대로 사용해야 하는 파일들에 적합합니다.
• 한편, assets 폴더는 웹팩과 같은 빌드 도구에 의해 처리되는 파일들을 저장하는 공간입니다. 주로 CSS, SCSS, JavaScript 등과 같이 빌드 도구가 변환 및 번들링하는 파일들이 포함됩니다.
• 두 폴더의 주요 차이점은 빌드 도구의 처리 여부입니다. static 폴더에 있는 파일은 빌드 도구를 거치지 않고 그대로 서비스되지만, assets 폴더에 있는 파일은 빌드 도구를 통해 변환 및 번들링되어 최적화되고 사용됩니다.
• 따라서, 자주 변경되는 파일은 assets 폴더에 저장하여 빌드 도구를 활용하여 최적화된 형태로 사용하는 것이 좋습니다. 반면에 변경이 적거나 변환 과정이 필요하지 않은 파일은 static 폴더에 저장하여 간편하게 서비스할 수 있습니다.

정리

static 폴더

• 웹팩에 의한 번들링이 되지 않고 원본 그대로를 제공한다.
• 브라우저에 의해 캐싱처리가 되기 때문에 다음 호출 시 빠르게 호출 될 수 있다.
• 많은 데이터 들어 있어도 서버 빌드 시 속도에 영향을 주지 않는다.
• 데이터 변경 시 이전 캐시가 남아있을 수 있기 때문에 자주 변경되는 데이터는 이곳에넣지 않는게 좋다.
• 대표적으로 이미지 파일, 폰트 파일, favicon 등이 static 폴더에 저장된다.

assets 폴더

• 웹팩에 의한 번들링이 되어 파일이 변환되고 최적화 된다.
• 소스 코드와 함께 번들링되어야 하는 경우에 사용
• 데이터가 많이 있을 시 번들링이 되어야 하기 때문에 서버 빌드 시 오래 걸릴 수 있다.
• 데이터가 자주 변경되어도 빌드 시 번들링되기 때문에 즉시 변경이 이루어진다.
• JavaScript, CSS, SCSS, Vue 파일 등과 같은 소스 코드에 의해 참조 되는 파일들이 assets에 저장된다.

마지막

• 이렇게 두 개의 폴더를 나누어 사용함으로써, 개발자는 구조적으로 리소스를 관리하고, 번들링 과정에서 필요한 변환 및 최적화를 수행할 수 있습니다. 또한, static 폴더에 저장된 리소스는 웹 서버에 직접 제공되므로 캐싱 등의 웹 서버 기능을 활용하여 성능을 개선할 수 있습니다. 반면, assets 폴더에 저장된 리소스는 번들링 과정을 통해 압축, 최적화되므로 네트워크 요청의 수를 줄이고 로딩 속도를 향상시킬 수 있습니다.