두 플러그인의 차이
웹팩을 사용하게 되면서 style-loader는 문서의 스타일 태그 안에 스타일링을, MiniCssExtractPlugin은 별도의 css 파일로 번들링한다는 차이점은 인지하고 있었다.
그런데 특정 프로젝트에 최적화하려면 어떤 플러그인을 써야 되는 지에 대해 의문점이 들었다🤔🤔🤔
스타일 태그
스타일 태그로 스타일링을 주입하게 되면, 따로 CSS 파일을 요청하지 않기 때문에, 페이지 랜딩 속도가 비교적 빠르다.
따라서, 대용량 트래픽을 감당해야 하거나 네이버, 다음과 같이 페이지 랜딩 속도가 빨라야 하는 검색 포털 사이트에 적합하다.
그러나, 사용하지 않는 인라인 스타일들도 같이 받는다는 점에서 비효율적일 수 있다.
CSS 파일
css 파일로 스타일링 하게 되면, 문서가 css 파일을 요청하게 되고, 이를 불러오기 위해 통신이 다시 일어나게 된다.
따라서, 랜딩 속도가 느려지게 된다. CSSOM 트리가 그 만큼 늦게 그려지기 때문이겠지🙄🙄
그러나, 해당 문서가 요청하는 파일(즉 스타일링)만 가져온다는 점은 스타일 태그에 비해 좋은 것 같다.
내가 생각했을 때 베스트
만약 SPA라면, style-loader가 베스트일 것 같다. 왜냐하면, 모든 스타일들을 사용할 가능성이 많기 때문이다.
그러나, 특정 페이지만이 사용하는 css 파일의 용량이 클 경우라면, MiniCssExtractPlugin이 베스트일 것이다!
20210622 ~