esbuild로 mix-manifest.json 파일 생성

이 웹사이트는 매우 간단합니다. 바로 HTML과 CSS입니다. 자바스크립트가 전혀 없습니다.
HTML을 생성하기 위해 (현재) Jigsaw 및 Laravel Blade를 사용합니다. CSS의 경우 Tailwind CSS을 사용합니다.

몇 주 전까지만 해도 CSS 파일을 컴파일하기 위해 Laravel Mix 및 Webpack을 사용했습니다. 나는 한 가지 기능인 versioning에 대해서만 Mix를 사용하고 있습니다.

내 구성 파일에 .version()를 추가함으로써 Laravel Mix는 새 빌드를 생성할 때 mix-manifest.json 파일을 생성합니다. 해당 파일의 내용은 다음과 같습니다.

{
    "/css/main.css": "/css/main.css?id=9bdded1b8e8a06a52e67"
}

여기에는 경로가 id 매개변수 및 해시 값으로 보강된 CSS 또는 JavaScript 파일에 대한 경로 맵이 포함됩니다. 해시된 값은 참조된 파일의 체크섬을 나타냅니다(이 예에서는 css/main.css).

Jigsaw로 새 빌드를 만들 때 생성된 HTML은 해시된 값과 함께 CSS 파일을 로드합니다. 이렇게 하면 CSS 파일이 변경되고 새 클래스가 추가되거나 제거될 때마다 해시가 변경되므로 캐시 버스팅이 매우 쉬워집니다. 브라우저는 항상 최신 CSS 파일을 로드합니다.

언급한 바와 같이 Laravel Mix는 Webpack의 래퍼입니다. Laravel Mix와 Webpack은 훌륭합니다. 나는 그들의 존재와 지난 몇 년 동안 그들에게 투입된 모든 작업에 감사합니다. 그러나 Webpack은 느립니다.

Webpack을 통해 CSS를 빌드하는 데 1~2초가 걸립니다. Tailwind CLI로 CSS를 빌드하면 이 값이 50ms로 바로 떨어집니다. CLI로 전환하면 성능 측면에서 큰 이점이 있지만 캐시 무효화 기능을 잃게 됩니다.

CSS 파일을 빌드하는 것 외에도 Jigsaw로 새 빌드를 생성해야 합니다. 이 사이트를 완전히 재구축하는 데 3-5초가 걸립니다.

이 긴 피드백 루프는 디자인을 조정할 때 짜증이 났습니다. 편집기에서 브라우저로 너무 빨리 전환했습니다. 새 버전이 구축되는 동안에도 이전 디자인이나 콘텐츠를 계속 보고 있었습니다.

이 문제를 해결하기 위해 Laravel Mix에서 esbuild으로 전환하고 my own plugin을 작성하여 mix-manifest.json 파일을 다시 생성했습니다.

다음 코드가 포함된 새build.js 파일을 만들었습니다.

#!/usr/bin/env node

const { build } = require('estrella');
const postcss = require('esbuild-postcss');
const mixManifestPlugin = require('@stefanzweifel/esbuild-mix-manifest-plugin');

build({
    entryPoints: {
        'css/main': 'resources/css/main.css',
    },
    outdir: 'source/assets/build',
    outbase: 'source/assets/build',
    metafile: true,
    minify: true,
    plugins: [
        postcss(),
        mixManifestPlugin(),
    ],
});

나는 build 방법을 얻기 위해 estrella을 사용하고 있습니다. 방법에 진입점으로 내 CSS 파일을 제공하고 postcss 및 mixManifest 플러그인을 추가하면 됩니다.

내package.json 파일에 2개의 새 스크립트 명령을 추가했습니다. 하나는 새 CSS 빌드를 만드는 것입니다. 그리고 프로젝트에서 변경 사항을 확인하고 CSS와 사이트를 컴파일하는 두 번째 명령입니다.

"scripts": {
    "prod": "node build.js",
    "watch": "nodemon --ignore source/assets/build/ \
     --watch resources --watch source \ 
     -e md,php,css \ 
     -x 'npm run prod && composer run build'"
},

Laravel Mix에서 esbuild로 전환하면 내 사이트의 전체 빌드 시간이 절반으로 줄어듭니다(4-5초에서 2초로).

Webpack, Laravel Mix 또는 Vite과 같은 번들러가 필요하지 않은 Laravel 프로젝트에서 작업하고 자산을 캐시 버스트하는 간단한 방법을 원하면 esbuild 및 my mix-manifest 플러그인을 사용해 보십시오.