- विकास के शुरुआती चरण में build time लगभग 30 सेकंड था, जो ठीक-ठाक था, लेकिन जैसे-जैसे फीचर बढ़ते गए, build time बढ़कर 1 मिनट 10 सेकंड तक पहुंच गया
- लंबा build time विकास प्रक्रिया को धीमा करता है, नए developers के onboarding time को बढ़ाता है, और रोज़मर्रा के काम में फोकस बनाए रखना मुश्किल बनाता है
हैकाथॉन के ज़रिये सुधार की कोशिश
- जनवरी में डेटा इकट्ठा किया गया, हैकाथॉन project proposal लिखा गया, मौजूदा build system की समझ बढ़ाई गई और profiling के तरीकों की तलाश की गई
- OpenTelemetry और Jaeger का उपयोग करके पूरे build process की profiling की गई
- profiling के नतीजों से पता चला कि Webpack/Rollup execution build time का अधिकांश हिस्सा ले रहा था
- यह भी पता चला कि छोटे dependencies एक-एक करके build हो रहे थे, इसलिए parallel processing के बहुत मौके मौजूद थे
- शुरुआत में कुछ hot tasks ज़रूरत से ज़्यादा समय ले रहे थे, जिससे बाकी build process में देरी हो रही थी
- हैकाथॉन के दौरान esbuild का उपयोग करके bundling time कम करने पर फोकस किया गया
- Webpack/Rollup के loader के रूप में esbuild का उपयोग कर performance में बड़ा सुधार किया गया (Rollup के मामले में 80% कमी)
- esbuild को Webpack/Rollup की पूरी जगह लेने वाले bundler के रूप में इस्तेमाल कर bundling time में 90% की कमी लाई गई
- हैकाथॉन project के नतीजों में extension program build time 70% से अधिक घटकर लगभग 15 सेकंड रह गया
production में लागू करने के लिए काम
- हैकाथॉन project में कई अस्थायी उपाय इस्तेमाल किए गए थे, इसलिए production में लागू करने के लिए उन्हें वास्तविक solution से बदलना ज़रूरी था
- Webpack और Rollup के उपयोग को पूरी तरह esbuild में migrate किया गया
- build process को एक ही जगह पर समेकित किया गया
- graphic asset handling से जुड़ी समस्याएँ हल की गईं
- TypeScript type checking को build process में फिर से जोड़ा गया
- production build test किए गए और size व functionality की तुलना की गई
- internal dependency changes को reflect किया गया
- Sentry build step जैसे पुराने build system के अन्य पहलुओं को फिर से लागू किया गया
- non-Chrome browsers, polyfills, और store-specific build requirements को संभालने के लिए अतिरिक्त काम किया गया
- type checking और bundle size optimization पर खास ज़ोर देकर काम किया गया
esbuild में type checking जोड़ना
- tsc धीमा है, इसलिए उसे esbuild की तेज़ build process के साथ इस्तेमाल करना आसान नहीं था
- esbuild-plugin-typecheck community plugin का उपयोग करके tsc को worker thread में चलाया गया और incremental compilation का लाभ लिया गया
- अपनी तरफ से एक सरल type checking plugin लागू किया गया, जो हर package root के लिए parallel में tsc CLI process चलाता है
- tsc compile diagnostic messages को esbuild native format में बदलकर readability बेहतर की गई
tsc --listFilesOnly flag और esbuild के Metafile का उपयोग करके यह अपने आप verify किया गया कि सभी build inputs की type checking हुई है
production bundle size में सुधार
- esbuild के bundle size analyzer का उपयोग करके production bundle का analysis किया गया
- पता चला कि UI component library के ESM और CJS build दोनों bundle में शामिल हो रहे थे
- internal library की गलत setting को ठीक करके bundle size घटाया गया (3.3MB -> 2.1MB)
- कई entry points में file size कम होने का असर भी देखा गया
प्रभाव और निष्कर्ष
- production implementation के नतीजे में warm build time 90% से अधिक घटकर लगभग 5 सेकंड रह गया
- watch mode में TypeScript file बदलने पर 1 सेकंड से कम समय में rebuild संभव हो गया
- developers ने feedback दिया कि नए build system से उनकी कामकाजी दक्षता में बड़ा सुधार हुआ
- QA team और developer volunteers की मेहनत से नए build system में transition सुचारु रूप से हुआ
- developer satisfaction survey में build time को लेकर असंतोष 97% से घटकर 5% रह गया
- esbuild एक शानदार tool है, और हैकाथॉन projects इस तरह के काम के लिए बेहतरीन हैं
अभी कोई टिप्पणी नहीं है.