Vue 및 Webpack의 Tree shake, sideEffects 및 CSS: 사용하지 않는 구성 요소의 CSS 파일 로드
<p>우리는 Webpack을 사용할 때 Vue 단일 파일 구성 요소에서 CSS 트리 쉐이킹을 처리하는 올바른 방법을 찾으려고 노력하고 있습니다. </p>
<p>package.json에는 다음이 있습니다: <code>"sideEffects": ["*.css", "*.less","*.vue" ]</code> Vue 구성 요소가 로드되지 않아야 할 때 로드되는 것을 올바르게 방지하는 것 같습니다. 그러나 모든 단일 <code><style></code> 태그는 페이지에 로드됩니다. </p>
<p>일련의 내보내기를 나열하는 NPM 패키지에서 SFC를 로드합니다. 예를 들면 다음과 같습니다. </p>
<pre class="brush:php;toolbar:false;">'blah.vue'에서 어쩌고 저쩌고 내보내기;
blah2.vue'에서 blah2를 내보냅니다.
'blah3.vue'에서 blah3 내보내기;</pre>
<p>JavaScript에 'a-npm-package';</code>에서 <code>import { blah3 }만 있어도 세 가지 구성 요소에 대한 스타일이 모두 포함됩니다. Vue 구성 요소가 많기 때문에 사용되지 않은 CSS가 페이지에 추가됩니다. </p>
<p>이런 일이 발생하지 않도록 하려면 어떻게 해야 하나요? 스타일 중 1/10만 사용하더라도 스타일을 모두 페이지에 버리는 것보다 확실히 더 좋고 더 동적인 스타일 처리 방법이 있습니다. </p>
<p>감사합니다</p>
