esbuild을 사용하여 각도 애플리케이션을 빌드하는 것에 대해 궁금하십니까? esbuild는 js 랜드의 새로운 빌드 도구이며 대부분 속도로 알려져 있습니다.

응용 프로그램

제가 제시한 데모 애플리케이션을 esbuild로 마이그레이션합니다.

webpack으로 최소 각도 12 애플리케이션을 구축하는 방법

Marcin Wosinek ・ 7월 8일 ・ 2분 읽기

#webpack #angular #typescript

코드에 관심이 있는 경우 위의 문서를 확인하거나 저장소를 직접 확인할 수 있습니다.

marcin-wosinek / webpack 각도

webpack을 사용한 최소 각도 애플리케이션 빌드

응용 프로그램은 단순한 개념 증명에 지나지 않을 정도로 단순화되었습니다. 내가 보는 위험 중 하나는 종속성을 지정하는 모든 옵션에서 종속성 주입이 예상대로 작동하는지 여부입니다. 문제가 있는 경우 여기 댓글로 알려주세요. 게다가 향후 기사에서는 esbuild를 사용하여 더 복잡한 각도 애플리케이션 빌드를 살펴볼 것입니다.

빌드 스크립트

webpack 예제와의 주요 차이점은 package.json의 빌드 스크립트입니다.

  "build": "esbuild src/index.ts --bundle --outfile=dist/main.js"

작동하려면 esbuild를 종속성으로 설치해야 합니다.

$ npm install --save-dev esbuild

웹팩과 일대일 비교

webpack과 빌드 속도를 비교해 봅시다. 먼저 esbuild:

$ time npm run build

> [email protected] build
> esbuild src/index.ts --bundle --outfile=dist/main.js


  dist/main.js  1.7mb ⚠️

⚡ Done in 166ms

real    0m0,416s
user    0m0,606s
sys     0m0,070s

우리가 집중해야 할 주요 수치는 다음과 같습니다.

0.4s - 반환된 형식으로 실시간time 명령 - 명령 시작과 종료 사이의 시간 차이입니다. esbuild 에 의해 반환된 것보다 약간 더 깁니다. 시스템 명령이므로 esbuild 및 webpack 모두에 대해 유사하게 왜곡되었다고 가정할 수 있습니다.

1.7mb - dist/main.js 크기

빌드 스크립트에 --minify 플래그를 추가하면 다음과 같은 결과가 나타납니다.

0.4s - 빌드 시간

773.9kb - dist/main.js 크기

webpack에 대한 유사한 값:

mode: "development" - minimization off: sh $ time npm run build ... asset main.js 3.22 MiB [emitted] (name: main) ... real 0m4,088s user 0m7,025s sys 0m0,251s `
esbuild보다 약 10배 길고 축소되지 않은 esbuild 실행보다 거의 두 배 더 큼

`모드: "프로덕션"- 최소화:

$ time npm run build
...
asset main.js 811 KiB [emitted] [minimized] [big] (name: main) 1 related asset
...
real    0m15,648s
user    0m25,688s
sys     0m0,530s

크기는 비슷하지만 빌드 속도는 거의 40배 느립니다.

연결

• my course about esbuild

요약

이 기사에서 우리는 esbuild가 단순히 각도 애플리케이션을 구축하는 것을 보았습니다. 여기에서 '응용 프로그램'here 및 코드베이스를 볼 수 있습니다.

esbuild의 다른 측면에 관심이 있으시면 댓글로 알려주세요.