જાવાસ્ક્રિપ્ટ મોડ્યુલ ફેડરેશનની રનટાઇમ શેરિંગ ક્ષમતાઓ, સ્કેલેબલ, જાળવી શકાય તેવી અને સહયોગી વૈશ્વિક એપ્લિકેશન્સ બનાવવા માટે તેના ફાયદા અને વ્યવહારુ અમલીકરણ વ્યૂહરચનાઓનું અન્વેષણ કરો.
જાવાસ્ક્રિપ્ટ મોડ્યુલ ફેડરેશન: વૈશ્વિક એપ્લિકેશન્સ માટે રનટાઇમ શેરિંગની શક્તિને અનલૉક કરવું
આજના ઝડપથી વિકસતા ડિજિટલ લેન્ડસ્કેપમાં, સ્કેલેબલ, જાળવી શકાય તેવી અને સહયોગી વેબ એપ્લિકેશન્સ બનાવવી સર્વોપરી છે. જેમ જેમ ડેવલપમેન્ટ ટીમો વધે છે અને એપ્લિકેશન્સ વધુ જટિલ બને છે, તેમ કાર્યક્ષમ કોડ શેરિંગ અને ડિકપલિંગની જરૂરિયાત વધુને વધુ નિર્ણાયક બને છે. જાવાસ્ક્રિપ્ટ મોડ્યુલ ફેડરેશન, Webpack 5 સાથે રજૂ કરાયેલ એક ક્રાંતિકારી સુવિધા, સ્વતંત્ર રીતે જમાવેલી એપ્લિકેશન્સ વચ્ચે કોડના રનટાઇમ શેરિંગને સક્ષમ કરીને એક શક્તિશાળી ઉકેલ પ્રદાન કરે છે. આ બ્લોગ પોસ્ટ મોડ્યુલ ફેડરેશનના મુખ્ય ખ્યાલોમાં ઊંડાણપૂર્વક અભ્યાસ કરે છે, તેની રનટાઇમ શેરિંગ ક્ષમતાઓ પર ધ્યાન કેન્દ્રિત કરે છે, અને તે કેવી રીતે વૈશ્વિક ટીમો તેમની વેબ એપ્લિકેશન્સ બનાવે છે અને તેનું સંચાલન કરે છે તેમાં ક્રાંતિ લાવી શકે છે તે શોધે છે.
વેબ ડેવલપમેન્ટનું વિકસતું લેન્ડસ્કેપ અને શેરિંગની જરૂરિયાત
ઐતિહાસિક રીતે, વેબ ડેવલપમેન્ટમાં ઘણીવાર મોનોલિથિક એપ્લિકેશન્સનો સમાવેશ થતો હતો જ્યાં તમામ કોડ એક જ કોડબેઝમાં રહેતો હતો. જ્યારે આ અભિગમ નાના પ્રોજેક્ટ્સ માટે યોગ્ય હોઈ શકે છે, તે એપ્લિકેશન્સના સ્કેલ વધતા જટિલ બની જાય છે. ડિપેન્ડન્સીઓ ગૂંચવાઈ જાય છે, બિલ્ડ સમય વધે છે, અને અપડેટ્સ જમાવવું એક જટિલ અને જોખમી કાર્ય બની શકે છે. બેકએન્ડ ડેવલપમેન્ટમાં માઇક્રોસર્વિસિસના ઉદભવે ફ્રન્ટએન્ડ પર સમાન આર્કિટેક્ચરલ પેટર્ન માટે માર્ગ મોકળો કર્યો, જે માઇક્રોફ્રન્ટએન્ડ્સના ઉદભવ તરફ દોરી ગયું.
માઇક્રોફ્રન્ટએન્ડ્સનો ઉદ્દેશ મોટી, જટિલ ફ્રન્ટએન્ડ એપ્લિકેશન્સને નાના, સ્વતંત્ર અને જમાવી શકાય તેવા એકમોમાં વિભાજીત કરવાનો છે. આનાથી વિવિધ ટીમો એપ્લિકેશનના જુદા જુદા ભાગો પર સ્વાયત્ત રીતે કામ કરી શકે છે, જે ઝડપી વિકાસ ચક્ર અને સુધારેલ ટીમ સ્વાયત્તતા તરફ દોરી જાય છે. જોકે, માઇક્રોફ્રન્ટએન્ડ આર્કિટેક્ચરમાં એક મોટો પડકાર હંમેશા કાર્યક્ષમ કોડ શેરિંગનો રહ્યો છે. સામાન્ય લાઇબ્રેરીઓ, UI ઘટકો, અથવા ઉપયોગિતા કાર્યોને બહુવિધ માઇક્રોફ્રન્ટએન્ડ્સમાં ડુપ્લિકેટ કરવાથી નીચે મુજબની સમસ્યાઓ થાય છે:
- વધારેલ બંડલ સાઇઝ: દરેક એપ્લિકેશન શેર કરેલ ડિપેન્ડન્સીની પોતાની નકલ વહન કરે છે, જે વપરાશકર્તાઓ માટે કુલ ડાઉનલોડ સાઇઝને વધારે છે.
- અસંગત ડિપેન્ડન્સીઓ: જુદા જુદા માઇક્રોફ્રન્ટએન્ડ્સ સમાન લાઇબ્રેરીના જુદા જુદા સંસ્કરણોનો ઉપયોગ કરી શકે છે, જે સુસંગતતા સમસ્યાઓ અને અણધારી વર્તણૂક તરફ દોરી જાય છે.
- જાળવણી ઓવરહેડ: શેર કરેલ કોડને અપડેટ કરવા માટે બહુવિધ એપ્લિકેશન્સમાં ફેરફારોની જરૂર પડે છે, જે ભૂલોના જોખમને વધારે છે અને જમાવટને ધીમું કરે છે.
- સંસાધનોનો બગાડ: એક જ કોડને બહુવિધ વખત ડાઉનલોડ કરવું ક્લાયન્ટ અને સર્વર બંને માટે બિનકાર્યક્ષમ છે.
મોડ્યુલ ફેડરેશન રનટાઇમ પર ખરેખર કોડ શેર કરવા માટે એક મિકેનિઝમ રજૂ કરીને આ પડકારોને સીધા જ સંબોધિત કરે છે.
જાવાસ્ક્રિપ્ટ મોડ્યુલ ફેડરેશન શું છે?
જાવાસ્ક્રિપ્ટ મોડ્યુલ ફેડરેશન, મુખ્યત્વે Webpack 5 દ્વારા અમલમાં મુકાયેલ, એક બિલ્ડ ટૂલ સુવિધા છે જે જાવાસ્ક્રિપ્ટ એપ્લિકેશન્સને રનટાઇમ પર અન્ય એપ્લિકેશન્સમાંથી કોડને ગતિશીલ રીતે લોડ કરવાની મંજૂરી આપે છે. તે બહુવિધ સ્વતંત્ર એપ્લિકેશન્સની રચનાને સક્ષમ કરે છે જે મોનોરેપો અથવા જટિલ બિલ્ડ-ટાઇમ એકીકરણ પ્રક્રિયાની જરૂરિયાત વિના કોડ અને ડિપેન્ડન્સીઓ શેર કરી શકે છે.
મુખ્ય વિચાર "રિમોટ્સ" (એપ્લિકેશન્સ જે મોડ્યુલ્સને એક્સપોઝ કરે છે) અને "હોસ્ટ્સ" (એપ્લિકેશન્સ જે રિમોટ્સમાંથી મોડ્યુલ્સનો વપરાશ કરે છે) ને વ્યાખ્યાયિત કરવાનો છે. આ રિમોટ્સ અને હોસ્ટ્સ સ્વતંત્ર રીતે જમાવી શકાય છે, જે જટિલ એપ્લિકેશન્સના સંચાલનમાં નોંધપાત્ર સુગમતા પ્રદાન કરે છે અને વિવિધ આર્કિટેક્ચરલ પેટર્નને સક્ષમ કરે છે.
રનટાઇમ શેરિંગને સમજવું: મોડ્યુલ ફેડરેશનનો મુખ્ય ભાગ
રનટાઇમ શેરિંગ એ મોડ્યુલ ફેડરેશનની શક્તિનો પાયાનો પથ્થર છે. પરંપરાગત કોડ-સ્પ્લિટિંગ અથવા શેર કરેલ ડિપેન્ડન્સી મેનેજમેન્ટ તકનીકોથી વિપરીત, જે ઘણીવાર બિલ્ડ સમયે થાય છે, મોડ્યુલ ફેડરેશન એપ્લિકેશન્સને વપરાશકર્તાના બ્રાઉઝરમાં સીધા જ અન્ય એપ્લિકેશન્સમાંથી મોડ્યુલ્સ શોધવા અને લોડ કરવાની મંજૂરી આપે છે. આનો અર્થ એ છે કે એક સામાન્ય લાઇબ્રેરી, એક શેર કરેલ UI ઘટક લાઇબ્રેરી, અથવા એક ફીચર મોડ્યુલ પણ એક એપ્લિકેશન દ્વારા એકવાર લોડ કરી શકાય છે અને પછી તેને જરૂર હોય તેવી અન્ય એપ્લિકેશન્સ માટે ઉપલબ્ધ કરાવી શકાય છે.
ચાલો જોઈએ કે આ કેવી રીતે કામ કરે છે:
મુખ્ય ખ્યાલો:
- Exposes: એક એપ્લિકેશન ચોક્કસ મોડ્યુલ્સ (દા.ત., એક React ઘટક, એક ઉપયોગિતા કાર્ય) ને 'એક્સપોઝ' કરી શકે છે જેનો અન્ય એપ્લિકેશન્સ વપરાશ કરી શકે છે. આ એક્સપોઝ કરેલ મોડ્યુલ્સ એક કન્ટેનરમાં બંડલ કરવામાં આવે છે જેને રિમોટલી લોડ કરી શકાય છે.
- Remotes: જે એપ્લિકેશન મોડ્યુલ્સને એક્સપોઝ કરે છે તેને 'રિમોટ' ગણવામાં આવે છે. તે શેર કરેલ રૂપરેખાંકન દ્વારા તેના મોડ્યુલ્સને એક્સપોઝ કરે છે.
- Consumes: જે એપ્લિકેશનને રિમોટમાંથી મોડ્યુલ્સનો ઉપયોગ કરવાની જરૂર હોય છે તે 'કન્ઝ્યુમર' અથવા 'હોસ્ટ' છે. તે રિમોટ એપ્લિકેશન્સ ક્યાં શોધવી અને કયા મોડ્યુલ્સ લોડ કરવા તે જાણવા માટે પોતાને રૂપરેખાંકિત કરે છે.
- Shared Modules: મોડ્યુલ ફેડરેશન શેર કરેલ મોડ્યુલ્સને વ્યાખ્યાયિત કરવાની મંજૂરી આપે છે. જ્યારે બહુવિધ એપ્લિકેશન્સ સમાન શેર કરેલ મોડ્યુલનો વપરાશ કરે છે, ત્યારે તે મોડ્યુલનો ફક્ત એક જ દાખલો લોડ થાય છે અને તેમની વચ્ચે શેર કરવામાં આવે છે. આ બંડલ સાઇઝને ઓપ્ટિમાઇઝ કરવા અને ડિપેન્ડન્સી સંઘર્ષોને રોકવાનો એક નિર્ણાયક પાસું છે.
મિકેનિઝમ:
જ્યારે હોસ્ટ એપ્લિકેશનને રિમોટમાંથી મોડ્યુલની જરૂર પડે છે, ત્યારે તે રિમોટના કન્ટેનરમાંથી તેની વિનંતી કરે છે. રિમોટ કન્ટેનર પછી વિનંતી કરેલ મોડ્યુલને ગતિશીલ રીતે લોડ કરે છે. જો મોડ્યુલ પહેલેથી જ અન્ય કન્ઝ્યુમિંગ એપ્લિકેશન દ્વારા લોડ થયેલ હોય, તો તે શેર કરવામાં આવશે. આ ગતિશીલ લોડિંગ અને શેરિંગ રનટાઇમ પર સરળતાથી થાય છે, જે ડિપેન્ડન્સીઓનું સંચાલન કરવાની અત્યંત કાર્યક્ષમ રીત પ્રદાન કરે છે.
વૈશ્વિક વિકાસ માટે મોડ્યુલ ફેડરેશનના ફાયદા
વૈશ્વિક એપ્લિકેશન્સ બનાવવા માટે મોડ્યુલ ફેડરેશન અપનાવવાના ફાયદા નોંધપાત્ર અને દૂરગામી છે:
1. ઉન્નત સ્કેલેબિલિટી અને જાળવણીક્ષમતા:
એક મોટી એપ્લિકેશનને નાના, સ્વતંત્ર માઇક્રોફ્રન્ટએન્ડ્સમાં વિભાજીત કરીને, મોડ્યુલ ફેડરેશન સ્વાભાવિક રીતે સ્કેલેબિલિટીને પ્રોત્સાહન આપે છે. ટીમો અન્યને અસર કર્યા વિના વ્યક્તિગત માઇક્રોફ્રન્ટએન્ડ્સ પર કામ કરી શકે છે, જે સમાંતર વિકાસ અને સ્વતંત્ર જમાવટને મંજૂરી આપે છે. આ વિશાળ કોડબેઝના સંચાલન સાથે સંકળાયેલ જ્ઞાનાત્મક બોજને ઘટાડે છે અને સમય જતાં એપ્લિકેશનને વધુ જાળવી શકાય તેવી બનાવે છે.
2. ઓપ્ટિમાઇઝ્ડ બંડલ સાઇઝ અને પર્ફોર્મન્સ:
રનટાઇમ શેરિંગનો સૌથી મહત્વપૂર્ણ ફાયદો એ કુલ ડાઉનલોડ સાઇઝમાં ઘટાડો છે. દરેક એપ્લિકેશન સામાન્ય લાઇબ્રેરીઓ (જેમ કે React, Lodash, અથવા કસ્ટમ UI ઘટક લાઇબ્રેરી) ને ડુપ્લિકેટ કરવાને બદલે, આ ડિપેન્ડન્સીઓ એકવાર લોડ થાય છે અને શેર કરવામાં આવે છે. આનાથી નીચે મુજબના ફાયદા થાય છે:
- ઝડપી પ્રારંભિક લોડ સમય: વપરાશકર્તાઓ ઓછો કોડ ડાઉનલોડ કરે છે, જેના પરિણામે એપ્લિકેશનનું પ્રારંભિક રેન્ડરિંગ ઝડપી થાય છે.
- સુધારેલ અનુગામી નેવિગેશન: જ્યારે ડિપેન્ડન્સીઓ શેર કરતા માઇક્રોફ્રન્ટએન્ડ્સ વચ્ચે નેવિગેટ કરવામાં આવે છે, ત્યારે પહેલેથી લોડ થયેલ મોડ્યુલ્સનો ફરીથી ઉપયોગ થાય છે, જે વધુ ઝડપી વપરાશકર્તા અનુભવ તરફ દોરી જાય છે.
- ઘટાડેલ સર્વર લોડ: સર્વરમાંથી ઓછો ડેટા ટ્રાન્સફર થાય છે, જે સંભવિતપણે હોસ્ટિંગ ખર્ચ ઘટાડે છે.
એક વૈશ્વિક ઇ-કોમર્સ પ્લેટફોર્મનો વિચાર કરો જેમાં ઉત્પાદન સૂચિ, વપરાશકર્તા એકાઉન્ટ્સ અને ચેકઆઉટ માટે અલગ વિભાગો હોય. જો દરેક વિભાગ એક અલગ માઇક્રોફ્રન્ટએન્ડ હોય, પરંતુ તે બધા બટનો, ફોર્મ્સ અને નેવિગેશન માટે સામાન્ય UI ઘટક લાઇબ્રેરી પર આધાર રાખે છે, તો મોડ્યુલ ફેડરેશન ખાતરી કરે છે કે આ લાઇબ્રેરી ફક્ત એક જ વાર લોડ થાય છે, ભલે વપરાશકર્તા પ્રથમ કયા વિભાગની મુલાકાત લે.
3. વધેલી ટીમ સ્વાયત્તતા અને સહયોગ:
મોડ્યુલ ફેડરેશન વિવિધ ટીમોને, જે સંભવિતપણે વિવિધ વૈશ્વિક પ્રદેશોમાં સ્થિત છે, તેમના સંબંધિત માઇક્રોફ્રન્ટએન્ડ્સ પર સ્વતંત્ર રીતે કામ કરવા માટે સશક્ત બનાવે છે. તેઓ તેમના પોતાના ટેકનોલોજી સ્ટેક્સ (કેટલીક સુસંગતતા જાળવવા માટે વ્યાજબી મર્યાદામાં) અને જમાવટ સમયપત્રક પસંદ કરી શકે છે. આ સ્વાયત્તતા ઝડપી નવીનતાને પ્રોત્સાહન આપે છે અને સંચાર ઓવરહેડ ઘટાડે છે. જોકે, સામાન્ય કોડ શેર કરવાની ક્ષમતા પણ સહયોગને પ્રોત્સાહિત કરે છે, કારણ કે ટીમો શેર કરેલ લાઇબ્રેરીઓ અને ઘટકોમાં યોગદાન આપી શકે છે અને તેનો લાભ મેળવી શકે છે.
એક વૈશ્વિક નાણાકીય સંસ્થાની કલ્પના કરો કે જેમાં યુરોપ, એશિયા અને ઉત્તર અમેરિકામાં અલગ-અલગ ટીમો છે જે વિવિધ ઉત્પાદન ઓફરિંગ્સ માટે જવાબદાર છે. મોડ્યુલ ફેડરેશન દરેક ટીમને તેમની ચોક્કસ સુવિધાઓ વિકસાવવાની મંજૂરી આપે છે જ્યારે કેન્દ્રીય ટીમ દ્વારા વિકસિત સામાન્ય પ્રમાણીકરણ સેવા અથવા શેર કરેલ ચાર્ટિંગ લાઇબ્રેરીનો લાભ લે છે. આ પુનઃઉપયોગીતાને પ્રોત્સાહન આપે છે અને વિવિધ ઉત્પાદન લાઇનમાં સુસંગતતા સુનિશ્ચિત કરે છે.
4. ટેકનોલોજી અજ્ઞેયવાદ (ચેતવણીઓ સાથે):
જ્યારે મોડ્યુલ ફેડરેશન Webpack પર બનેલ છે, તે વિવિધ માઇક્રોફ્રન્ટએન્ડ્સ વચ્ચે અમુક અંશે ટેકનોલોજી અજ્ઞેયવાદને મંજૂરી આપે છે. એક માઇક્રોફ્રન્ટએન્ડ React સાથે, બીજો Vue.js સાથે, અને અન્ય Angular સાથે બનાવી શકાય છે, જ્યાં સુધી તેઓ મોડ્યુલ્સને કેવી રીતે એક્સપોઝ કરવા અને વપરાશ કરવા તે અંગે સંમત હોય. જોકે, React અથવા Vue જેવા જટિલ ફ્રેમવર્કનું સાચું રનટાઇમ શેરિંગ કરવા માટે, આ ફ્રેમવર્કને કેવી રીતે પ્રારંભ અને શેર કરવામાં આવે છે તેના પર વિશેષ ધ્યાન આપવાની જરૂર છે જેથી બહુવિધ દાખલાઓ લોડ થવા અને સંઘર્ષોનું કારણ બનતા અટકાવી શકાય.
એક વૈશ્વિક SaaS કંપની પાસે એક ફ્રેમવર્ક સાથે વિકસિત મુખ્ય પ્લેટફોર્મ હોઈ શકે છે અને પછી અન્ય ફ્રેમવર્કનો ઉપયોગ કરીને વિવિધ પ્રાદેશિક ટીમો દ્વારા વિકસિત વિશિષ્ટ ફીચર મોડ્યુલ્સને સ્પિન ઓફ કરી શકે છે. મોડ્યુલ ફેડરેશન આ વિભિન્ન ભાગોના એકીકરણને સરળ બનાવી શકે છે, જો કે શેર કરેલ ડિપેન્ડન્સીઓનું કાળજીપૂર્વક સંચાલન કરવામાં આવે.
5. સરળ સંસ્કરણ સંચાલન:
જ્યારે શેર કરેલ ડિપેન્ડન્સીને અપડેટ કરવાની જરૂર પડે છે, ત્યારે ફક્ત તેને એક્સપોઝ કરતા રિમોટને અપડેટ અને ફરીથી જમાવવાની જરૂર છે. બધી કન્ઝ્યુમિંગ એપ્લિકેશન્સ આપમેળે તેમના આગલા લોડ દરમિયાન નવું સંસ્કરણ પસંદ કરશે. આ સમગ્ર એપ્લિકેશન લેન્ડસ્કેપમાં શેર કરેલ કોડના સંચાલન અને અપડેટ કરવાની પ્રક્રિયાને સરળ બનાવે છે.
મોડ્યુલ ફેડરેશનનું અમલીકરણ: વ્યવહારુ ઉદાહરણો અને વ્યૂહરચનાઓ
ચાલો જોઈએ કે વ્યવહારમાં મોડ્યુલ ફેડરેશનને કેવી રીતે સેટઅપ અને લાભ ઉઠાવવો. અમે મુખ્ય ખ્યાલોને સમજાવવા માટે સરળ Webpack રૂપરેખાંકનોનો ઉપયોગ કરીશું.
દૃશ્ય: UI ઘટક લાઇબ્રેરી શેર કરવી
ધારો કે અમારી પાસે બે એપ્લિકેશન્સ છે: એક 'પ્રોડક્ટ કેટેલોગ' (રિમોટ) અને એક 'યુઝર ડેશબોર્ડ' (હોસ્ટ). બંનેને સમર્પિત 'શેર્ડ UI' લાઇબ્રેરીમાંથી શેર કરેલ 'બટન' ઘટકનો ઉપયોગ કરવાની જરૂર છે.
1. 'શેર્ડ UI' લાઇબ્રેરી (રિમોટ):
આ એપ્લિકેશન તેના 'બટન' ઘટકને એક્સપોઝ કરશે.
'શેર્ડ UI' (રિમોટ) માટેwebpack.config.js:
const { ModuleFederationPlugin } = require('webpack');
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'remoteEntry.js',
path: path.resolve(__dirname, 'dist'),
publicPath: 'http://localhost:3001/dist/', // URL where the remote will be served
},
plugins: [
new ModuleFederationPlugin({
name: 'sharedUI',
filename: 'remoteEntry.js',
exposes: {
'./Button': './src/components/Button.js', // Expose Button component
},
shared: {
// Define shared dependencies
react: {
singleton: true, // Ensure only one instance of React is loaded
},
'react-dom': {
singleton: true,
},
},
}),
],
// ... other webpack configurations (babel, devServer, etc.)
};
src/components/Button.js:
import React from 'react';
const Button = ({ onClick, children }) => (
);
export default Button;
આ સેટઅપમાં, 'શેર્ડ UI' તેના Button ઘટકને એક્સપોઝ કરે છે અને react અને react-dom ને singleton: true સાથે શેર કરેલ ડિપેન્ડન્સીઓ તરીકે જાહેર કરે છે જેથી ખાતરી થાય કે તે કન્ઝ્યુમિંગ એપ્લિકેશન્સમાં એકલ દાખલાઓ તરીકે ગણવામાં આવે છે.
2. 'પ્રોડક્ટ કેટેલોગ' એપ્લિકેશન (રિમોટ):
આ એપ્લિકેશનને પણ શેર કરેલ Button ઘટકનો વપરાશ કરવાની અને તેની પોતાની ડિપેન્ડન્સીઓ શેર કરવાની જરૂર પડશે.
webpack.config.js:
const { ModuleFederationPlugin } = require('webpack');
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'remoteEntry.js',
path: path.resolve(__dirname, 'dist'),
publicPath: 'http://localhost:3002/dist/', // URL where this remote will be served
},
plugins: [
new ModuleFederationPlugin({
name: 'productCatalog',
filename: 'remoteEntry.js',
exposes: {
'./ProductList': './src/components/ProductList.js', // Expose ProductList
},
remotes: {
// Define a remote it needs to consume from
sharedUI: 'sharedUI@http://localhost:3001/dist/remoteEntry.js',
},
shared: {
// Shared dependencies with the same version and singleton: true
react: {
singleton: true,
},
'react-dom': {
singleton: true,
},
},
}),
],
// ... other webpack configurations
};
'પ્રોડક્ટ કેટેલોગ' હવે તેના ProductList ઘટકને એક્સપોઝ કરે છે અને તેના પોતાના રિમોટ્સ જાહેર કરે છે, ખાસ કરીને 'શેર્ડ UI' એપ્લિકેશન તરફ નિર્દેશ કરે છે. તે સમાન શેર કરેલ ડિપેન્ડન્સીઓને પણ જાહેર કરે છે.
3. 'યુઝર ડેશબોર્ડ' એપ્લિકેશન (હોસ્ટ):
આ એપ્લિકેશન 'શેર્ડ UI' માંથી Button ઘટક અને 'પ્રોડક્ટ કેટેલોગ' માંથી ProductList નો વપરાશ કરશે.
webpack.config.js:
const { ModuleFederationPlugin } = require('webpack');
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
publicPath: 'http://localhost:3000/dist/', // URL where this app's bundles are served
},
plugins: [
new ModuleFederationPlugin({
name: 'userDashboard',
remotes: {
// Define the remotes this host application needs
sharedUI: 'sharedUI@http://localhost:3001/dist/remoteEntry.js',
productCatalog: 'productCatalog@http://localhost:3002/dist/remoteEntry.js',
},
shared: {
// Shared dependencies that must match the remotes
react: {
singleton: true,
import: 'react', // Specify the module name for import
},
'react-dom': {
singleton: true,
import: 'react-dom',
},
},
}),
],
// ... other webpack configurations
};
'યુઝર ડેશબોર્ડ' માટે src/index.js:
import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';
// Dynamically import the shared Button component
const RemoteButton = React.lazy(() => import('sharedUI/Button'));
// Dynamically import the ProductList component
const RemoteProductList = React.lazy(() => import('productCatalog/ProductList'));
const App = () => {
const handleClick = () => {
alert('Button clicked from shared UI!');
};
return (
User Dashboard
Loading Button... }>
Click Me
Products
Loading Products...