코드 분할이 있는 Vue/Webpack 웹 앱에서 Sass/스타일시트 파일을 부분적으로 로드하는 방법

코드 분할이 있는 Vue/Webpack 웹 앱에서 Sass/스타일시트 파일을 부분적으로 로드하는 방법

나는 Vue 2와 Webpack 3으로 만들어진 웹 앱에 코드 분할 기술을 사용하고 있다.JS청크는 비동기식으로 잘 작동해 등대 성능 감사에서좋은 점수를 준다.

그러나 DevTools에서 '커버리지' 탭을 열면 CSS 스타일의 약 99%가 첫 번째 만족스러운 페인트(즉, 첫 페이지 로드)에서 사용되지 않는 것을 알 수 있다.그 이유는 간단하다: 나의main.scss파일(아래 그림 참조)은 프로젝트의 모든 스타일시트를 가져와 렌더링-수정 코드의 큰 청크를 생성한다.나는 Sass 파일의 일반적이고 인기 있는 디자인 패턴을 따라왔지만, Vue가 사용하는 컴포넌트 기반 패턴에는 확실히 잘 맞지 않는다.

'.vue' 단일 파일 구성 요소에서 구성 요소 스타일시트를 로드하려고 했지만 웹 팩이 이 파일을 주 파일보다 먼저 구문 분석하기 때문에 다른 문제가 발생함App.vue파일을 가져올 위치main.scss, 코드 전체에서 사용되는 모든 Sass 변수는 'clared undeclared'로 되어, 따라서 오류들을 사방에 던진다.

나의main.scss파일 모양은 다음과 같다.

//base style
@import 'base/variables';
@import 'base/fonts';
@import 'base/tools';
@import 'base/typography';
@import 'base/general';
@import 'base/buttons';
@import 'base/elements';
// ...

//components style
@import 'components/topnav';
@import 'components/header';
@import 'components/sidemenu';
@import 'components/footer';
@import 'components/login';
// ...

//responsiveness
@import 'base/responsiveness';
// cross browser styles
@import 'base/cross-browser';

다른 JS 청크처럼 이 큰 파일을 분할하고 그에 따라 스타일을 로드하고 필요할 때만 비동기식으로 로드할 수 있는 방법이 있는가?

나는 특별한 웹팩 로더/플러그인이 나에게 이런 일을 해 줄 것이라고 생각하지 않으며, 나는 리팩토링을 가장 적게 할 수 있는 해결책을 찾고 있다.이 모든 시련은 나의 인터랙티브 시간을 약 6-7초로 증가시키고 있다.

따라서 몇 가지 오류와 실패 후에, 그리고 이 페이지를 부에로더의 문서에서 찾은 후, 나는 다음과 같이 분해된 그럴듯한 해결책을 찾은 것 같다.

• 꼭 가지다sass-loader그리고node-sass설치된.
• 위의 링크에서 설명서에 제시된 대로 일반 웹 팩 구성을 편집하십시오.예를 들어, SASS 변수 파일 또는 원하는 다른 일반 스타일 시트(main.scss...)를 포함하려면 다음을 수행하십시오.

         {
            loader: 'sass-loader',
            options: {
              data: `path/to/_variables.scss`,
              includePaths:[__dirname, 'src']
            }
          }

• 그 다음, 나는 그 집을 부수었다.main.scssfile: 기본 스타일(예: Sass 변수, 글꼴, 혼합물, 응답 스타일, 양식 등)의 가져오기만 남겨두십시오.
• 나는 통상적인 수입품들을 없앴다.main.scss줄을 지어 들어오다App.vueapp.js 청크에 있는 엄청난 700KB 로드를 자동으로 제거했다.
• 마지막으로 각 경로/뷰 템플릿에 해당하는 구성요소 스타일시트를 다음과 같은 형태로 추가했다.

<style lang="scss" scoped>
@import 'path/to/main.scss';  // **IF YOU HAVE `vue-cli` VERSION > 3.X, THEN YOU DON'T HAVE TO IMPORT GENERAL STYLE SHEETS SUCH AS THIS**
@import 'path/to/component/component.scss';
...
</style>

기본 스타일시트 파일을 가져오는 것은 비차단 코드이기 때문에 큰 스타일시트가 스레드를 차단하고 페이지를 너무 오랫동안 비워두었던 이전과는 다르게 실행 스레드를 계속 실행하기 때문이다.분명히, Vue는 자체 .vue 파일에서 코드 분할을 즉시 지원하여 이 모든 것을 "레깃"하고 매우 빠르게 만든다.

결과?

Lighthouse 성능 점수가 95-97이라는 견고한 범위에 도달했기 때문에 초기 페이지 로드는 1.5초 미만이었다(4.5-6).JS나 텍스트 압축도 활성화하지 않은 개발 환경에서!이전에, 점수는 45-55점이었다.다른 환경에 배포하여 더 많은 통계를 얻기를 기대하지만, 더 많은 튜닝이 구성되는 환경에서는 매우 유망한 솔루션으로 보인다.

참조URL: https://stackoverflow.com/questions/54378843/how-to-partially-load-sass-stylesheet-files-in-a-vue-webpack-webapp-with-code-sp