JavaScript가 비활성화되었거나 사용할 수 없는 사용자를 위해 지연 로드된 중요한 CSS 폴백을 추가하는 Vite 플러그인 작성

내 Netlify build plugin to automatically split out and inline critical CSS에 personal website을 사용하고 있습니다.

인라인 크리티컬 CSS(페이지의 즉시 보이는 부분을 표시하는 데 필요한 CSS)는 '접이식 부분 위' 콘텐츠를 예측할 수 있는 정적 사이트에서 많은 의미가 있으며 첫 번째 콘텐츠가 있는 페인트를 빠르게 얻는 데 도움이 될 수 있습니다. 다운로드해야 하는 CSS가 적을수록 좋습니다(렌더링 차단 특성을 고려할 때).

가장 중요한 CSS 구현에서 우리는 중요한 CSS를 인라인하고 the media="print" and onload trick을 사용하여 나머지 CSS를 지연 로드합니다.

<link
  rel="stylesheet"
  href="/assets/styles.css"
  media="print"
  onload="this.media='all'"
/>

이 트릭에는 JavaScript가 필요하므로 JavaScript를 사용하지 않는 사용자를 위한 대안을 제공해야 합니다.

<noscript>
  <link 
    rel="stylesheet"
    href="/assets/styles.css"
  />
</noscript>

얼마 전에 저는 netlify-plugin-inline-critical-css Netlify 빌드 플러그인에서 사용하는 Critical 패키지의 버전(또는 구성)에 <noscript> 폴백이 없다는 것을 알았습니다. 그래서 이를 Eleventy 템플릿에 수동으로 추가했습니다. 큰 거래.

몇 주 전에 Vite를 사용하도록 전환했는데 내 폴백<noscript>이 작동을 멈춘 것을 확인했습니다. Vite는 CSS 및 JS의 이름을 변경하여 해시된 파일 이름을 지정한 다음 이러한 자산에 대한 링크를 감지하고 다음과 같이 해시된 버전을 사용하도록 경로를 업데이트합니다.

<link 
  rel="stylesheet"
  href="/assets/styles.833a7f93.css"
/>

그러나 Vite는 내 link 폴백 내에서 <noscript> 요소를 선택하지 않는 것 같습니다.

이 문제를 해결하기 위해 내부에 작은 Vite 플러그인(내 vite.config.js 파일에 인라인됨)을 사용하여 폴백을 직접 추가했습니다.

const { defineConfig } = require('vite');

const addNoscriptCss = () => {
  return {
    name: 'add-noscript-css',
    transformIndexHtml(html, { chunk }) {
      const tags = [];

      Array.from(chunk.viteMetadata.importedCss, assetUrl => {
        tags.push({
          tag: 'noscript',
          children: [
            {
              tag: 'link',
              attrs: {
                rel: 'stylesheet',
                href: `/${assetUrl}`,
              },
            },
          ],
          injectTo: 'body',
        });
      });

      return {
        html,
        tags,
      };
    },
  };
};

module.exports = defineConfig({
  plugins: [
    addNoscriptCss(),
  ],
});

이 플러그인은 생성된 HTML 파일을 가져오고 Vite가 페이지에서 인식하는 모든 CSS 파일에 대한 폴백<noscript>을 추가합니다.

정말 간단한 설정(모든 CSS<link>에 폴백이 필요한 단일 HTML 페이지)이 있으므로 이 스니펫이 다른 프로젝트에 적합하지 않을 수 있지만, 이 스니펫이 우연히 발견되는 모든 사람에게 도움이 되기를 바랍니다.