웹 팩 및 vue를 사용하여 페이지 크기를 1,500% 늘리는 방법

이 기사에서는 저자가 Webpack과 VUE를 사용하여 CSS 파일의 크기를 극적으로 증가시키는 방법에 대한 이야기를 들려주고,이 문제를 개선 된 방법으로 해결했습니다. 이 기사는 증가하는 페이지 크기를 장려하는 대신 Bulma Framework 및 Vue CLI를 사용하는 과정에서 발생하는 아이러니 한 견해와 솔루션을 보여줍니다.

면책 조항 : 이 기사는 아이러니합니다. 저자는 자신이 독자보다 똑똑하다고 생각하지 않으며 웹 페이지의 크기를 높이는 것이 좋은 것이라고 생각하지 않습니다.

많은 기사에서 페이지 크기를 줄이는 방법 : 그림 최적화, 중복 CSS 규칙을 제거하는 등. 저자는 Walmart를 예를 들어 페이지 크기의 감소를 지적합니다.

JavaScript 최적화 제안 :

? ️ 구식 및 중복 종속성을 삭제합니까? 큰 종속성을 작은 종속성으로 대체 하시겠습니까? 오버 폴리필인지 확인하십시오. A/B 테스트 구성 신 코드 분할을 정리하십시오!

Walmart는 웹 사이트에서 이것을했습니다. JS 패키지는 69%감소합니다. 상호 작용 시간은 28%감소했습니다.

그러나 페이지 크기를 늘리는 방법을 가르치는 기사는 거의 없습니다. 저자는 관련 정보를 찾으려고했지만 글꼴 크기 증가에 관한 기사 만 찾았습니다.

예상치 못한 "체중 증가"

페이지 크기를 증가시키는 이유는 무엇입니까? 낮은 대역폭 사용자에게 좋은 일이 아닙니까? 저자는 겉보기에 합리적이지만 실제로는 약간 재미있는 이유를 제공합니다.

1. 당신은 기가비트 대역폭을 가지고 있으며 테네시에 살고 있습니다 (네트워크가 우수하다는 힌트).
2. 브라우저는 캐시가되며 웹 사이트를 한 번만 다운로드하면됩니다.
3. 당신은 "일을 위해 일하는 것이 아니라 인생을 위해 일하기 때문에 누군가가 당신의 웹 사이트를 방문하는지 상관하지 않습니다.

이러한 이유에 동의하면 저자는 CSS 크기를 1500%증가시키는 방법을 보여줍니다.

멋진 팁

저자는 프로젝트를 Bulma CSS 프레임 워크에 리팩토링 할 때이 문제를 발견했습니다. 초기 코드는 혼란 스러웠으며 Sass 코드는 "Housker"쇼의 장면과 같았습니다.

Bulma에는 모달 박스와 같은 기능이 포함되어 있습니다. 저자는 타사 VUE 구성 요소를 사용했습니다. 또한 성공적인 웹 사이트를위한 잘 알려진 필수 요소이므로 버거 메뉴도 있습니다.

재구성이 완료된 후 저자는 CSS 크기가 크게 증가한 것으로 나타났습니다. 초기 손으로 쓴 코드는 30KB (GZIP 압축 후)에 불과했으며 재구성 후 260KB에 도달했습니다. Vue Cli도 이것에 대해 경고했지만 저자는 그것을 무시했습니다.

저자는 프로젝트를 제작 환경에 배치하고 트위터 에서이 "업적"을 발표했습니다. Bulma의 제작자 인 Jeremy Thomas는 이에 응답하여 CSS 크기가 다수의 중복 스타일의 존재로 인해 증가했다고 지적했습니다.

문제는 있습니다

저자는 그가 CSS와 Sass에 대해 많이 모른다는 것을 인정합니다. VUE CLI 프로젝트를 사용할 때, 저자는 src/styles 폴더를 만들고 bulma-but-not-all-of-bulma-only-some-of-it.scss 파일을 배치하여 Bulma 구성 요소 중 일부를 가져옵니다. 그런 다음 파일을 Custom Sass site.scss 로 가져옵니다.

각 구성 요소에서 이러한 스타일을 사용하기 위해 저자는 Sarah Drasner의 블로그 게시물의 메소드를 사용하여 vue.config.js 파일을 수정하여 웹 팩 빌드 프로세스를 수정했습니다.

저자가 이해하지 못하는 것은이 접근법이 SASS를 각 VUE 구성 요소로 가져옵니다. Vue는 각 구성 요소에 data-v- 속성을 추가하므로 많은 중복 스타일이 발생합니다.

scoped 를 다루는 방법

Vue를 사용하면 스타일 범위를 data- 속성을 동적으로 삽입하여 구현하는 구성 요소로 제한 될 수 있습니다. 구성 요소에 스타일이 포함 된 SASS 파일을 가져 오면 VUE (WebPack을 통해) 네임 스페이스 이러한 스타일은 동적 data- 속성과 함께 제공됩니다.

가변 공유 문제

한 구성 요소에서 SASS 변수를 정의하고 다른 구성 요소에서 참조 할 수 없습니다.

Bulma 및 Vue 사용을위한 모범 사례

이 문제를 해결하기 위해 저자는 세 가지 파일의 파일을 사용하는 것이 좋습니다 : variables.scss (Import Bulma 변수), bulma-custom.scss (Import Bulma 구성 요소) 및 site.scss (Global Styles 정의)를 사용하는 것이 좋습니다. import site.scss 에 main.js 파일로 vue.config.js 파일에 variables.scss 추가합니다.

이런 식으로 Bulma는 전 세계적으로 사용할 수 있으며 각 구성 요소에서 모든 Bulma 변수에 액세스 할 수 있습니다. CSS 크기는 결국 크게 감소했습니다.

개선 된 솔루션

저자는 또한 VUE CLI 프로젝트에서 Bulma를 사용자 정의하는 방법을 설명하는 PR에 Bulma 문서를 제출했습니다.

위 내용은 웹 팩 및 vue를 사용하여 페이지 크기를 1,500% 늘리는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!