Vite ને સરળ બનાવવું
Webpack અથવા Create React App જેવા જૂના સાધનો પહેલા તમારા સમગ્ર પ્રોજેક્ટને બંડલ કરીને કામ કરે છે. આ સાધન દરેક ફાઇલ વાંચે છે અને તેને એક વિશાળ JavaScript ફાઇલમાં ફેરવે છે. આ નાના પ્રોજેક્ટ્સ માટે કામ કરે છે. તે મોટા પ્રોજેક્ટ્સ માટે નિષ્ફળ જાય છે. મોટા પ્રોજેક્ટ્સમાં, આ પ્રક્રિયામાં ઘણા સેકન્ડો લાગે છે. જ્યારે પણ તમે ફાઇલ સેવ કરો છો, ત્યારે સાધનને આ કામનો મોટો ભાગ ફરીથી કરવો પડે છે.
Vite અલગ રીતે કામ કરે છે. આધુનિક બ્રાઉઝર્સ ES modules ને નેટિવલી સપોર્ટ કરે છે. આનો અર્થ એ છે કે બ્રાઉઝર જાતે જ imports અને exports હેન્ડલ કરી શકે છે. Vite ડેવલપમેન્ટ દરમિયાન તમારા કોડને બંડલ કરતું નથી. તે દરેક ફાઇલને અલગ મોડ્યુલ તરીકે ત્યારે જ સર્વ કરે છે જ્યારે બ્રાઉઝર તેની માંગ કરે છે.
એક બુફે રેસ્ટોરન્ટ વિશે વિચારો. શેફ દરવાજા ખોલતા પહેલા દરેક વાનગી બનાવે છે. જો તમારે નાનો ફેરફાર કરવો હોય, તો શેફે આખું બુફે ફરીથી બનાવવું પડે છે. Webpack આ રીતે કામ કરે છે. પ્રોજેક્ટ જેટલો મોટો હશે, તમારે તેટલો વધુ સમય રાહ જોવી પડશે.
Vite એ à la carte રેસ્ટોરન્ટ જેવું છે. દરવાજા તરત જ ખુલે છે. તમે એક વાનગી ઓર્ડર કરો છો. શેફ ફક્ત તે જ વાનગી તૈયાર કરે છે. જો તમારે પછીથી ડેઝર્ટ જોઈએ છે, તો શેફ ફક્ત ડેઝર્ટ જ તૈયાર કરે છે. તમારે આખું મેનૂ તૈયાર થવાની રાહ જોવી પડતી નથી.
Vite બે અલગ-અલગ જરૂરિયાતો માટે બે અલગ-અલગ વ્યૂહરચનાઓનો ઉપયોગ કરે છે:
Development (vite dev)
• વ્યૂહરચના: બંડલિંગ વગર નેટિવ ESM મોડ્યુલ્સ સર્વ કરે છે.
• શરૂઆતની ઝડપ: ત્વરિત. તે પ્રોજેક્ટના કદ પર આધારિત નથી.
• શા માટે: તમારા કમ્પ્યુટર પર લોકલ HTTP રિક્વેસ્ટ ઝડપી હોય છે.
Production (vite build)
• વ્યૂહરચના: Rolldown નો ઉપયોગ કરીને બધું બંડલ કરે છે.
• શરૂઆતની ઝડપ: પ્રોજેક્ટના કદ સાથે સમય વધે છે.
• શા માટે: સેંકડો અલગ-અલગ ફાઇલો યુઝર્સ માટે ઘણા બધા HTTP રિક્વેસ્ટ કરે છે. બંડલિંગ આ સમસ્યાને ઠીક કરે છે.
Vite તમને કોડિંગ કરતી વખતે ઝડપ અને લોન્ચ કરતી વખતે કાર્યક્ષમતા આપે છે.
સ્ત્રોત: https://dev.to/yuripeixinho/descomplicando-o-vite-1p62