css <link rel... vs @import, javascript <script src... vs import

css나 js의 경우 여러 파일단위로 모듈화 해서 관리된다.
이를 실제 페이지에서 사용할 경우 html 태그(<link, <script)를 사용할 수 있지만
css의 경우 @import 를 사용할 수도 있고, javascript 의 경우 import 를 사용할 수도 있다.

이들은 상황에 따라 적절한 것을 선택해야 하기 때문에
각각의 차이와 필요한 상황에 대해 기록해둔다.

1. css <link rel...
html 페이지에서 해당 css 를 다운로드 할 때 사용한다.
특별한 점은 <link 가 여러개 선언되어 있을 경우 병렬로 다운로드 한다.
병렬로 진행되더라도 의존관계에 문제가 되진 않는다.
다운로드만 병렬로 수행되지 통합은 순서대로 된다.

2. css @import
css 파일 상단에 정의해서 해당 css를 import 받는다.
이는 <link 방식과 다르게 여러개 선언되어 있을 경우 직렬로 처리되기 때문에
처리 속도가 느리다.
미리 말하면 이런 이유 때문에 css 는 무조건 <link 를 사용하는게 낫다.

3. javascript <script src...
html 페이지에서 해당 js를 다운로드 할 때 사용한다.
js 파일 전체를 다운로드해서 그대로 브라우저에 적용된다.

특별할게 없다.

그냥 <script> 영역에 스크립트를 정의하는 것과 동일한 효과이다.

 

4. javascript import 

<script> 방식에 비해 장단점이 있는데

아래 링크로 대체한다.

https://ko.javascript.info/modules-intro