Vite ਨੂੰ ਸਰਲ ਬਣਾਉਣਾ

Webpack ਜਾਂ Create React App ਵਰਗੇ ਪੁਰਾਣੇ ਟੂਲ ਪਹਿਲਾਂ ਤੁਹਾਡੇ ਪੂਰੇ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਬੰਡਲ (bundle) ਕਰਕੇ ਕੰਮ ਕਰਦੇ ਹਨ। ਟੂਲ ਹਰ ਫਾਈਲ ਨੂੰ ਪੜ੍ਹਦਾ ਹੈ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਇੱਕ ਵਿਸ਼ਾਲ JavaScript ਫਾਈਲ ਵਿੱਚ ਬਦਲ ਦਿੰਦਾ ਹੈ। ਇਹ ਛੋਟੇ ਪ੍ਰੋਜੈਕਟਾਂ ਲਈ ਕੰਮ ਕਰਦਾ ਹੈ। ਪਰ ਵੱਡੇ ਪ੍ਰੋਜੈਕਟਾਂ ਲਈ ਇਹ ਅਸਫਲ ਰਹਿੰਦਾ ਹੈ। ਵੱਡੇ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ, ਇਸ ਪ੍ਰਕਿਰਿਆ ਵਿੱਚ ਕਈ ਸਕਿੰਟ ਲੱਗ ਜਾਂਦੇ ਹਨ। ਹਰ ਵਾਰ ਜਦੋਂ ਤੁਸੀਂ ਕੋਈ ਫਾਈਲ ਸੇਵ ਕਰਦੇ ਹੋ, ਤਾਂ ਟੂਲ ਨੂੰ ਉਸ ਕੰਮ ਦਾ ਬਹੁਤਾ ਹਿੱਸਾ ਦੁਬਾਰਾ ਕਰਨਾ ਪੈਂਦਾ ਹੈ।

Vite ਵੱਖਰੇ ਤਰੀਕੇ ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ। ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ES modules ਦਾ ਨੇਟਿਵ (native) ਸਪੋਰਟ ਹੁੰਦਾ ਹੈ। ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਬ੍ਰਾਊਜ਼ਰ ਖੁਦ imports ਅਤੇ exports ਨੂੰ ਸੰਭਾਲ ਸਕਦਾ ਹੈ। Vite ਡਿਵੈਲਪਮੈਂਟ (development) ਦੌਰਾਨ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਬੰਡਲ ਨਹੀਂ ਕਰਦਾ। ਇਹ ਹਰ ਫਾਈਲ ਨੂੰ ਇੱਕ ਵੱਖਰੇ ਮੋਡਿਊਲ ਵਜੋਂ ਉਦੋਂ ਹੀ ਸਰਵ (serve) ਕਰਦਾ ਹੈ ਜਦੋਂ ਬ੍ਰਾਊਜ਼ਰ ਇਸਦੀ ਮੰਗ ਕਰਦਾ ਹੈ।

ਇੱਕ ਬਫੇ (buffet) ਰੈਸਟੋਰੈਂਟ ਬਾਰੇ ਸੋਚੋ। ਦੁਕਾਨ ਦੇ ਦਰਵਾਜ਼ੇ ਖੋਲ੍ਹਣ ਤੋਂ ਪਹਿਲਾਂ ਸ਼ੈੱਫ ਹਰ ਇੱਕ ਡਿਸ਼ ਤਿਆਰ ਕਰਦਾ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਇੱਕ ਛੋਟਾ ਜਿਹਾ ਬਦਲਾਅ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਸ਼ੈੱਫ ਨੂੰ ਪੂਰਾ ਬਫੇ ਦੁਬਾਰਾ ਤਿਆਰ ਕਰਨਾ ਪੈਂਦਾ ਹੈ। Webpack ਇਸੇ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦਾ ਹੈ। ਪ੍ਰੋਜੈਕਟ ਜਿੰਨਾ ਵੱਡਾ ਹੋਵੇਗਾ, ਤੁਹਾਨੂੰ ਉਨਾ ਹੀ ਜ਼ਿਆਦਾ ਇੰਤਜ਼ਾਰ ਕਰਨਾ ਪਵੇਗਾ।

