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