JavaScript Bundling ਦੀ ਵਿਆਖਿਆ
ਤੁਸੀਂ ਕਈ ਫਾਈਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ React ਜਾਂ Angular ਐਪਸ ਲਿਖਦੇ ਹੋ। ਤੁਹਾਡੇ ਕੋਲ components, services, ਅਤੇ libraries ਹੁੰਦੀਆਂ ਹਨ। ਇਹ ਸੰਗਠਨ ਤੁਹਾਡੀ ਮਦਦ ਕਰਦਾ ਹੈ।
ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਤੁਹਾਡੇ ਫੋਲਡਰਾਂ ਨਾਲ ਕੋਈ ਲੈਣਾ-ਦੇਣਾ ਨਹੀਂ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ 200 ਫਾਈਲਾਂ ਲੋਡ ਕਰਦੇ ਹੋ, ਤਾਂ ਬ੍ਰਾਊਜ਼ਰ 200 network requests ਕਰਦਾ ਹੈ। ਇਸ ਨਾਲ ਤੁਹਾਡੀ ਐਪ ਹੌਲੀ ਹੋ ਜਾਂਦੀ ਹੈ।
Bundlers ਇਸ ਸਮੱਸਿਆ ਨੂੰ ਹੱਲ ਕਰਦੇ ਹਨ। ਇੱਕ bundler ਤੁਹਾਡੇ code, imports, ਅਤੇ modules ਨੂੰ ਲੈਂਦਾ ਹੈ। ਇਹ ਉਹਨਾਂ ਨੂੰ ਇੱਕ ਜਾਂ ਕੁਝ ਛੋਟੀਆਂ ਫਾਈਲਾਂ ਵਿੱਚ ਜੋੜ ਦਿੰਦਾ ਹੈ। ਇਸ ਨਾਲ ਲੋਡਿੰਗ ਕੁਸ਼ਲ ਹੋ ਜਾਂਦੀ ਹੈ।
ਆਧੁਨਿਕ bundlers ਸਿਰਫ਼ ਫਾਈਲਾਂ ਨੂੰ ਜੋੜਨ ਤੋਂ ਵੱਧ ਕੁਝ ਕਰਦੇ ਹਨ:
• Minification: ਇਹ ਵਾਧੂ ਸਪੇਸ ਅਤੇ comments ਨੂੰ ਹਟਾ ਦਿੰਦਾ ਹੈ। ਇਹ ਫਾਈਲਾਂ ਨੂੰ ਛੋਟਾ ਕਰਨ ਲਈ variable names ਨੂੰ ਛੋਟਾ ਕਰ ਦਿੰਦਾ ਹੈ। • Tree shaking: ਇਹ ਉਹ code ਹਟਾ ਦਿੰਦਾ ਹੈ ਜਿਸਦੀ ਤੁਸੀਂ ਕਦੇ ਵਰਤੋਂ ਨਹੀਂ ਕਰਦੇ। ਇਹ libraries ਵਿੱਚੋਂ ਅਣਵਰਤੇ functions ਨੂੰ ਕੱਢ ਦਿੰਦਾ ਹੈ। • Code splitting: ਇਹ code ਨੂੰ ਛੋਟੇ ਹਿੱਸਿਆਂ (chunks) ਵਿੱਚ ਵੰਡ ਦਿੰਦਾ ਹੈ। ਬ੍ਰਾਊਜ਼ਰ ਸਿਰਫ਼ ਉਹੀ ਲੋਡ ਕਰਦਾ ਹੈ ਜਿਸਦੀ ਵਰਤਕਰਤਾ ਨੂੰ ਇਸ ਸਮੇਂ ਲੋੜ ਹੈ।
ਛੋਟੀਆਂ ਫਾਈਲਾਂ ਨਾਲ ਐਪਸ ਤੇਜ਼ ਚੱਲਦੀਆਂ ਹਨ।
ਦੋ ਮੁੱਖ ਟੂਲ ਹਨ: Webpack ਅਤੇ Vite।
Webpack ਤੁਹਾਡੀ ਪੂਰੀ ਐਪ ਨੂੰ ਸਰਵ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ bundle ਕਰਦਾ ਹੈ। ਇਹ ਵੱਡੇ legacy projects ਲਈ ਵਧੀਆ ਕੰਮ ਕਰਦਾ ਹੈ। ਇਹ ਲਚਕਦਾਰ ਹੈ ਪਰ ਵੱਡੇ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਹੌਲੀ ਮਹਿਸੂਸ ਹੋ ਸਕਦਾ ਹੈ।
Vite ਇੱਕ ਆਧੁਨਿਕ ਚੋਣ ਹੈ। Development ਦੌਰਾਨ, ਇਹ ਫਾਈਲਾਂ ਨੂੰ ਸਿੱਧਾ ਸਰਵ ਕਰਦਾ ਹੈ। ਇਹ ਸਿਰਫ਼ ਉਸ ਫਾਈਲ ਨੂੰ ਅਪਡੇਟ ਕਰਦਾ ਹੈ ਜਿਸਨੂੰ ਤੁਸੀਂ ਬਦਲਦੇ ਹੋ। ਇਸ ਨਾਲ ਅਪਡੇਟਸ ਤੁਰੰਤ ਹੋ ਜਾਂਦੇ ਹਨ। Production ਲਈ, Vite ਤੇਜ਼ bundles ਬਣਾਉਣ ਲਈ Rollup ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ।
ਤੁਲਨਾ:
Webpack:
- Dev speed: ਹੌਲੀ
- Config: ਗੁੰਝਲਦਾਰ
- Best for: ਵੱਡੇ legacy projects
Vite:
- Dev speed: ਤੇਜ਼
- Config: ਸਰਲ
- Best for: ਨਵੇਂ ਆਧੁਨਿਕ ਪ੍ਰੋਜੈਕਟ
ਨਵੇਂ ਪ੍ਰੋਜੈਕਟਾਂ ਲਈ Vite ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਹਰ bundler ਤਿੰਨ ਕਦਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ:
- Dependency graph ਬਣਾਉਣਾ: ਇਹ ਨਕਸ਼ਾ ਤਿਆਰ ਕਰਦਾ ਹੈ ਕਿ ਹਰ ਫਾਈਲ ਦੂਜਿਆਂ ਨਾਲ ਕਿਵੇਂ ਜੁੜੀ ਹੋਈ ਹੈ।
- Code ਨੂੰ ਬਦਲਣਾ (Transform): ਇਹ TypeScript ਜਾਂ JSX ਨੂੰ ਸਾਧਾਰਨ JavaScript ਵਿੱਚ ਬਦਲ ਦਿੰਦਾ ਹੈ।
- Bundle ਨੂੰ ਆਊਟਪੁੱਟ ਕਰਨਾ: ਇਹ deployment ਲਈ ਸਭ ਕੁਝ ਇੱਕ ਫੋਲਡਰ ਵਿੱਚ ਜੋੜਦਾ ਅਤੇ minifies ਕਰਦਾ ਹੈ।
ਇਹਨਾਂ ਕਦਮਾਂ ਨਾਲ ਆਪਣੇ bundle ਨੂੰ ਹਲਕਾ ਰੱਖੋ:
• Lazy loading: components ਨੂੰ ਉਦੋਂ ਹੀ ਲੋਡ ਕਰੋ ਜਦੋਂ ਵਰਤਕਰਤਾ ਉਹਨਾਂ ਤੱਕ ਪਹੁੰਚਦੇ ਹਨ। • Partial imports: ਪੂਰੀ library ਨੂੰ import ਨਾ ਕਰੋ। ਸਿਰਫ਼ ਉਸ ਖਾਸ function ਨੂੰ import ਕਰੋ ਜਿਸਦੀ ਤੁਹਾਨੂੰ ਲੋੜ ਹੈ। • Analyze: ਇਹ ਦੇਖਣ ਲਈ ਟੂਲਸ ਦੀ ਵਰਤੋਂ ਕਰੋ ਕਿ ਤੁਹਾਡੇ bundle ਵਿੱਚ ਕਿਹੜੀ ਚੀਜ਼ ਜਗ੍ਹਾ ਲੈ ਰਹੀ ਹੈ। • Production builds: ਹਮੇਸ਼ਾ production builds ਨੂੰ ਹੀ deploy ਕਰੋ। Development builds ਬਹੁਤ ਵੱਡੀਆਂ ਹੁੰਦੀਆਂ ਹਨ।
Bundling ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਘੱਟ ਅਤੇ ਛੋਟੀਆਂ ਫਾਈਲਾਂ ਦੇ ਕੇ ਤੁਹਾਡੀ ਐਪ ਦੀ ਕਾਰਗੁਜ਼ਾਰੀ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਂਦੀ ਹੈ।
ਸਰੋਤ: https://dev.to/kavya1205/javascript-bundling-explained-from-zero-to-optimised-f7p