Vite ਇੱਕ à la carte ਰੈਸਟੋਰੈਂਟ ਵਾਂਗ ਹੈ। ਦਰਵਾਜ਼ੇ ਤੁਰੰਤ ਖੁੱਲ੍ਹ ਜਾਂਦੇ ਹਨ। ਤੁਸੀਂ ਇੱਕ ਡਿਸ਼ ਆਰਡਰ ਕਰਦੇ ਹੋ। ਸ਼ੈੱਫ ਸਿਰਫ਼ ਉਹੀ ਡਿਸ਼ ਤਿਆਰ ਕਰਦਾ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਬਾਅਦ ਵਿੱਚ ਮਿੱਠਾ (dessert) ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਸ਼ੈੱਫ ਸਿਰਫ਼ ਮਿੱਠਾ ਹੀ ਤਿਆਰ ਕਰਦਾ ਹੈ। ਤੁਹਾਨੂੰ ਪੂਰੇ ਮੀਨੂ ਦੇ ਤਿਆਰ ਹੋਣ ਦਾ ਇੰਤਜ਼ਾਰ ਨਹੀਂ ਕਰਨਾ ਪੈਂਦਾ।

Vite ਦੋ ਵੱਖ-ਵੱਖ ਲੋੜਾਂ ਲਈ ਦੋ ਵੱਖ-ਵੱਖ ਰਣਨੀਤੀਆਂ (strategies) ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ:

Development (vite dev) • ਰਣਨੀਤੀ (Strategy): ਬੰਡਲਿੰਗ ਤੋਂ ਬਿਨਾਂ native ESM modules ਸਰਵ ਕਰਦਾ ਹੈ। • ਸ਼ੁਰੂਆਤੀ ਰਫ਼ਤਾਰ (Start speed): ਤੁਰੰਤ। ਇਹ ਪ੍ਰੋਜੈਕਟ ਦੇ ਆਕਾਰ 'ਤੇ ਨਿਰਭਰ ਨਹੀਂ ਕਰਦਾ। • ਕਿਉਂ (Why): ਤੁਹਾਡੇ ਕੰਪਿਊਟਰ 'ਤੇ ਲੋਕਲ HTTP ਰਿਕੁਐਸਟਾਂ ਤੇਜ਼ ਹੁੰਦੀਆਂ ਹਨ।

Production (vite build) • ਰਣਨੀਤੀ (Strategy): Rolldown ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਭ ਕੁਝ ਬੰਡਲ ਕਰਦਾ ਹੈ। • ਸ਼ੁਰੂਆਤੀ ਰਫ਼ਤਾਰ (Start speed): ਸਮਾਂ ਪ੍ਰੋਜੈਕਟ ਦੇ ਆਕਾਰ ਦੇ ਨਾਲ ਵਧਦਾ ਹੈ। • ਕਿਉਂ (Why): ਸੈਂਕੜੇ ਵੱਖ-ਵੱਖ ਫਾਈਲਾਂ ਯੂਜ਼ਰਾਂ ਲਈ ਬਹੁਤ ਜ਼ਿਆਦਾ HTTP ਰਿਕੁਐਸਟਾਂ ਪੈਦਾ ਕਰਦੀਆਂ ਹਨ। ਬੰਡਲਿੰਗ ਇਸ ਨੂੰ ਠੀਕ ਕਰਦੀ ਹੈ।

Vite ਤੁਹਾਨੂੰ ਕੋਡਿੰਗ ਕਰਦੇ ਸਮੇਂ ਰਫ਼ਤਾਰ ਅਤੇ ਲਾਂਚ ਕਰਦੇ ਸਮੇਂ ਕੁਸ਼ਲਤਾ (efficiency) ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।

ਸਰੋਤ (Source): https://dev.to/yuripeixinho/descomplicando-o-vite-1p62