{"id":443160,"date":"2024-12-26T05:46:10","date_gmt":"2024-12-26T05:46:10","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=443160"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=443160","title":{"rendered":"<span>\u041f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u043c 50 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 Module Federation \u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043b\u043e\u043c\u0430\u0435\u043c<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041e \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430\u0445 \u0438 \u0441\u043e\u043f\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 Model Federation \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<h2>\u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u043e\u0432 \u0434\u043e Module Federation<\/h2>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u043c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0421\u0442\u0435\u043f\u0430\u043d, \u044f \u0433\u043b\u0430\u0432\u043d\u044b\u0439 frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432 \u0410\u043b\u044c\u0444\u0430-\u0411\u0430\u043d\u043a\u0435. \u041f\u0440\u043e\u0435\u043a\u0442\u043e\u043c, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u043e\u0439\u0434\u0451\u0442 \u0440\u0435\u0447\u044c, \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u0448\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430. \u0422\u043e\u043b\u044c\u043a\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0432 \u043d\u0435\u0439 60. \u041c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u043c\u0430\u043d\u0434 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0431\u043e\u043b\u0435\u0435 50 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043f\u0440\u0438\u043d\u043e\u0441\u044f\u0449\u0438\u0445 \u043f\u0440\u0438\u0431\u044b\u043b\u044c \u0431\u0438\u0437\u043d\u0435\u0441\u0443.<\/p>\n<p>\u0423 \u043d\u0430\u0441 \u0440\u0430\u043d\u0435\u0435 \u0431\u044b\u043b\u0438 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u044b, \u043d\u043e \u043e\u043d\u0438 \u0431\u044b\u043b\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u044b \u043d\u0435 \u043d\u0430 WMF. \u041d\u0435 \u0432\u0434\u0430\u0432\u0430\u044f\u0441\u044c \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u0432\u0441\u0451 \u0431\u044b\u043b\u043e \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u0438\u0447\u0438\u043d\u044b \u043f\u0435\u0440\u0435\u0435\u0437\u0434\u0430. \u0414\u0443\u043c\u0430\u044e, \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f, \u0447\u0442\u043e \u043f\u0440\u043e\u0435\u043a\u0442 \u0431\u043e\u043b\u044c\u0448\u043e\u0439.<\/p>\n<p>\u0412\u043e\u0442 \u0442\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/7da\/22d\/579\/7da22d5798b14b39d1393dd1fe2e51ad.png\" alt=\"\u0421\u043b\u0435\u0432\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f, \u0441\u043f\u0440\u0430\u0432\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u0430\u044f.\u00a0\" title=\"\u0421\u043b\u0435\u0432\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f, \u0441\u043f\u0440\u0430\u0432\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u0430\u044f.\u00a0\" width=\"1600\" height=\"896\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/7da\/22d\/579\/7da22d5798b14b39d1393dd1fe2e51ad.png\"\/><\/p>\n<div><figcaption>\u0421\u043b\u0435\u0432\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f, \u0441\u043f\u0440\u0430\u0432\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u0430\u044f.\u00a0<\/figcaption><\/div>\n<\/figure>\n<p>\u041d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u0432\u0438\u0434\u0435\u043d remote \u0438 host. \u0412 host\u2019\u0435 \u0441\u043d\u0438\u0437\u0443 \u0442\u0430\u043f\u0431\u0430\u0440, \u0441\u0432\u0435\u0440\u0445\u0443 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u043a\u0430\u0440\u0442\u0430\u0445. \u0412 \u043d\u0435\u0433\u043e \u043c\u043e\u0436\u0435\u0442 \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c\u0441\u044f \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u0432\u0441\u0451, \u0447\u0442\u043e \u0443\u0433\u043e\u0434\u043d\u043e. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u043a\u0435 \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u0434\u0430\u0448\u0431\u043e\u0440\u0434, \u0430 \u0441\u043f\u0440\u0430\u0432\u0430 \u043f\u043b\u0430\u0442\u0435\u0436\u0438. \u0422\u0430\u043a\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 50 \u0438 \u043a\u0430\u0436\u0434\u043e\u0435 \u043a\u0430\u0442\u0438\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e.<\/p>\n<p>\u041a\u0430\u0436\u0434\u043e\u0435 remote-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043f\u0443\u0442\u0451\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u043f\u043e appID: <code>__mount<\/code> \u0438 <code>__unmount<\/code>.\u00a0<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2e9\/11a\/f4c\/2e911af4cd7b6420cb1203814ece87af.png\" width=\"1404\" height=\"310\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2e9\/11a\/f4c\/2e911af4cd7b6420cb1203814ece87af.png\"\/><\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ca0\/478\/3cf\/ca04783cffabbc2479ab043ba99725ca.png\" width=\"1346\" height=\"248\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ca0\/478\/3cf\/ca04783cffabbc2479ab043ba99725ca.png\"\/><\/figure>\n<p>\u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 (\u0432\u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0438) \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 <code>React.createElement<\/code> \u043f\u043e \u043a\u0430\u043a\u043e\u0439-\u043b\u0438\u0431\u043e \u043d\u043e\u0434\u0435, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043b\u0435\u0436\u0430\u043b\u0430 \u0432 \u0445\u043e\u0441\u0442\u0435.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0443 \u043d\u0430\u0441 \u0431\u044b\u043b \u043d\u0435\u043a\u0438\u0439 Node.js \u0441\u043b\u043e\u0439 (<code>api getAssetsAndConfig<\/code>), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u0434\u0430\u0432\u0430\u043b \u0441\u0442\u0430\u0442\u0438\u043a\u0443 \u0438 \u043a\u043e\u043d\u0444\u0438\u0433. \u0412 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u044d\u0442\u043e \u0431\u044b\u043b\u0438 \u0441\u0441\u044b\u043b\u043a\u0438 \u0434\u043e \u0441\u0442\u0430\u0442\u0438\u043a\u0438 \u0441 js \u0438 css, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0444\u0438\u0447\u0438 \u0441 \u0431\u0435\u043a\u0430.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a6f\/1a6\/ffa\/a6f1a6ffa2f8aaec9ba7157b51b80ca3.png\" width=\"1328\" height=\"208\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a6f\/1a6\/ffa\/a6f1a6ffa2f8aaec9ba7157b51b80ca3.png\"\/><\/figure>\n<p>\u042d\u0442\u0443 \u0441\u0442\u0430\u0442\u0438\u043a\u0443 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u043b host \u0438 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u043b \u0435\u0451 \u0432 dom.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d03\/a94\/fdd\/d03a94fdd3d209cc822a333b1c166a44.png\" width=\"1328\" height=\"92\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d03\/a94\/fdd\/d03a94fdd3d209cc822a333b1c166a44.png\"\/><\/figure>\n<p>\u0422\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043c\u044b \u0431\u0440\u0430\u043b\u0438 \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u043b\u0438 \u0442\u0435 \u0441\u0430\u043c\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b <code>__mount<\/code> \u0438 <code>__unmount<\/code>: <code>__mount<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u043b\u0441\u044f \u2014 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043b\u043e\u0441\u044c.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/717\/39c\/1a5\/71739c1a586a72cfabba772897dee1ac.png\" width=\"1206\" height=\"664\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/717\/39c\/1a5\/71739c1a586a72cfabba772897dee1ac.png\"\/><\/figure>\n<p>\u0412\u0441\u0451, \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u044b \u0433\u043e\u0442\u043e\u0432\u044b.\u00a0<\/p>\n<p>\u041f\u0440\u0438 <code>__unmount<\/code> \u043c\u044b \u0443\u0434\u0430\u043b\u044f\u043b\u0438 \u0442\u0435 \u0441\u0430\u043c\u044b\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0438 JS-\u0444\u0430\u0439\u043b\u044b, \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u0431\u043e\u0440\u043e\u043b\u0438\u0441\u044c \u0441 \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u0435\u0439 \u0441\u0442\u0438\u043b\u0435\u0439. \u041a\u043e\u043d\u0444\u043b\u0438\u043a\u0442 \u0441\u0442\u0438\u043b\u0435\u0439 \u2014\u00a0\u044d\u0442\u043e \u0431\u043e\u043b\u044c\u043d\u0430\u044f \u0442\u0435\u043c\u0430. \u041d\u043e \u043e\u0431 \u044d\u0442\u043e\u043c \u043f\u043e\u0437\u0436\u0435.<\/p>\n<h2>\u0427\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u043d\u0435 \u0442\u0430\u043a?<\/h2>\n<p><strong>\u21161. \u041d\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438.<\/strong><\/p>\n<p>\u0418\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u043d\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 \u0431\u0430\u043d\u0434\u043b \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u043b 1 \u043c\u0431 br, \u0447\u0442\u043e \u043d\u0435\u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u043c\u043e\u043d\u043e\u043b\u0438\u0442\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0430 \u0443 \u043d\u0430\u0441 \u0442\u0443\u0442 \u043e\u0434\u0438\u043d \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442 \u0432\u0435\u0441\u0438\u0442 \u0441\u0442\u043e\u043b\u044c\u043a\u043e. \u0410 \u0432\u0441\u0435\u0433\u043e \u0438\u0445 50.\u00a0<\/p>\n<p><strong>\u21162. \u0412\u044b\u0437\u043e\u0432<\/strong> <code>getAssetsAndConfig<\/code> <strong>\u043d\u0435 \u0434\u0430\u0432\u0430\u043b \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0432\u043e\u0434\u043e\u043f\u0430\u0434 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u0437\u0430\u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u0434\u043e \u043a\u043e\u043d\u0444\u0438\u0433\u0430.<\/strong><\/p>\n<p>\u042d\u0442\u043e \u0431\u044b\u043b BFF-\u0441\u043b\u043e\u0439, \u043c\u0438\u0434\u043b\u043e\u0432\u0430\u044f \u0440\u0443\u0447\u043a\u0430, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u0441\u0442\u0443\u0447\u0430\u043b\u0438\u0441\u044c. \u0415\u0451 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u0437\u0430\u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043e\u0434\u043d\u043e\u0439 \u0440\u0430\u0441\u043a\u0430\u0442\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0448\u043b\u0430 \u043e\u0434\u043d\u0430 \u0432\u0435\u0440\u0441\u0438\u044f \u0438 \u0437\u0430\u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043b\u0430\u0441\u044c \u0434\u043e \u043a\u043e\u043d\u0446\u0430. \u0421 \u043d\u0430\u0448\u0438\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c \u0442\u0430\u043a \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0de\/ede\/ec5\/0deedeec5f422cb849afe4d8335e8d77.png\" width=\"1332\" height=\"284\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0de\/ede\/ec5\/0deedeec5f422cb849afe4d8335e8d77.png\"\/><\/figure>\n<p><strong>\u21163. \u0421\u0430\u043c\u043e\u043f\u0438\u0441\u043d\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a.<\/strong><\/p>\n<p>\u041d\u0430 \u0435\u0433\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0443\u0445\u043e\u0434\u0438\u043b\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u0421\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u043e\u0432, \u043c\u044b \u043f\u043e\u043d\u044f\u043b\u0438, \u0447\u0442\u043e \u043f\u043e\u0440\u0430. \u041f\u043e\u0440\u0430 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043d\u0430 \u043e\u0431\u0449\u0438\u0439 \u043a\u043e\u043d\u0446\u0435\u043f\u0442. \u0418 \u0441\u0430\u043c\u044b\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u043c \u0441\u0442\u0430\u043b Module Federation.<\/p>\n<h2>\u041f\u043e\u0447\u0435\u043c\u0443 Module Federation?<\/h2>\n<p><strong>\u21161. \u041d\u0435 \u043d\u0430\u0434\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/strong>\u00a0<\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f WMF \u043a\u0430\u043a \u043f\u043b\u0430\u0433\u0438\u043d Webpack, \u0430 \u043e\u043d \u0443 \u043d\u0430\u0441 \u0438 \u0442\u0430\u043a \u0431\u044b\u043b. \u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u043f\u043b\u0430\u0433\u0438\u043d \u2014 \u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b, \u043d\u0435 \u0441\u0430\u043c\u0430\u044f \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430.<\/p>\n<p><strong>\u21162. WMF \u2014 \u044d\u0442\u043e \u043f\u043b\u0430\u0433\u0438\u043d \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c. <\/strong><\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u043a\u0438\u0448\u043a\u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u043d\u0430 GitHub, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0448\u044c.<\/p>\n<p><strong>\u21163. \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438.<\/strong>\u00a0<\/p>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u0436\u0435 \u0441\u0430\u043c\u044b\u0435 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0432\u0440\u043e\u0434\u0435 \u0438\u043a\u043e\u043d\u043e\u043a \u0438\u043b\u0438 \u0448\u0440\u0438\u0444\u0442\u043e\u0432. \u0413\u043b\u0430\u0432\u043d\u043e\u0435, \u0447\u0442\u043e\u0431\u044b \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u043e\u0442\u044f\u043d\u0443\u043b\u0430 \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432. \u042d\u0442\u043e \u043a\u0438\u043b\u043b\u0435\u0440-\u0444\u0438\u0447\u0430, \u0438\u0437-\u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439, \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u0432\u0441\u0435 \u0432\u044b\u0431\u0438\u0440\u0430\u044e\u0442 \u044d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434.<\/p>\n<p><strong>\u21164. \u0423\u0441\u0442\u043e\u044f\u0432\u0448\u0438\u0439\u0441\u044f \u043f\u0440\u043e\u0434\u0443\u043a\u0442 \u043d\u0430 \u0440\u044b\u043d\u043a\u0435 \u0441 \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432.<\/strong>\u00a0<\/p>\n<p>\u0415\u0441\u0442\u044c \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439, \u0432 \u043d\u0451\u043c \u043b\u0435\u0436\u0430\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043e\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0434\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e \u2014 \u0432\u0441\u0451, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p><strong>\u21165. \u0415\u0441\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430\u0445, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a vite, rspack, rollup.<\/strong><\/p>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043e\u0442 Webpack \u0432 \u043f\u043e\u043b\u044c\u0437\u0443 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u0431\u043e\u043b\u0435\u0435 \u0431\u044b\u0441\u0442\u0440\u044b\u0445, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Nexts \u043f\u0438\u0448\u0435\u0442 Turbopack. \u041d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u0443\u043f\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u043f\u043b\u0430\u0433\u0438\u043d \u043d\u0430 Webpack, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0442\u043e\u043c \u043e\u043f\u044f\u0442\u044c \u0432\u0441\u0451 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c. \u0410 WMF, \u043a\u0430\u043a \u043d\u0435\u043a\u0438\u0439 \u043e\u0431\u0449\u0438\u0439 \u043a\u043e\u043d\u0446\u0435\u043f\u0442, \u0435\u0441\u0442\u044c \u043d\u0430 \u043c\u043d\u043e\u0433\u0438\u0445 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430\u0445.<\/p>\n<p><strong>\u21166. \u0412\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043e\u0431\u044b\u0447\u043d\u044b\u043c JS-\u0441\u043a\u0440\u0438\u043f\u0442\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/strong>\u00a0<\/p>\n<p>\u0423 \u043d\u0430\u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043a\u0440\u0443\u0442\u044f\u0442\u0441\u044f \u0432 Kubernetes: \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u2014 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440. \u0421 \u0442\u0430\u043a\u0438\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u0443\u0435\u0434\u0435\u0448\u044c. \u041d\u0430\u0434\u043e \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043d\u0430 S3, \u043c\u0435\u043d\u044f\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0434\u0435\u043f\u043b\u043e\u044f.<\/p>\n<p>\u042d\u0442\u043e\u0442 \u043f\u0443\u043d\u043a\u0442 \u043d\u0430\u0441 \u0438\u0437\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043d\u0430\u043b\u0438\u0447\u0438\u044f BFF-\u0441\u043b\u043e\u044f. \u0418 \u043c\u044b, \u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u043c\u043e\u0436\u0435\u043c \u0441\u044a\u0435\u0445\u0430\u0442\u044c \u0441 Kubernetes (\u0430 \u0441 \u043d\u0435\u0433\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u0441\u044a\u0435\u0437\u0436\u0430\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u0442\u044f\u0436\u0435\u043b\u043e), \u0438 \u043d\u0435 \u0438\u043c\u0435\u0442\u044c \u044d\u0442\u043e\u0433\u043e Node JS \u0441\u043b\u043e\u044f.\u00a0<\/p>\n<p>\u21167. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0448\u0430\u0440\u0438\u0442\u044c \u043e\u0431\u0449\u0438\u0435 \u0441\u0442\u043e\u0440\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 react-query. \u041c\u043e\u0436\u043d\u043e \u0437\u0430\u0448\u0430\u0440\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0447\u0435\u0440\u0435\u0437 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044f \u0432 \u043f\u043b\u0430\u0433\u0438\u043d\u0435 \u0438 \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0432\u043e \u0432\u0441\u0435\u0445 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0430\u0445.<\/p>\n<p>\u0418\u0442\u0430\u043a, \u043c\u044b \u0440\u0435\u0448\u0438\u043b\u0438, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d WMF. \u041a\u0430\u043a \u0432\u043d\u0435\u0434\u0440\u044f\u0442\u044c?\u00a0<\/p>\n<h2>\u041a\u0440\u0430\u0442\u043a\u043e \u043e \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0438<\/h2>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/ab5\/e14\/9a3\/ab5e149a3e5ffda71e0801c5ca82672e.png\" width=\"1600\" height=\"691\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ab5\/e14\/9a3\/ab5e149a3e5ffda71e0801c5ca82672e.png\"\/><\/figure>\n<p>\u0414\u043b\u044f \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0430\u043f\u043e\u043a.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b10\/0ee\/1de\/b100ee1deab4f3ac1fed6398efc62d25.png\" width=\"1168\" height=\"844\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b10\/0ee\/1de\/b100ee1deab4f3ac1fed6398efc62d25.png\"\/><\/figure>\n<p>\u0413\u043b\u0430\u0432\u043d\u044b\u0435 \u0438\u0437 \u043d\u0438\u0445 \u2014\u00a0\u044d\u0442\u043e <code>bootstrap.tsx<\/code>, <code>remote.tsx<\/code> \u0438 <code>index.ts<\/code>.\u00a0<\/p>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043d\u0438\u0445 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435.<\/p>\n<h3>remote.tsx\u00a0<\/h3>\n<p>\u041e\u0434\u0438\u043d \u0438\u0437 \u0442\u0440\u0451\u0445 \u0444\u0430\u0439\u043b\u043e\u0432, \u0447\u0442\u043e \u043e\u0442\u0434\u0430\u0451\u0442\u0441\u044f \u043d\u0430\u0440\u0443\u0436\u0443 \u0438 \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 host.\u00a0<\/p>\n<p>\u041d\u0438\u0436\u0435 \u043c\u044b \u043a\u0430\u043a \u0440\u0430\u0437 \u0433\u043e\u0432\u043e\u0440\u0438\u043c: \u00ab\u0412\u043e\u0442 \u044d\u0442\u043e\u0442 \u043a\u0443\u0441\u043e\u043a \u043a\u043e\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043d\u0430\u0440\u0443\u0436\u0438\u00bb.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2d8\/f1b\/686\/2d8f1b6867fec44669a8630a1136df0d.png\" width=\"1426\" height=\"710\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2d8\/f1b\/686\/2d8f1b6867fec44669a8630a1136df0d.png\"\/><\/figure>\n<p>\u0415\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c host, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u0432 Webpack \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c <code>exposes<\/code>.\u00a0<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a59\/8d2\/e91\/a598d2e91860639804fdec27113bc4df.png\" width=\"1452\" height=\"668\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a59\/8d2\/e91\/a598d2e91860639804fdec27113bc4df.png\"\/><\/figure>\n<p>\u0414\u0432\u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u0430 \u043d\u0443\u0436\u043d\u044b \u0441\u0443\u0433\u0443\u0431\u043e \u0434\u043b\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0434\u043d\u044f\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u0434\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0441\u0432\u043e\u0451.\u00a0<\/p>\n<h3>index.ts<\/h3>\n<p>\u042d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432\u0441\u0435\u0433\u043e \u0438\u0437 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438, \u0433\u0434\u0435 \u043c\u044b \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u043c bootstrap-\u0444\u0430\u0439\u043b.\u00a0<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/bc9\/b9f\/906\/bc9b9f9064e8a4c6e446da96dbc853c5.png\" width=\"1334\" height=\"146\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/bc9\/b9f\/906\/bc9b9f9064e8a4c6e446da96dbc853c5.png\"\/><\/figure>\n<p>\u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c Webpack \u043d\u0430 \u044d\u0442\u0438 \u043f\u0443\u0442\u0438.\u00a0<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/583\/0e4\/730\/5830e473063f5ea5c8eae8782b44179f.png\" width=\"1600\" height=\"244\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/583\/0e4\/730\/5830e473063f5ea5c8eae8782b44179f.png\"\/><\/figure>\n<h3>bootstrap.tsx<\/h3>\n<p>\u0410 <code>bootstrap.ts<\/code>, \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u043f\u043e\u0434\u043d\u0438\u043c\u0430\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e \u0432 standalone \u0440\u0435\u0436\u0438\u043c\u0435, \u0447\u0442\u043e\u0431\u044b \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0438\u043b\u0438 \u043f\u0440\u043e\u0433\u043d\u0430\u0442\u044c \u0442\u0435\u0441\u0442\u044b \u043d\u0430 CI.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/360\/4f1\/ae6\/3604f1ae65a40458a0dc6e0830e36d27.png\" width=\"1342\" height=\"200\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/360\/4f1\/ae6\/3604f1ae65a40458a0dc6e0830e36d27.png\"\/><\/figure>\n<p>\u0412 <code>InitNewclickDevEntrypoint<\/code> \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u0442\u044c \u0443\u0442\u0438\u043b\u0438\u0442\u044b <code>@axe-core\/react<\/code> \u0434\u043b\u044f \u044e\u0437\u0430\u0431\u0438\u043b\u0438\u0442\u0438. \u0412 \u043e\u0431\u0449\u0435\u043c, \u0435\u0441\u0442\u044c \u0432\u0441\u0451, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u043e.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/922\/354\/5f2\/9223545f2271bca8eaa18ed86d10d75c.png\" width=\"1084\" height=\"628\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/922\/354\/5f2\/9223545f2271bca8eaa18ed86d10d75c.png\"\/><\/figure>\n<h2>\u041d\u0435 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043b\u0438 \u043c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0434\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f?<\/h2>\n<p>\u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0434\u0430 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043d\u0435\u043b\u044c\u0437\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0441\u0451 \u0432\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0430\u043a\u0435\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u00ab\u043f\u0440\u0435\u0441\u0435\u0442\u044b\u00bb.<\/p>\n<pre><code class=\"javascript\">\u201cdevDependencies\u201d: { \u201c@alfa-bank\/newclick-arui-scripts-presets\u201d: \u201c9.14.1\u201d,<\/code><\/pre>\n<p>\u0412 \u043d\u0435\u0433\u043e \u0441\u043a\u0438\u0434\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432\u0441\u0435 Webpack \u043a\u043e\u043d\u0444\u0438\u0433\u0438 \u0438 \u043c\u043e\u0434\u0443\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0448\u0430\u0440\u0438\u0442\u044c. \u0427\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u043d\u0430 \u043d\u043e\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c <code>@alfa-bank\/newclick-arui-scripts-presets<\/code> \u0438 \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u0430\u043f\u043e\u043a \u043f\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0443.<\/p>\n<h3>\u041f\u043b\u0430\u0433\u0438\u043d WMF<\/h3>\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a \u0440\u0430\u0437 \u0438 \u043e\u043d\u0438 \u2014\u00a0\u043c\u043e\u0434\u0443\u043b\u0438. \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043b\u0435\u0436\u0430\u0442 \u0432 \u043e\u0431\u0449\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435, \u0433\u0434\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433\u0438 \u0441\u0440\u0430\u0437\u0443 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d3d\/a57\/dd1\/d3da57dd1829a6fe51a880cc6160f836.png\" width=\"1182\" height=\"1276\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d3d\/a57\/dd1\/d3da57dd1829a6fe51a880cc6160f836.png\"\/><\/figure>\n<p>\u041d\u0430 \u043f\u0435\u0440\u0432\u043e\u0439 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438 \u043c\u044b \u0448\u0430\u0440\u0438\u043c \u0442\u043e\u043b\u044c\u043a\u043e react, react-dom, \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0440\u043e\u0443\u0442\u044b \u2014 \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0440\u0435\u0434\u043a\u043e.<\/p>\n<h3>\u041f\u0443\u0442\u044c \u0434\u043e \u0430\u0441\u0441\u0435\u0442\u043e\u0432\u00a0<\/h3>\n<p>\u041f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c <code>publicPath<\/code>.<\/p>\n<pre><code class=\"javascript\">output: { \u00a0\u00a0\u00a0\u00a0\u2026newConfig.output, \u00a0\u00a0\u00a0\u00a0publicPath: \u2018\/${name}\/assets\/\u2019, },<\/code><\/pre>\n<p>\u042d\u0442\u043e \u0432\u0430\u0436\u043d\u043e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e Model Federation \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u043a\u0430\u043a \u0440\u0430\u0437 \u0442\u0430\u043a\u0438 \u0432 <code>remoteEntry<\/code>. \u041e\u043d \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u043a\u0443\u0434\u0430 \u0438\u0434\u0442\u0438 \u0434\u043e <code>\/${name}\/assets<\/code>.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443 \u043d\u0430\u0441 \u0431\u044b\u043b\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u0447\u0442\u043e \u043f\u0440\u0438 \u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435 \u043f\u0443\u0442\u044c \u0431\u044b\u043b \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c. \u0418 \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0441\u0442\u0430\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c WMF, \u0442\u043e \u0434\u0432\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0433\u0440\u0443\u0437\u0438\u043b\u0438\u0441\u044c \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0438 \u043d\u0430\u0447\u0430\u043b\u0438 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432\u0430\u0442\u044c. \u041f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u00ab\u0434\u0438\u043d\u0430\u043c\u0438\u043a\u0438\u00bb.<\/p>\n<h3>\u041a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 remoteEntry<\/h3>\n<p>\u041d\u0430 \u043f\u0435\u0440\u0432\u043e\u0439 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438 \u043d\u0430 Nginx \u043c\u044b \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043b\u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u044d\u0448 \u0444\u0430\u0439\u043b\u0430 \u0432 15 \u043c\u0438\u043d\u0443\u0442, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0433 \u0447\u0443\u0432\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0431\u044f \u043a\u043e\u043c\u0444\u043e\u0440\u0442\u043d\u043e \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u0441\u0435\u0441\u0441\u0438\u0438.\u00a0<\/p>\n<p>\u041d\u043e api Webpack \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0445\u0430\u0440\u0434\u043a\u043e\u0434\u0438\u0442\u044c <code>remoteEntry.js<\/code>, \u043d\u043e \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a \u043d\u0435\u043c\u0443 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0445\u0435\u0448, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u043e \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043e\u0434\u043d\u043e\u0433\u043e \u0440\u0435\u043b\u0438\u0437\u0430. \u0417\u0430\u0440\u0435\u043b\u0438\u0437\u0438\u043b\u0441\u044f, \u043f\u0440\u043e\u0448\u043b\u043e \u043d\u0435\u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0430 \u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u0432 \u0445\u0435\u0448\u0435 \u043b\u0435\u0436\u0438\u0442 \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b\u0438\u043a.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/dee\/25c\/b8b\/dee25cb8bdf249ada81de6e143b2ad9b.png\" width=\"1328\" height=\"530\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/dee\/25c\/b8b\/dee25cb8bdf249ada81de6e143b2ad9b.png\"\/><\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/eb3\/80a\/86b\/eb380a86bf1226b4334192685ba32808.png\" width=\"1566\" height=\"626\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/eb3\/80a\/86b\/eb380a86bf1226b4334192685ba32808.png\"\/><\/figure>\n<h2>Host<\/h2>\n<p>\u0410 \u0432\u043e\u0442 \u0432 host \u043c\u044b \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u0447\u0435\u0440\u0435\u0437 \u043f\u043b\u0430\u0433\u0438\u043d, \u0430 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 (\u0447\u0443\u0442\u044c \u0434\u0430\u043b\u044c\u0448\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043f\u043e\u0447\u0435\u043c\u0443). \u041f\u043e\u043a\u0430 \u0447\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0443, \u0447\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c <code>ModuleFederationPlugin<\/code> \u2014 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0432\u0441\u0435 \u0442\u0435 \u0436\u0435 \u043c\u043e\u0434\u0443\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u043e\u0442\u0438\u043c \u0448\u0430\u0440\u0438\u0442\u044c.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/d27\/199\/5be\/d271995bee9a877c6d84ca344fbb015e.png\" width=\"1062\" height=\"1222\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d27\/199\/5be\/d271995bee9a877c6d84ca344fbb015e.png\"\/><\/figure>\n<p>\u0425\u043e\u0441\u0442 \u0443 \u043d\u0430\u0441 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0430 remote \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u2014 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435.\u00a0<\/p>\n<pre><code class=\"javascript\">new NodeFederationPlugin(serverWmnfPluginOptions, {}), new StreamingTargetPlugin(serverWmnfPluginOptions), \u2026 export const serverWmfPluginOptions = { \u00a0\u00a0\u00a0\u00a0name, \u00a0\u00a0\u00a0\u00a0library: { type: \u2018commonjs-module\u2019 }, };<\/code><\/pre>\n<p>\u0418 \u0435\u0441\u043b\u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0430\u043a, \u0442\u043e \u043d\u043e\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0440\u0443\u0433\u0430\u0442\u044c\u0441\u044f: \u00ab\u00ab\u0422\u044b \u043f\u043e\u0434\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0448\u044c api, \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0443 \u043c\u0435\u043d\u044f \u043d\u0435\u0442\u00bb. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0434\u0432\u0430 \u043f\u043b\u0430\u0433\u0438\u043d\u0430-\u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0438, \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435, \u043f\u043e\u043a\u0430 \u0443 \u043d\u0430\u0441 \u043d\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0434\u043b\u044f MF.<\/p>\n<h3>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435<\/h3>\n<p>\u0412 \u043d\u0435\u0439 \u0435\u0441\u0442\u044c \u043c\u0430\u0441\u0441\u0430 \u043f\u043b\u044e\u0441\u043e\u0432.<\/p>\n<ul>\n<li>\n<p>\u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u0434\u043e api WMF, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0441\u043a\u043e\u0443\u043f \u0438\u043b\u0438 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0447\u0430\u043d\u043a\u0438.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u041d\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0432\u0441\u0435\u0445 <code>remoutEntry.js<\/code> \u0444\u0430\u0439\u043b\u043e\u0432. \u042d\u0442\u043e \u0432\u0430\u0436\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e. \u0415\u0441\u043b\u0438 \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0441\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u043f\u043b\u0430\u0433\u0438\u043d\u0435, \u0442\u043e \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432\u0441\u0435 \u0444\u0430\u0439\u043b\u044b \u0437\u0430\u0433\u0440\u0443\u0437\u044f\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u0430\u0440\u0442\u0435. \u0410 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e.<\/p>\n<\/li>\n<li>\n<p>\u0421\u0430\u043c\u043e\u0435 \u0432\u0430\u0436\u043d\u043e\u0435 \u2014\u00a0\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0437\u043d\u0430\u0442\u044c \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0432 \u043d\u0451\u043c \u0431\u0443\u0434\u0435\u0442 \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u0431\u043e\u0440\u043a\u0438. \u041a\u043e\u043d\u0444\u0438\u0433 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u0442\u044f\u043d\u0443\u0442\u044c \u0441 \u043c\u0438\u0434\u043b\u0430 (\u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u043e\u0442\u043a\u0443\u0434\u0430 \u0443\u0433\u043e\u0434\u043d\u043e).<\/p>\n<\/li>\n<\/ul>\n<h3>\u041a\u0430\u043a \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/h3>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c <code>remoteEntry.js<\/code> \u0444\u0430\u0439\u043b. \u0412 \u043d\u0451\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432\u0441\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u0447\u0430\u043d\u043a\u0430\u0445, \u043f\u0430\u043a\u0435\u0442\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u043a\u0443\u0434\u0430 \u0438\u0434\u0442\u0438 \u0434\u043e \u0430\u0441\u0441\u0435\u0442\u043e\u0432 \u0438 \u043c\u043d\u043e\u0433\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435.\u00a0<\/p>\n<p>\u0418\u0437 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u044d\u0442\u043e\u0433\u043e \u0441\u043a\u0440\u0438\u043f\u0442\u0430 \u0432 dom.\u00a0<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e96\/a33\/de7\/e96a33de77fee07fd2c6349ec1da939f.png\" width=\"1312\" height=\"824\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e96\/a33\/de7\/e96a33de77fee07fd2c6349ec1da939f.png\"\/><\/figure>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c api WMF.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/43d\/835\/aa5\/43d835aa5cef3db87dd99b52000c3b14.png\" width=\"1576\" height=\"660\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/43d\/835\/aa5\/43d835aa5cef3db87dd99b52000c3b14.png\"\/><\/figure>\n<p>\u0417\u0434\u0435\u0441\u044c:\u00a0<\/p>\n<ul>\n<li>\n<p>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c <code>__webpack_init_sharing<\/code> \u2014\u00a0\u044d\u0442\u043e \u043e\u0431\u0449\u0438\u0439 \u0441\u043a\u043e\u0443\u043f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439.<\/p>\n<\/li>\n<li>\n<p>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043d\u0430\u0448 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u0430\u043a \u0440\u0430\u0437 \u0442\u0430\u043a\u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0432 <code>remoteEntry.js<\/code> \u0444\u0430\u0439\u043b\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043e\u0431\u0449\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u0432 <code>remoteEntry.js<\/code> \u0444\u0430\u0439\u043b\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0421\u043d\u0430\u0440\u0443\u0436\u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0447\u0430\u043d\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u044b.\u00a0<\/p>\n<\/li>\n<\/ul>\n<p>\u0418 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043c\u043e\u0434\u0443\u043b\u044c.\u00a0<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0443 \u043d\u0430\u0441 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0430\u044f \u0441\u0442\u0430\u0442\u0438\u043a\u0430, \u0447\u0430\u043d\u043a\u0438 \u0432\u0437\u044f\u043b\u0438 \u0438\u0437 \u043e\u0431\u0449\u0435\u0433\u043e \u0441\u043a\u043e\u0443\u043f\u0430 \u0438\u043b\u0438 \u043e\u043d\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0438\u0441\u044c \u0438\u0437 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<pre><code class=\"javascript\">const Remote = await loadWmfComponent(scope, module);<\/code><\/pre>\n<p>\u041c\u043e\u0436\u043d\u043e \u0435\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0430\u0441\u0446\u0435\u043d\u0438\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u043b\u0435\u0439\u0437\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 host, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0438. \u0412 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435, \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a \u043c\u044b \u0435\u0433\u043e \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c.\u00a0<\/p>\n<p>\u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0438 \u0432\u0441\u0451 \u0433\u043e\u0442\u043e\u0432\u043e.<\/p>\n<pre><code class=\"javascript\">React.lazy(memo(RemoteModule.default));<\/code><\/pre>\n<h3>\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u043e\u043c<\/h3>\n<p>\u0415\u0441\u043b\u0438 \u043e\u0447\u0435\u043d\u044c \u043a\u0440\u0430\u0442\u043a\u043e, \u0442\u043e \u0443 \u043d\u0430\u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f api react-router \u043f\u044f\u0442\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438. \u041c\u044b \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u0438 \u043d\u0430 host, \u0438 \u043d\u0430 remote \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435: \u0441\u043b\u0435\u0434\u0438\u043c \u0437\u0430 \u0432\u0441\u0435\u043c\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438 \u0432 \u043d\u0438\u0445, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/300\/011\/481\/3000114813ccf348093c7e5dd50a0fd6.png\" width=\"972\" height=\"480\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/300\/011\/481\/3000114813ccf348093c7e5dd50a0fd6.png\"\/><\/figure>\n<p>\u041a\u0430\u043a \u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0435, \u043a\u0430\u0436\u0434\u044b\u0439 \u0437\u043d\u0430\u0435\u0442 \u043a\u0443\u0434\u0430 \u043e\u043d \u043f\u043e\u0448\u0451\u043b \u0438 \u0437\u0430\u0447\u0435\u043c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 remote \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u0430 \u0443 host \u0435\u0441\u0442\u044c navbar. \u041e\u043d\u0438 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439 \u043e\u0431\u0449\u0430\u044e\u0442\u0441\u044f, \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0442\u0430 \u0441\u0430\u043c\u0430\u044f \u043c\u0430\u0433\u0438\u044f, \u043a\u043e\u0433\u0434\u0430 \u0432\u0441\u0435 \u0434\u0440\u0443\u0433 \u043e \u0434\u0440\u0443\u0433\u0435 \u0437\u043d\u0430\u044e\u0442 \u0438 \u043d\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c.<\/p>\n<p>\u041d\u043e, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0432\u0441\u0451 \u0442\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u043e.<\/p>\n<h2>\u00ab\u041f\u0440\u043e\u0441\u0442\u043e\u00bb \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u044b\u0435<\/h2>\n<p>\u0415\u0441\u043b\u0438 \u043f\u0440\u043e WMF \u0435\u0441\u0442\u044c \u0434\u043e\u043a\u043b\u0430\u0434 \u043d\u0430 \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0438 \u0438\u043b\u0438 \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0430 \u0425\u0430\u0431\u0440\u0435, \u0442\u043e, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0442\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u0431\u043b\u043e\u043a \u043f\u0440\u043e \u043e\u0448\u0438\u0431\u043a\u0438. \u0418 \u0441\u0430\u043c\u0430\u044f \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0434\u043e\u043a\u043b\u0430\u0434\u0430\u0445 \u2014\u00a0 \u044d\u0442\u043e <code>shared module is not available for eager consumption<\/code>: \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0434\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u044d\u0442\u0438 \u0434\u0432\u0430 \u0444\u0430\u0439\u043b\u0430 \u0434\u043b\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u0438\u043d\u0430\u0447\u0435 Webpack \u043d\u0435 \u043f\u043e\u043c\u0435\u0447\u0430\u0435\u0442 \u0444\u0430\u0439\u043b\u044b \u043a\u0430\u043a \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u0438 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0448\u0430\u0440\u0438\u0442\u044c \u044d\u0442\u0438 \u043c\u043e\u0434\u0443\u043b\u0438.<\/p>\n<p>\u0410 \u0435\u0441\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0438, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0430 \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u044f\u0445 \u043d\u0435 \u0433\u043e\u0432\u043e\u0440\u044f\u0442. \u041f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043e\u043d\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u044b\u0435. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e \u0442\u0435\u0445, \u0447\u0442\u043e \u0432\u044b\u043b\u0435\u0437\u043b\u0438 \u0443 \u043d\u0430\u0441.<\/p>\n<h3>Split chunks<\/h3>\n<p>\u0412 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0443 \u043d\u0430\u0441 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u0441\u043f\u043b\u0438\u0442 \u0447\u0430\u043d\u043a\u043e\u0432 \u0434\u043b\u044f \u0434\u043e\u043b\u0433\u043e\u0433\u043e \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f: \u0440\u0430\u0437\u0434\u0435\u043b\u044f\u0435\u043c \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0447\u0430\u043d\u043a\u0438 \u043d\u0430 \u0433\u0440\u0443\u043f\u043f\u044b, \u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0434\u043e\u043b\u0433\u043e \u0436\u0438\u0432\u0443\u0442 \u0432 \u043a\u0435\u0448\u0435. \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0442\u0435\u043c\u0430, \u043d\u043e \u0441 WMF \u043d\u0430\u0434\u043e \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u043d\u0443\u0442\u044c \u0434\u0432\u0435 \u0433\u043b\u0430\u0432\u043d\u044b\u0435 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0445\u043e\u0436\u0434\u0435\u043d\u0438\u044f \u0447\u0430\u043d\u043a\u0430 \u043d\u0430\u043c \u0432 api \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0434\u043b\u044f <code>expose<\/code> \u043d\u0430\u0434\u043e \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0447\u0430\u043d\u043a\u0430 \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u0431\u043e\u0440\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0441\u043f\u043b\u0438\u0442\u0435 \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0435\u0433\u043e \u043d\u0430\u0439\u0442\u0438. \u041d\u0438\u0433\u0434\u0435 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 api WMF \u043f\u0440\u043e \u044d\u0442\u043e \u043d\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e, \u0447\u0442\u043e <code>expose<\/code> \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u0430\u043a \u0441\u0442\u0440\u043e\u043a\u0443, \u0430 \u0435\u0449\u0451 \u0438 \u043a\u0430\u043a \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043f\u043e\u043b\u0435\u043c <code>name<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u0442 \u0441\u0430\u043c\u044b\u0439 entrypoint. \u041d\u043e \u043c\u044b \u043d\u0430\u0448\u043b\u0438 \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0432 \u043f\u043b\u0430\u0433\u0438\u043d\u0435.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/be9\/5c2\/252\/be95c2252b7d57f1acd69e9452037249.png\" width=\"1228\" height=\"738\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/be9\/5c2\/252\/be95c2252b7d57f1acd69e9452037249.png\"\/><\/figure>\n<p>\u0412\u0442\u043e\u0440\u043e\u0435: \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0435\u043a\u0442 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0443 \u043d\u0430\u0441 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0443 \u043d\u0430\u0441 \u0434\u0432\u0430 entrypoint: \u0431\u0430\u0437\u043e\u0432\u044b\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043b\u0438 \u0432 Entry Webpack, \u0438 \u0442\u043e\u0442, \u0447\u0442\u043e \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u043e\u043b\u0435 <code>expose<\/code> \u0432 \u043f\u043b\u0430\u0433\u0438\u043d\u0435 MF. \u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u0435\u0441\u043b\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u0445\u0443\u043a \u0438 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u043e\u043d \u0432\u0438\u0434\u0438\u0442, \u0447\u0442\u043e \u044d\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 entrypoint.\u00a0<\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043b\u0438 \u0432\u043e\u0442 \u044d\u0442\u043e\u0442 \u00ab<a href=\"https:\/\/webpack.js.org\/api\/module-methods\/#magic-comments\">magic comments<\/a>\u00bb \u043e\u0442 Webpack, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0439\u0442\u0438 \u044d\u0442\u0438 \u0447\u0430\u043d\u043a\u0438 \u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c. <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/f69\/581\/72c\/f6958172c015fd6908f11da45654ad66.png\" width=\"1350\" height=\"248\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f69\/581\/72c\/f6958172c015fd6908f11da45654ad66.png\"\/><\/figure>\n<p>\u0410 \u0432 \u0441\u0430\u043c\u043e\u043c Webpack \u043d\u0430\u0434\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0444\u0438\u043b\u044c\u0442\u0440 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 entry.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/00e\/afe\/8b3\/00eafe8b3dafbc0a5d8dafd7128d01fb.png\" width=\"1350\" height=\"590\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/00e\/afe\/8b3\/00eafe8b3dafbc0a5d8dafd7128d01fb.png\"\/><\/figure>\n<p>\u0422\u0430\u043a \u043c\u044b \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u043f\u0435\u0440\u0432\u044b\u0435 \u0434\u0432\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0430 \u043f\u043e entry.\u00a0<\/p>\n<p>\u042d\u0442\u043e \u043d\u0430\u0448 \u0433\u0440\u0435\u0439\u0434: \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u0432 \u043e\u0434\u0438\u043d \u0447\u0430\u043d\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0435\u0434\u043a\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/2b1\/8d7\/f6b\/2b18d7f6bcf23ddd6e3786c7fe43ff04.png\" width=\"1350\" height=\"492\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2b1\/8d7\/f6b\/2b18d7f6bcf23ddd6e3786c7fe43ff04.png\"\/><\/figure>\n<h3>css-\u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u044b<\/h3>\n<p>\u0421 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0430\u043c\u0438 \u0435\u0441\u0442\u044c \u0434\u0432\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b.<\/p>\n<p><strong>\u21161. \u041a\u0430\u0436\u0434\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0438\u043c\u0435\u0435\u0442 \u0441\u0432\u043e\u0438 \u0441\u0442\u0438\u043b\u0438: \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0438 \u0442\u0435, \u0447\u0442\u043e \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0438\u0437 ui-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/strong>\u00a0<\/p>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0435 \u0432\u044b\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0432 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443, \u0442\u043e \u0441\u0442\u0438\u043b\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0431\u0443\u0434\u0443\u0442 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435. \u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u044d\u0442\u043e \u0437\u0430\u043c\u0435\u0442\u043d\u043e, \u043a\u043e\u0433\u0434\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0433\u0440\u0443\u0437\u0438\u0448\u044c \u0434\u0432\u0430 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0430 \u0438 \u0441\u0442\u0438\u043b\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u043a\u043e\u043d\u0435\u0446, \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u044f \u0441\u0442\u0438\u043b\u0438 \u0432\u0441\u0435\u0445 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u0442\u043e api mini-css contract \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442, \u043a\u0430\u043a\u0438\u0435 \u0447\u0430\u043d\u043a\u0438 \u0438\u0434\u0443\u0442 \u0432\u043f\u0435\u0440\u0435\u0434\u0438 ui-\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a. \u0421 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0430\u043c\u0438 \u0442\u0430\u043a \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f.<\/p>\n<p><strong>\u21162. \u0412\u0435\u0440\u0441\u0438\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0440\u0430\u0437\u043d\u044f\u0442\u0441\u044f: \u0440\u0430\u0437\u043d\u044b\u0435 ui-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u0440\u0430\u0437\u043d\u044b\u0435 \u043e\u0442\u0441\u0442\u0443\u043f\u044b, \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0432\u0441\u0451 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432\u0430\u0442\u044c \u0438 \u043a\u0443\u0447\u0430 \u0431\u0430\u0433\u043e\u0432 \u0432\u044b\u043b\u0435\u0437\u0430\u0435\u0442.<\/strong>\u00a0<\/p>\n<p>\u041d\u0430\u043c \u0441\u0442\u0430\u043b\u043e \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0447\u0442\u043e \u0441\u0442\u0438\u043b\u0438 \u043d\u0430\u0434\u043e \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0445 \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u0440\u0430\u0441\u043a\u0430\u0442\u043a\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0442\u044b \u043d\u0435 \u0442\u0435\u0433\u0430\u043b \u0434\u0440\u0443\u0433\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443.<\/p>\n<p>\u0415\u0441\u0442\u044c \u0434\u0432\u0430 \u0440\u0435\u0448\u0435\u043d\u0438\u044f.<\/p>\n<p><strong>\u041f\u0435\u0440\u0432\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u0438 \u0441\u0442\u0438\u043b\u0435\u0439 \u2014\u00a0\u044d\u0442\u043e Shadow dom.\u00a0<\/strong><\/p>\n<p>\u041d\u043e \u0443 \u043d\u0435\u0433\u043e \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b: \u0441 \u043c\u043e\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u0442\u0438\u043b\u0435\u0439, \u0441 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u0431\u0449\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 \u0438\u0437 \u043d\u0435\u0433\u043e, \u043f\u0440\u0438\u0434\u0443\u043c\u044b\u0432\u0430\u043d\u0438\u0435\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u043e \u0448\u0430\u0440\u0438\u043d\u0433\u0443 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438. \u0418\u0431\u043e \u0435\u0441\u043b\u0438 \u0437\u0430\u043a\u0438\u043d\u0443\u0442\u044c \u0441\u0442\u0438\u043b\u0438 Shadow dom, \u0442\u043e \u043e\u043d\u0438:<\/p>\n<ul>\n<li>\n<p>\u0432\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u0443\u0434\u0430\u043b\u044f\u0442\u0441\u044f \u0438\u0437 \u043d\u0435\u0433\u043e;<\/p>\n<\/li>\n<li>\n<p>\u0430 \u0432\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u043d\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u0438\u0437 \u0434\u0440\u0443\u0433\u043e\u0433\u043e Shadow dom \u0434\u043e \u043d\u0435\u0433\u043e.\u00a0<\/p>\n<\/li>\n<\/ul>\n<p>\u041c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c.\u00a0<\/p>\n<p><strong>\u0412\u0442\u043e\u0440\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u2014 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0430\u043c\u0438 \u043a\u043b\u0430\u0441\u0441\u044b, \u0432\u0441\u0451, \u0447\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u0441\u0442\u0438\u043b\u0435\u0439, \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c \u043e\u0442 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0443.<\/strong><\/p>\n<p>\u0412\u043e\u0442 \u044d\u0442\u043e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043c\u044b \u0438 \u0432\u044b\u0431\u0440\u0430\u043b\u0438 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c api css-loader. \u0423\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0441\u0442\u0438\u043b\u0435\u0439 \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u043f\u0443\u0442\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f hash \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u043a\u0430\u0436\u0434\u043e\u0433\u043e (\u043a\u043b\u0430\u0441\u0441\u0430).\u00a0<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/278\/6b3\/b0f\/2786b3b0fa577f72dedf23903043c6f8.png\" width=\"758\" height=\"520\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/278\/6b3\/b0f\/2786b3b0fa577f72dedf23903043c6f8.png\"\/><\/figure>\n<p>\u041d\u043e \u0437\u0434\u0435\u0441\u044c \u0432\u0430\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u0441\u0442\u0438\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435, \u0431\u044b\u043b\u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u043a\u0430\u043a css module, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e Webpack \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u0439\u0442\u0438 \u0442\u043e, \u0447\u0442\u043e \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c.<\/p>\n<p>\u0414\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f hash \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c api css loader \u0434\u043b\u044f Webpack, \u0430 \u0435\u0441\u043b\u0438 \u0442\u043e\u0447\u043d\u0435\u0435 \u2014 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>getLocalIdent<\/code>. \u0427\u0435\u0440\u0435\u0437 \u043d\u0435\u0451 \u043c\u044b \u0438\u043c\u0435\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 css \u043c\u043e\u0434\u0443\u043b\u0435\u0439.\u00a0<\/p>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043b\u043e\u0436\u043d\u043e (\u0437\u0434\u0435\u0441\u044c \u0447\u0430\u0441\u0442\u044c).<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/6fe\/09c\/13e\/6fe09c13ec65fa6fc784763d0b87d69e.png\" width=\"1324\" height=\"656\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/6fe\/09c\/13e\/6fe09c13ec65fa6fc784763d0b87d69e.png\"\/><\/figure>\n<p>\u041d\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u0447\u0442\u043e \u0432 \u043a\u043e\u043d\u0446\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c hash \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 app name \u0438\u0437 <code>package.json<\/code>, \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u044f \u043d\u0430\u0448\u0438 \u0441\u0442\u0438\u043b\u0438. \u0412 \u043a\u043e\u0434\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043d\u0438\u0436\u0435, \u043a\u043e\u0433\u0434\u0430 \u043a\u043e \u0432\u0441\u0435\u043c \u043a\u043b\u0430\u0441\u0441\u0430\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d hash <code>f7abfc<\/code>.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/97f\/428\/df5\/97f428df51d31fcc96258b0d23a2ea4f.png\" width=\"1302\" height=\"348\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/97f\/428\/df5\/97f428df51d31fcc96258b0d23a2ea4f.png\"\/><\/figure>\n<p>\u041d\u043e \u0447\u0442\u043e, \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 css vars \u0438\u043b\u0438 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0438\u043c\u043f\u043e\u0440\u0442 \u0441\u0442\u0438\u043b\u0435\u0439 \u0431\u0435\u0437 css module, \u0434\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u0438\u0437 Webpack?<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0441 \u0442\u0430\u043a\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u043e\u0439 \u0441\u0442\u0430\u043b swiper, \u0441\u0442\u0438\u043b\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043a\u0430\u043a <code>styles.css<\/code> \u0444\u0430\u0439\u043b. \u0414\u043e \u043d\u0435\u0451 \u043d\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u0438\u0437 Webpack.\u00a0<\/p>\n<p>\u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043d\u0430\u0448\u0430 ui-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u043d\u0430 css-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u0438 \u043e\u043d\u0438 \u0442\u043e\u0447\u043d\u043e \u0431\u0443\u0434\u0443\u0442 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432\u0430\u0442\u044c \u0438\u0437-\u0437\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u0439. \u0418\u0445 \u0442\u043e\u0436\u0435 \u043d\u0430\u0434\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u043c\u0438.<\/p>\n<p>\u0420\u0435\u0448\u0435\u043d\u0438\u0435 \u2014 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 postcss \u043f\u043b\u0430\u0433\u0438\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0442\u0430\u043a\u0438\u0445 \u0441\u0442\u0438\u043b\u0435\u0439, \u043a\u0430\u043a swiper, \u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0441 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.\u00a0<\/p>\n<p>\u041a\u0440\u0430\u0442\u043a\u043e: \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043cc\u044f \u043f\u043e \u0432\u0441\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0438\u043c \u043f\u0440\u0435\u0444\u0438\u043a\u0441.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/43f\/8c2\/40d\/43f8c240dd59a61eb456477c97e296a3.png\" width=\"1060\" height=\"756\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/43f\/8c2\/40d\/43f8c240dd59a61eb456477c97e296a3.png\"\/><\/figure>\n<p>\u0414\u043b\u044f css-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0442\u0430\u043a\u0436\u0435: \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043c\u0441\u044f \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0440\u0435\u0444\u0438\u043a\u0441.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/371\/e1d\/b06\/371e1db061efe4e7771cd62326af0931.png\" width=\"1118\" height=\"796\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/371\/e1d\/b06\/371e1db061efe4e7771cd62326af0931.png\"\/><\/figure>\n<p>\u041a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u2014 <code>. newclick-referal-ui<\/code>. \u041f\u0440\u043e\u0441\u0442\u043e \u0447\u0443\u0442\u044c \u0432\u044b\u0448\u0435 \u0441\u0442\u0430\u0432\u0438\u043c ID \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u0434\u043e\u0431\u0438\u0432\u0430\u0435\u043c\u0441\u044f \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/16d\/311\/c66\/16d311c6694d787e5a094bfe4bfa21d6.png\" width=\"1132\" height=\"464\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/16d\/311\/c66\/16d311c6694d787e5a094bfe4bfa21d6.png\"\/><\/figure>\n<p>\u0410 \u0441 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u043e\u043d\u0438 \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u0442 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043a \u043f\u0440\u043e\u0435\u043a\u0442\u0443.\u00a0<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b44\/671\/243\/b44671243b0ca0a2c0f3f91d5dfffed0.png\" width=\"1404\" height=\"398\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b44\/671\/243\/b44671243b0ca0a2c0f3f91d5dfffed0.png\"\/><\/figure>\n<p>\u041f\u043e\u0434\u044b\u0442\u043e\u0436\u0438\u043c \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438:<\/p>\n<ol>\n<li>\n<p>\u0423\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0440\u0435\u0448\u0438\u043b\u0438 \u0432\u0441\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u0430\u043c\u0438.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u041e\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0448\u0430\u0440\u0438\u0442\u044c ui-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0447\u0435\u0440\u0435\u0437 WMF. \u042d\u0442\u043e \u0432\u0430\u0436\u043d\u043e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0437\u0430\u0448\u0430\u0440\u0438\u0442\u044c \u043a\u0430\u043a\u0443\u044e-\u0442\u043e \u043a\u043d\u043e\u043f\u043e\u0447\u043a\u0443 \u0438\u043b\u0438 \u0441\u0430\u0439\u0434 \u043f\u0430\u043d\u0435\u043b\u044c, \u0430 \u043e\u043d\u0430 \u0432\u0435\u0441\u0438\u0442 \u043c\u043d\u043e\u0433\u043e \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u0447\u0442\u0438 \u0432\u043e \u0432\u0441\u0435\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445. \u0421 Shadow dom \u043d\u0435 \u0431\u044b\u043b\u043e \u0431\u044b \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f, \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0431\u044b \u043e\u043f\u044f\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043a\u043e\u0441\u0442\u044b\u043b\u0438\u0442\u044c.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u0421\u0442\u0438\u043b\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0432 \u043f\u0430\u043c\u044f\u0442\u0438 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u0441\u0435\u0441\u0441\u0438\u0438, \u0447\u0442\u043e \u0447\u0443\u0442\u044c \u0443\u043b\u0443\u0447\u0448\u0430\u0435\u0442 \u043f\u0435\u0440\u0444\u043e\u0440\u043c\u0430\u043d\u0441. \u041c\u044b \u0445\u043e\u0434\u0438\u043c \u043f\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u043c \u0438 \u043e\u043d\u0438 \u0442\u0430\u043a\u0436\u0435 \u043b\u0435\u0436\u0430\u0442 \u0443 \u043d\u0430\u0441 \u0432 \u043f\u0430\u043c\u044f\u0442\u0438.<\/p>\n<\/li>\n<\/ol>\n<p>\u0412\u0440\u043e\u0434\u0435 \u0432\u0441\u0451 \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0435\u0437\u0436\u0430\u0442\u044c?\u00a0<\/p>\n<h2>\u041a\u0430\u043a \u043f\u0435\u0440\u0435\u0435\u0437\u0436\u0430\u0442\u044c?<\/h2>\n<p><strong>\u21161. \u0412\u0435\u0441\u044c \u043a\u043e\u0434 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438.<\/strong><\/p>\n<p>\u041c\u044b \u0432 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435 \u0442\u0430\u043a \u0438 \u0441\u0434\u0435\u043b\u0430\u043b\u0438: \u0432\u0441\u0451, \u0447\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 Webpack, \u0441 \u043b\u0438\u043d\u0442\u0435\u0440\u043e\u043c, \u0443\u0448\u043b\u043e \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443. \u041f\u0440\u043e\u0441\u0442\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0435\u0451 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c, \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u0438 \u043f\u0440\u043e\u0435\u043a\u0442 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0441\u044f.<\/p>\n<p><strong>\u21162. \u041d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0432 \u043b\u0438\u043d\u0442\u0435\u0440 \u0441 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u043c \u0434\u0435\u0434\u043b\u0430\u0439\u043d\u043e\u043c, \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u0431\u0443\u0434\u0443\u0442 \u0432\u0430\u043b\u0438\u0442\u044c\u0441\u044f \u0431\u0438\u043b\u0434\u044b.<\/strong><\/p>\n<p>\u0412\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u043e\u043c\u043c\u0438\u0442\u0430 \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0439\u0442\u0435 \u043b\u044e\u0434\u044f\u043c, \u0447\u0442\u043e \u043d\u0430\u0434\u043e \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0438\u0442\u044c, \u0438\u043d\u0430\u0447\u0435 \u0441\u043a\u043e\u0440\u043e \u043f\u043e\u0441\u0442\u0430\u0432\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0437\u0430\u0431\u043b\u043e\u0447\u0435\u043d\u044b.\u00a0<\/p>\n<p><strong>\u21163. \u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u0440\u044b\u043c \u0438 \u043d\u043e\u0432\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c.\u00a0<\/strong><\/p>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u0432\u043e\u0442 \u043e\u0431 \u044d\u0442\u043e\u043c \u0438 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c.<\/p>\n<h3>\u041e\u0431\u0440\u0430\u0442\u043d\u0430\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c<\/h3>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/4d1\/afd\/465\/4d1afd465b3819b5d661b22099b33e01.png\" width=\"1084\" height=\"618\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/4d1\/afd\/465\/4d1afd465b3819b5d661b22099b33e01.png\"\/><\/figure>\n<p>\u0412 host-ui \u0435\u0441\u0442\u044c \u043e\u0431\u0449\u0438\u0439 \u043a\u043e\u043d\u0444\u0438\u0433 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u0433\u0434\u0435 \u043c\u044b \u043f\u043e \u0444\u043b\u0430\u0433\u0443 WMF \u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041a\u043e\u043d\u0444\u0438\u0433 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u0434\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u0430\u043a\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/0b9\/e2b\/940\/0b9e2b94099b27e151bb5a0f55fec4e7.png\" width=\"1600\" height=\"502\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/0b9\/e2b\/940\/0b9e2b94099b27e151bb5a0f55fec4e7.png\"\/><\/figure>\n<p>\u0423 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0435\u0441\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433 \u0441 <code>appID<\/code> \u0438 <code>contextRoot<\/code>, \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0444\u043b\u0430\u0433 <code>wmf: true<\/code>. \u041f\u043e \u043d\u0435\u043c\u0443 \u043c\u044b \u043a\u0430\u043a \u0440\u0430\u0437 \u0438 \u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a\u043e\u0439 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>\u0412 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442\u0430 \u0438\u0434\u0451\u043c \u0437\u0430 <code>remoteEntry<\/code>. \u0415\u0441\u043b\u0438 \u043e\u043d \u043d\u0435 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u0442 \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u2014 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0441\u0442\u0430\u0440\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/473\/7dd\/8c0\/4737dd8c03b7819bf9588e853472a655.png\" width=\"1328\" height=\"446\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/473\/7dd\/8c0\/4737dd8c03b7819bf9588e853472a655.png\"\/><\/figure>\n<p>\u0423 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0430 \u0435\u0441\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043c\u0438\u043d\u0443\u0441: \u043f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u0430\u043a\u0442, \u043d\u0430\u0434\u043e \u043a\u0430\u0442\u0438\u0442\u044c \u043e\u0431\u0430 \u0438 \u0432\u043c\u0435\u0441\u0442\u0435, \u0438\u043d\u0430\u0447\u0435 \u0431\u0443\u0434\u0443\u0442 \u0441\u044b\u043f\u0430\u0442\u044c\u0441\u044f \u043e\u0448\u0438\u0431\u043a\u0438 \u043d\u0430 404 <code>remoteEntry.js<\/code>. \u0425\u043e\u0442\u044f \u0432\u0441\u0451 \u0438 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u043d\u043e \u0432 \u043b\u043e\u0433\u0430\u0445 \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u043a\u0443\u0447\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043a \u043d\u0435\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0440\u0443\u0447\u043a\u0435.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/6ec\/d24\/78b\/6ecd2478bf6efd029e15e36c2a351646.png\" width=\"1600\" height=\"500\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/6ec\/d24\/78b\/6ecd2478bf6efd029e15e36c2a351646.png\"\/><\/figure>\n<h2>\u0426\u0438\u0444\u0440\u044b \u0438 \u043c\u0435\u0442\u0440\u0438\u043a\u0438<\/h2>\n<p>\u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u043c\u044b \u0432\u0441\u0451 \u0437\u0430\u043c\u0435\u0440\u0438\u043b\u0438 \u0434\u043e \u0438 \u043f\u043e\u0441\u043b\u0435, \u0447\u0442\u043e\u0431\u044b \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/413\/b2b\/885\/413b2b8854660341e9d21032d0b6b540.png\" width=\"1536\" height=\"750\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/413\/b2b\/885\/413b2b8854660341e9d21032d0b6b540.png\"\/><\/figure>\n<p>\u041d\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 \u0443\u0432\u0438\u0434\u0435\u043b\u0438, \u0447\u0442\u043e \u043f\u0440\u0438\u0440\u043e\u0441\u0442 \u0431\u0430\u043d\u0434\u043b\u0430 \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u043b\u0441\u044f \u043d\u0430 \u0442\u0440\u0435\u0442\u044c, \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043c\u044b \u0448\u0430\u0440\u0438\u043c \u043f\u043e\u043a\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0440\u0435\u0434\u043a\u043e.<\/p>\n<p>\u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0442\u0430\u043a\u0436\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u043b\u0430\u0441\u044c \u2014 \u0432 \u0441\u0440\u0435\u0434\u043d\u0435\u043c \u043d\u0430 45\u201350% \u043f\u043e \u0434\u0430\u0448\u0431\u043e\u0440\u0434\u0430\u043c. \u0426\u0438\u0444\u0440\u044b \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u043d\u0430 \u0434\u0438\u0441\u0442\u0430\u043d\u0446\u0438\u0438, \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0445\u043e\u0434\u0438\u0442 \u043f\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u0438 \u0432\u0441\u0451 \u0431\u043e\u043b\u044c\u0448\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>libphonenumber<\/code> \u043d\u0435\u0442 \u0432 \u043a\u0430\u043a\u043e\u043c-\u0442\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0435: \u043e\u043d \u043f\u043e\u0434\u0442\u044f\u043d\u0443\u043b\u0441\u044f, \u043f\u043e\u0448\u0451\u043b \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435, \u043d\u043e \u0442\u0430\u043a\u0436\u0435 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0432 \u043f\u0430\u043c\u044f\u0442\u0438.<\/p>\n<p>\u041f\u0430\u0440\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c.\u00a0<\/p>\n<p>\u0413\u043b\u0430\u0432\u043d\u044b\u0439 \u044d\u043a\u0440\u0430\u043d.\u00a0<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/be5\/358\/02b\/be535802ba89df4506024ed2358a926b.png\" width=\"1332\" height=\"188\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/be5\/358\/02b\/be535802ba89df4506024ed2358a926b.png\"\/><\/figure>\n<p>\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u043e\u0432.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/3e0\/2d2\/7d5\/3e02d27d5ebe917d41ea5d8b55c7fbb1.png\" width=\"1332\" height=\"170\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/3e0\/2d2\/7d5\/3e02d27d5ebe917d41ea5d8b55c7fbb1.png\"\/><\/figure>\n<p>\u042d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u0431\u0430\u043d\u0434\u043b\u0430 \u0438 \u043e\u0442\u043a\u0430\u0437\u0430 \u043e\u0442 bmf \u0441\u043b\u043e\u044f, \u0430 \u0442\u043e\u0447\u043a\u0430 \u0432\u0445\u043e\u0434\u0430 \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e js-\u0444\u0430\u0439\u043b \u0432\u0435\u0441\u043e\u043c \u0432 3 \u041a\u0431, \u0447\u0442\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e.<\/p>\n<h2>\u0418\u0442\u043e\u0433\u043e<\/h2>\n<figure class=\"\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/c62\/a76\/751\/c62a76751349fea6f12670834a18c6f2.png\" width=\"432\" height=\"244\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c62\/a76\/751\/c62a76751349fea6f12670834a18c6f2.png\"\/><\/figure>\n<p>\u041a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0430\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u043b \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e: \u043a\u0430\u0436\u0434\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u043b\u043e\u0441\u044c \u043e\u0449\u0443\u0442\u0438\u043c\u043e \u0434\u043e\u043b\u0433\u043e. \u0421\u0435\u0439\u0447\u0430\u0441 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0430\u0441\u044c: \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u043b\u043e \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f. \u041d\u0430 \u0441\u043a\u0440\u0438\u043d\u043a\u0430\u0441\u0442\u0435 \u0432\u0438\u0434\u043d\u043e, \u043a\u0430\u043a \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0430\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f77\/1be\/e22\/f771bee222ed1ce235481cafb9807f41.gif\" width=\"692\" height=\"388\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f77\/1be\/e22\/f771bee222ed1ce235481cafb9807f41.gif\"\/><\/figure>\n<p>\u041c\u044b \u0432\u044b\u0431\u0440\u0430\u043b\u0438 WMF \u043f\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c \u043f\u0440\u0438\u0447\u0438\u043d\u0430\u043c:<\/p>\n<ul>\n<li>\n<p>\u0415\u0433\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u043d\u0435\u0434\u0440\u0438\u0442\u044c \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443. \u0414\u0430\u0436\u0435 \u043d\u0435 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b\u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u0434\u0440\u0443\u0433\u043e\u0433\u043e.<\/p>\n<\/li>\n<li>\n<p>\u0423 WMF \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u043d\u0446\u0435\u043f\u0442 \u043e\u0449\u0443\u0442\u0438\u043c\u043e \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0435\u0442\u0441\u044f: \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 next.js, rspack, server-components. \u0412 \u0433\u0430\u0439\u0434\u043b\u0430\u0439\u043d, \u0447\u0442\u043e \u043e\u043d\u0438 \u0432\u044b\u0441\u0442\u0440\u043e\u0438\u043b\u0438, \u043f\u0438\u0448\u0443\u0442, \u0447\u0442\u043e \u0445\u043e\u0442\u044f\u0442 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c, \u0438 \u0442\u0430\u043c \u043c\u043d\u043e\u0433\u043e \u0432\u0441\u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0433\u043e.<\/p>\n<\/li>\n<\/ul>\n<p>\u041d\u0443 \u0430 \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u043c\u044b \u043f\u043e\u0434\u0447\u0435\u0440\u043a\u043d\u0443\u043b\u0438 \u0433\u043b\u0430\u0432\u043d\u044b\u0435 \u043f\u0443\u0442\u0438 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u043d\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b:<\/p>\n<ul>\n<li>\n<p>CDN: \u0443 \u043d\u0430\u0441 \u0431\u0430\u043d\u043a \u0438 \u043d\u0430 CDN \u0437\u0430\u0432\u044f\u0437\u0430\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0432\u0430\u0436\u043d\u044b\u0445 \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u043e\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430 \u043f\u043e\u0434\u043c\u0435\u043d\u0443 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432. \u0421 WMF \u044d\u0442\u043e \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c. \u0422\u043e\u0447\u043d\u0435\u0435 \u043c\u043e\u0436\u043d\u043e, \u043d\u043e \u043f\u043b\u0430\u0433\u0438\u043d\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044d\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442, \u0432\u0430\u043b\u044f\u0442\u0441\u044f. \u041f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0434\u043e\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c.<\/p>\n<\/li>\n<li>\n<p>Discovery service. \u042d\u0442\u043e \u043a\u0430\u043a \u0440\u0430\u0437-\u0442\u0430\u043a\u0438 \u043f\u0440\u043e <code>remoteEntry.js<\/code> \u0444\u0430\u0439\u043b. \u041c\u044b \u0445\u043e\u0442\u0438\u043c \u0435\u0433\u043e \u0437\u0430\u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 hash, \u0447\u0442\u043e\u0431\u044b \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043e\u0434\u043d\u043e\u0439 \u043f\u043e\u0441\u0442\u0430\u0432\u043a\u0438 \u043e\u043d\u0430 \u0437\u0430\u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043b\u0430\u0441\u044c, \u0430 \u043d\u0435 \u043a\u0430\u043a \u0441\u0435\u0439\u0447\u0430\u0441 \u0441 Nginx \u043f\u043e 15 \u043c\u0438\u043d\u0443\u0442.<\/p>\n<\/li>\n<li>\n<p>SSR. \u0411\u044b\u043b\u043e \u0431\u044b \u043a\u0440\u0443\u0442\u043e, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0451 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043b\u043e\u0441\u044c \u0441\u0440\u0430\u0437\u0443, \u0430 \u043d\u0435 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u041d\u0443 \u0438 Advanced split chunks \u2014 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u043a\u0443\u0441\u043a\u043e\u0432, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u043e\u0432\u044b\u0445 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0441\u0442\u0430\u043b\u043e \u043c\u0435\u043d\u044c\u0448\u0435<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435, \u044d\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0430\u043b\u043e \u2014\u00a0\u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435.<\/p>\n<hr\/>\n<p>\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c\u043e\u0435:<\/p>\n<p><a href=\"https:\/\/habr.com\/ru\/companies\/alfa\/articles\/668118\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"embed_link embed_layout-right\"><\/p>\n<div class=\"embed__thumb\" style=\"background-image: url(&quot;https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f43\/579\/b70\/f43579b7000dddfceb67ae0f706db2a6.jpeg&quot;);\"><\/div>\n<div class=\"embed__caption\">\n<div class=\"embed__caption-title\"><span>Webpack Module Federation: \u00ab\u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0435\u00bb \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0432 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430\u0445<\/span><\/div>\n<div class=\"embed__caption-description\">Module Federation \u2014 \u044d\u0442\u043e \u043f\u043e\u0434\u0445\u043e\u0434, \u043f\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438&#8230;<\/div>\n<p><span class=\"embed__caption-host\">habr.com<\/span><\/div>\n<p><\/a><a href=\"https:\/\/habr.com\/ru\/companies\/alfa\/articles\/686954\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"embed_link embed_layout-right\"><\/p>\n<div class=\"embed__thumb\" style=\"background-image: url(&quot;https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/394\/6f8\/ef7\/3946f8ef7b5e6024d1973bb11c81b359.png&quot;);\"><\/div>\n<div class=\"embed__caption\">\n<div class=\"embed__caption-title\"><span>\u041a\u0430\u043a \u043c\u044b \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043b\u0438 \u043d\u0430 React-router v6: \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0435 \u043a\u0430\u043c\u043d\u0438 \u0438 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b<\/span><\/div>\n<div class=\"embed__caption-description\">\u041c\u044b \u043f\u0435\u0440\u0435\u0448\u043b\u0438 \u043d\u0430 \u0448\u0435\u0441\u0442\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u0438 React-router. \u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0433\u043b\u043e \u043d\u0430\u043c \u0440\u0435\u0448\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043e\u043f\u0440\u0435\u0434\u0435&#8230;<\/div>\n<p><span class=\"embed__caption-host\">habr.com<\/span><\/div>\n<p><\/a><a href=\"https:\/\/habr.com\/ru\/companies\/alfa\/articles\/691976\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"embed_link embed_layout-right\"><\/p>\n<div class=\"embed__thumb\" style=\"background-image: url(&quot;https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/ca1\/ca9\/52d\/ca1ca952d01a2289d8da5129a4a83dbc.png&quot;);\"><\/div>\n<div class=\"embed__caption\">\n<div class=\"embed__caption-title\"><span>\u0423\u043b\u0443\u0447\u0448\u0430\u0435\u043c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u0434\u0430 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Compound Components<\/span><\/div>\n<div class=\"embed__caption-description\">\u042f \u043b\u044e\u0431\u043b\u044e \u0441\u0442\u0430\u043b\u043a\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0441 \u0442\u0440\u0443\u0434\u043d\u043e\u0441\u0442\u044f\u043c\u0438. \u041d\u043e \u0441 \u0442\u0430\u043a\u0438\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0448\u0438\u0442\u044c, \u043f\u043e\u0434\u0443\u043c\u0430\u0442\u044c \u043d\u0430\u0434 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d&#8230;<\/div>\n<p><span class=\"embed__caption-host\">habr.com<\/span><\/div>\n<p><\/a><a href=\"https:\/\/habr.com\/ru\/companies\/alfa\/articles\/729020\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"embed_link embed_layout-right\"><\/p>\n<div class=\"embed__thumb\" style=\"background-image: url(&quot;https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/3f1\/1a9\/0c8\/3f11a90c8c6d97daf4895ac5e1d8f829.jpg&quot;);\"><\/div>\n<div class=\"embed__caption\">\n<div class=\"embed__caption-title\"><span>\u0417\u0430\u0447\u0435\u043c \u043d\u0430\u043c Reactive \u0438 \u043a\u0430\u043a \u0435\u0433\u043e \u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c<\/span><\/div>\n<div class=\"embed__caption-description\">\u041f\u0440\u0438\u0432\u0435\u0442! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0422\u0430\u0442\u044c\u044f\u043d\u0430 \u0420\u0443\u0444\u0430\u043d\u043e\u0432\u0430 . \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u0438 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c Reactive (\u0420\u0435\u0430\u043a\u0442\u0438\u0432). \u0412 \u0441\u0442&#8230;<\/div>\n<p><span class=\"embed__caption-host\">habr.com<\/span><\/div>\n<p><\/a><a href=\"https:\/\/habr.com\/ru\/companies\/alfa\/articles\/742024\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\" class=\"embed_link embed_layout-right\"><\/p>\n<div class=\"embed__thumb\" style=\"background-image: url(&quot;https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b38\/1a8\/f2f\/b381a8f2f072c5f6457a66890431dcbf.png&quot;);\"><\/div>\n<div class=\"embed__caption\">\n<div class=\"embed__caption-title\"><span>\u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u0440\u043e\u043c\u0438\u0441\u0441 \u0432 enterprise. \u041e\u043f\u044b\u0442 Alfa People. \u041d\u0430\u0448 \u043f\u0443\u0442\u044c \u0441\u043a\u0432\u043e\u0437\u044c \u0434\u0436\u0443\u043d\u0433\u043b\u0438<\/span><\/div>\n<div class=\"embed__caption-description\">\u041f\u0440\u0438\u0432\u0435\u0442, \u043c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0414\u043c\u0438\u0442\u0440\u0438\u0439 \u041c\u0430\u0440\u043a\u043e\u0432. \u042f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u043e\u0440 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 \u0410\u043b\u044c\u0444\u0430-\u0411\u0430\u043d\u043a\u0435. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438&#8230;<\/div>\n<p><span class=\"embed__caption-host\">habr.com<\/span><\/div>\n<p><\/a><\/p>\n<p>\u200b\u200b\u041f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0439\u0442\u0435\u0441\u044c \u043d\u0430 \u0422\u0435\u043b\u0435\u0433\u0440\u0430\u043c-\u043a\u0430\u043d\u0430\u043b<a href=\"https:\/\/t.me\/alfadigital_jobs\"><u> Alfa Digital Jobs<\/u><\/a> \u2014 \u0442\u0430\u043c \u043c\u044b \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043f\u0440\u043e \u043d\u0430\u0448\u0443 \u0440\u0430\u0431\u043e\u0442\u0443 (\u0438\u043d\u043e\u0433\u0434\u0430 \u0448\u0443\u0442\u043a\u0438 \u0448\u0443\u0442\u0438\u043c), \u0434\u0435\u043b\u0438\u043c\u0441\u044f \u043d\u043e\u0432\u043e\u0441\u0442\u044f\u043c\u0438 \u0438 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c\u0438 \u0441\u043e\u0432\u0435\u0442\u0430\u043c\u0438.\u00a0<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/866944\/\"> https:\/\/habr.com\/ru\/articles\/866944\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041e \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430\u0445 \u0438 \u0441\u043e\u043f\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 Model Federation \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<h2>\u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u043e\u0432 \u0434\u043e Module Federation<\/h2>\n<p>\u041f\u0440\u0438\u0432\u0435\u0442, \u043c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0421\u0442\u0435\u043f\u0430\u043d, \u044f \u0433\u043b\u0430\u0432\u043d\u044b\u0439 frontend-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432 \u0410\u043b\u044c\u0444\u0430-\u0411\u0430\u043d\u043a\u0435. \u041f\u0440\u043e\u0435\u043a\u0442\u043e\u043c, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u043e\u0439\u0434\u0451\u0442 \u0440\u0435\u0447\u044c, \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u0448\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u0430. \u0422\u043e\u043b\u044c\u043a\u043e \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0432 \u043d\u0435\u0439 60. \u041c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u043c\u0430\u043d\u0434 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0431\u043e\u043b\u0435\u0435 50 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439, \u043f\u0440\u0438\u043d\u043e\u0441\u044f\u0449\u0438\u0445 \u043f\u0440\u0438\u0431\u044b\u043b\u044c \u0431\u0438\u0437\u043d\u0435\u0441\u0443.<\/p>\n<p>\u0423 \u043d\u0430\u0441 \u0440\u0430\u043d\u0435\u0435 \u0431\u044b\u043b\u0438 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u044b, \u043d\u043e \u043e\u043d\u0438 \u0431\u044b\u043b\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u044b \u043d\u0435 \u043d\u0430 WMF. \u041d\u0435 \u0432\u0434\u0430\u0432\u0430\u044f\u0441\u044c \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u0432\u0441\u0451 \u0431\u044b\u043b\u043e \u0443\u0441\u0442\u0440\u043e\u0435\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u0438\u0447\u0438\u043d\u044b \u043f\u0435\u0440\u0435\u0435\u0437\u0434\u0430. \u0414\u0443\u043c\u0430\u044e, \u0431\u0443\u0434\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044f, \u0447\u0442\u043e \u043f\u0440\u043e\u0435\u043a\u0442 \u0431\u043e\u043b\u044c\u0448\u043e\u0439.<\/p>\n<p>\u0412\u043e\u0442 \u0442\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0421\u043b\u0435\u0432\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f, \u0441\u043f\u0440\u0430\u0432\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u0430\u044f.\u00a0<\/figcaption><\/div>\n<\/figure>\n<p>\u041d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u0432\u0438\u0434\u0435\u043d remote \u0438 host. \u0412 host\u2019\u0435 \u0441\u043d\u0438\u0437\u0443 \u0442\u0430\u043f\u0431\u0430\u0440, \u0441\u0432\u0435\u0440\u0445\u0443 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u043a\u0430\u0440\u0442\u0430\u0445. \u0412 \u043d\u0435\u0433\u043e \u043c\u043e\u0436\u0435\u0442 \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c\u0441\u044f \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u0432\u0441\u0451, \u0447\u0442\u043e \u0443\u0433\u043e\u0434\u043d\u043e. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u043a\u0435 \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u0434\u0430\u0448\u0431\u043e\u0440\u0434, \u0430 \u0441\u043f\u0440\u0430\u0432\u0430 \u043f\u043b\u0430\u0442\u0435\u0436\u0438. \u0422\u0430\u043a\u0438\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 50 \u0438 \u043a\u0430\u0436\u0434\u043e\u0435 \u043a\u0430\u0442\u0438\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e.<\/p>\n<p>\u041a\u0430\u0436\u0434\u043e\u0435 remote-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u043f\u0443\u0442\u0451\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u043f\u043e appID: <code>__mount<\/code> \u0438 <code>__unmount<\/code>.\u00a0<\/p>\n<figure class=\"full-width\"><\/figure>\n<figure class=\"full-width\"><\/figure>\n<p>\u042d\u0442\u043e\u0442 \u043c\u0435\u0442\u043e\u0434 (\u0432\u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0438) \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 <code>React.createElement<\/code> \u043f\u043e \u043a\u0430\u043a\u043e\u0439-\u043b\u0438\u0431\u043e \u043d\u043e\u0434\u0435, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043b\u0435\u0436\u0430\u043b\u0430 \u0432 \u0445\u043e\u0441\u0442\u0435.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0443 \u043d\u0430\u0441 \u0431\u044b\u043b \u043d\u0435\u043a\u0438\u0439 Node.js \u0441\u043b\u043e\u0439 (<code>api getAssetsAndConfig<\/code>), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u0434\u0430\u0432\u0430\u043b \u0441\u0442\u0430\u0442\u0438\u043a\u0443 \u0438 \u043a\u043e\u043d\u0444\u0438\u0433. \u0412 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u044d\u0442\u043e \u0431\u044b\u043b\u0438 \u0441\u0441\u044b\u043b\u043a\u0438 \u0434\u043e \u0441\u0442\u0430\u0442\u0438\u043a\u0438 \u0441 js \u0438 css, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0444\u0438\u0447\u0438 \u0441 \u0431\u0435\u043a\u0430.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u042d\u0442\u0443 \u0441\u0442\u0430\u0442\u0438\u043a\u0443 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u043b host \u0438 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u043b \u0435\u0451 \u0432 dom.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0422\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043c\u044b \u0431\u0440\u0430\u043b\u0438 \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u043b\u0438 \u0442\u0435 \u0441\u0430\u043c\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b <code>__mount<\/code> \u0438 <code>__unmount<\/code>: <code>__mount<\/code> \u0432\u044b\u0437\u044b\u0432\u0430\u043b\u0441\u044f \u2014 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043b\u043e\u0441\u044c.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0412\u0441\u0451, \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u044b \u0433\u043e\u0442\u043e\u0432\u044b.\u00a0<\/p>\n<p>\u041f\u0440\u0438 <code>__unmount<\/code> \u043c\u044b \u0443\u0434\u0430\u043b\u044f\u043b\u0438 \u0442\u0435 \u0441\u0430\u043c\u044b\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0438 JS-\u0444\u0430\u0439\u043b\u044b, \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u0431\u043e\u0440\u043e\u043b\u0438\u0441\u044c \u0441 \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u0435\u0439 \u0441\u0442\u0438\u043b\u0435\u0439. \u041a\u043e\u043d\u0444\u043b\u0438\u043a\u0442 \u0441\u0442\u0438\u043b\u0435\u0439 \u2014\u00a0\u044d\u0442\u043e \u0431\u043e\u043b\u044c\u043d\u0430\u044f \u0442\u0435\u043c\u0430. \u041d\u043e \u043e\u0431 \u044d\u0442\u043e\u043c \u043f\u043e\u0437\u0436\u0435.<\/p>\n<h2>\u0427\u0442\u043e \u0437\u0434\u0435\u0441\u044c \u043d\u0435 \u0442\u0430\u043a?<\/h2>\n<p><strong>\u21161. \u041d\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438.<\/strong><\/p>\n<p>\u0418\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u043d\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 \u0431\u0430\u043d\u0434\u043b \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u043b 1 \u043c\u0431 br, \u0447\u0442\u043e \u043d\u0435\u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0433\u043e \u043c\u043e\u043d\u043e\u043b\u0438\u0442\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0430 \u0443 \u043d\u0430\u0441 \u0442\u0443\u0442 \u043e\u0434\u0438\u043d \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442 \u0432\u0435\u0441\u0438\u0442 \u0441\u0442\u043e\u043b\u044c\u043a\u043e. \u0410 \u0432\u0441\u0435\u0433\u043e \u0438\u0445 50.\u00a0<\/p>\n<p><strong>\u21162. \u0412\u044b\u0437\u043e\u0432<\/strong> <code>getAssetsAndConfig<\/code> <strong>\u043d\u0435 \u0434\u0430\u0432\u0430\u043b \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0432\u043e\u0434\u043e\u043f\u0430\u0434 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u0437\u0430\u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u0434\u043e \u043a\u043e\u043d\u0444\u0438\u0433\u0430.<\/strong><\/p>\n<p>\u042d\u0442\u043e \u0431\u044b\u043b BFF-\u0441\u043b\u043e\u0439, \u043c\u0438\u0434\u043b\u043e\u0432\u0430\u044f \u0440\u0443\u0447\u043a\u0430, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u0441\u0442\u0443\u0447\u0430\u043b\u0438\u0441\u044c. \u0415\u0451 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u0437\u0430\u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043e\u0434\u043d\u043e\u0439 \u0440\u0430\u0441\u043a\u0430\u0442\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0448\u043b\u0430 \u043e\u0434\u043d\u0430 \u0432\u0435\u0440\u0441\u0438\u044f \u0438 \u0437\u0430\u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043b\u0430\u0441\u044c \u0434\u043e \u043a\u043e\u043d\u0446\u0430. \u0421 \u043d\u0430\u0448\u0438\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c \u0442\u0430\u043a \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p><strong>\u21163. \u0421\u0430\u043c\u043e\u043f\u0438\u0441\u043d\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a.<\/strong><\/p>\n<p>\u041d\u0430 \u0435\u0433\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0443\u0445\u043e\u0434\u0438\u043b\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u0421\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u043e\u0432, \u043c\u044b \u043f\u043e\u043d\u044f\u043b\u0438, \u0447\u0442\u043e \u043f\u043e\u0440\u0430. \u041f\u043e\u0440\u0430 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043d\u0430 \u043e\u0431\u0449\u0438\u0439 \u043a\u043e\u043d\u0446\u0435\u043f\u0442. \u0418 \u0441\u0430\u043c\u044b\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u043c \u0441\u0442\u0430\u043b Module Federation.<\/p>\n<h2>\u041f\u043e\u0447\u0435\u043c\u0443 Module Federation?<\/h2>\n<p><strong>\u21161. \u041d\u0435 \u043d\u0430\u0434\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0443 \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/strong>\u00a0<\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f WMF \u043a\u0430\u043a \u043f\u043b\u0430\u0433\u0438\u043d Webpack, \u0430 \u043e\u043d \u0443 \u043d\u0430\u0441 \u0438 \u0442\u0430\u043a \u0431\u044b\u043b. \u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u043f\u043b\u0430\u0433\u0438\u043d \u2014 \u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b, \u043d\u0435 \u0441\u0430\u043c\u0430\u044f \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430.<\/p>\n<p><strong>\u21162. WMF \u2014 \u044d\u0442\u043e \u043f\u043b\u0430\u0433\u0438\u043d \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c. <\/strong><\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u043a\u0438\u0448\u043a\u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u043d\u0430 GitHub, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0448\u044c.<\/p>\n<p><strong>\u21163. \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438.<\/strong>\u00a0<\/p>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u0436\u0435 \u0441\u0430\u043c\u044b\u0435 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0432\u0440\u043e\u0434\u0435 \u0438\u043a\u043e\u043d\u043e\u043a \u0438\u043b\u0438 \u0448\u0440\u0438\u0444\u0442\u043e\u0432. \u0413\u043b\u0430\u0432\u043d\u043e\u0435, \u0447\u0442\u043e\u0431\u044b \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u043e\u0442\u044f\u043d\u0443\u043b\u0430 \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432. \u042d\u0442\u043e \u043a\u0438\u043b\u043b\u0435\u0440-\u0444\u0438\u0447\u0430, \u0438\u0437-\u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439, \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u0432\u0441\u0435 \u0432\u044b\u0431\u0438\u0440\u0430\u044e\u0442 \u044d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434.<\/p>\n<p><strong>\u21164. \u0423\u0441\u0442\u043e\u044f\u0432\u0448\u0438\u0439\u0441\u044f \u043f\u0440\u043e\u0434\u0443\u043a\u0442 \u043d\u0430 \u0440\u044b\u043d\u043a\u0435 \u0441 \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432.<\/strong>\u00a0<\/p>\n<p>\u0415\u0441\u0442\u044c \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439, \u0432 \u043d\u0451\u043c \u043b\u0435\u0436\u0430\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043e\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0433\u043e \u0434\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e \u2014 \u0432\u0441\u0451, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p><strong>\u21165. \u0415\u0441\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430\u0445, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a vite, rspack, rollup.<\/strong><\/p>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438 \u043e\u0442\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043e\u0442 Webpack \u0432 \u043f\u043e\u043b\u044c\u0437\u0443 \u043a\u0430\u043a\u0438\u0445-\u0442\u043e \u0431\u043e\u043b\u0435\u0435 \u0431\u044b\u0441\u0442\u0440\u044b\u0445, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Nexts \u043f\u0438\u0448\u0435\u0442 Turbopack. \u041d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b \u0443\u043f\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u043f\u043b\u0430\u0433\u0438\u043d \u043d\u0430 Webpack, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0442\u043e\u043c \u043e\u043f\u044f\u0442\u044c \u0432\u0441\u0451 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c. \u0410 WMF, \u043a\u0430\u043a \u043d\u0435\u043a\u0438\u0439 \u043e\u0431\u0449\u0438\u0439 \u043a\u043e\u043d\u0446\u0435\u043f\u0442, \u0435\u0441\u0442\u044c \u043d\u0430 \u043c\u043d\u043e\u0433\u0438\u0445 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430\u0445.<\/p>\n<p><strong>\u21166. \u0412\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043e\u0431\u044b\u0447\u043d\u044b\u043c JS-\u0441\u043a\u0440\u0438\u043f\u0442\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/strong>\u00a0<\/p>\n<p>\u0423 \u043d\u0430\u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043a\u0440\u0443\u0442\u044f\u0442\u0441\u044f \u0432 Kubernetes: \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u2014 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440. \u0421 \u0442\u0430\u043a\u0438\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u0443\u0435\u0434\u0435\u0448\u044c. \u041d\u0430\u0434\u043e \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043d\u0430 S3, \u043c\u0435\u043d\u044f\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0434\u0435\u043f\u043b\u043e\u044f.<\/p>\n<p>\u042d\u0442\u043e\u0442 \u043f\u0443\u043d\u043a\u0442 \u043d\u0430\u0441 \u0438\u0437\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043d\u0430\u043b\u0438\u0447\u0438\u044f BFF-\u0441\u043b\u043e\u044f. \u0418 \u043c\u044b, \u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u043c\u043e\u0436\u0435\u043c \u0441\u044a\u0435\u0445\u0430\u0442\u044c \u0441 Kubernetes (\u0430 \u0441 \u043d\u0435\u0433\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u0441\u044a\u0435\u0437\u0436\u0430\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u0442\u044f\u0436\u0435\u043b\u043e), \u0438 \u043d\u0435 \u0438\u043c\u0435\u0442\u044c \u044d\u0442\u043e\u0433\u043e Node JS \u0441\u043b\u043e\u044f.\u00a0<\/p>\n<p>\u21167. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0448\u0430\u0440\u0438\u0442\u044c \u043e\u0431\u0449\u0438\u0435 \u0441\u0442\u043e\u0440\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 react-query. \u041c\u043e\u0436\u043d\u043e \u0437\u0430\u0448\u0430\u0440\u0438\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0447\u0435\u0440\u0435\u0437 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044f \u0432 \u043f\u043b\u0430\u0433\u0438\u043d\u0435 \u0438 \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0432\u043e \u0432\u0441\u0435\u0445 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0430\u0445.<\/p>\n<p>\u0418\u0442\u0430\u043a, \u043c\u044b \u0440\u0435\u0448\u0438\u043b\u0438, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d WMF. \u041a\u0430\u043a \u0432\u043d\u0435\u0434\u0440\u044f\u0442\u044c?\u00a0<\/p>\n<h2>\u041a\u0440\u0430\u0442\u043a\u043e \u043e \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0438<\/h2>\n<figure class=\"full-width\"><\/figure>\n<p>\u0414\u043b\u044f \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430 \u043f\u0430\u043f\u043e\u043a.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0413\u043b\u0430\u0432\u043d\u044b\u0435 \u0438\u0437 \u043d\u0438\u0445 \u2014\u00a0\u044d\u0442\u043e <code>bootstrap.tsx<\/code>, <code>remote.tsx<\/code> \u0438 <code>index.ts<\/code>.\u00a0<\/p>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u043d\u0438\u0445 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435.<\/p>\n<h3>remote.tsx\u00a0<\/h3>\n<p>\u041e\u0434\u0438\u043d \u0438\u0437 \u0442\u0440\u0451\u0445 \u0444\u0430\u0439\u043b\u043e\u0432, \u0447\u0442\u043e \u043e\u0442\u0434\u0430\u0451\u0442\u0441\u044f \u043d\u0430\u0440\u0443\u0436\u0443 \u0438 \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 host.\u00a0<\/p>\n<p>\u041d\u0438\u0436\u0435 \u043c\u044b \u043a\u0430\u043a \u0440\u0430\u0437 \u0433\u043e\u0432\u043e\u0440\u0438\u043c: \u00ab\u0412\u043e\u0442 \u044d\u0442\u043e\u0442 \u043a\u0443\u0441\u043e\u043a \u043a\u043e\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u043d\u0430\u0440\u0443\u0436\u0438\u00bb.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0415\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c host, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u0432 Webpack \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c <code>exposes<\/code>.\u00a0<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0414\u0432\u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u0430 \u043d\u0443\u0436\u043d\u044b \u0441\u0443\u0433\u0443\u0431\u043e \u0434\u043b\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0434\u043d\u044f\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0438 \u0434\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0441\u0432\u043e\u0451.\u00a0<\/p>\n<h3>index.ts<\/h3>\n<p>\u042d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432\u0441\u0435\u0433\u043e \u0438\u0437 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438, \u0433\u0434\u0435 \u043c\u044b \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u043c bootstrap-\u0444\u0430\u0439\u043b.\u00a0<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c Webpack \u043d\u0430 \u044d\u0442\u0438 \u043f\u0443\u0442\u0438.\u00a0<\/p>\n<figure class=\"full-width\"><\/figure>\n<h3>bootstrap.tsx<\/h3>\n<p>\u0410 <code>bootstrap.ts<\/code>, \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u043f\u043e\u0434\u043d\u0438\u043c\u0430\u0435\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e \u0432 standalone \u0440\u0435\u0436\u0438\u043c\u0435, \u0447\u0442\u043e\u0431\u044b \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0438\u043b\u0438 \u043f\u0440\u043e\u0433\u043d\u0430\u0442\u044c \u0442\u0435\u0441\u0442\u044b \u043d\u0430 CI.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0412 <code>InitNewclickDevEntrypoint<\/code> \u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u0442\u044c \u0443\u0442\u0438\u043b\u0438\u0442\u044b <code>@axe-core\/react<\/code> \u0434\u043b\u044f \u044e\u0437\u0430\u0431\u0438\u043b\u0438\u0442\u0438. \u0412 \u043e\u0431\u0449\u0435\u043c, \u0435\u0441\u0442\u044c \u0432\u0441\u0451, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442 \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u043e.<\/p>\n<figure class=\"full-width\"><\/figure>\n<h2>\u041d\u0435 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u043b\u0438 \u043c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0434\u043b\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f?<\/h2>\n<p>\u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u0434\u0430 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043d\u0435\u043b\u044c\u0437\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0441\u0451 \u0432\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0430\u043a\u0435\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u00ab\u043f\u0440\u0435\u0441\u0435\u0442\u044b\u00bb.<\/p>\n<pre><code class=\"javascript\">\u201cdevDependencies\u201d: { \u201c@alfa-bank\/newclick-arui-scripts-presets\u201d: \u201c9.14.1\u201d,<\/code><\/pre>\n<p>\u0412 \u043d\u0435\u0433\u043e \u0441\u043a\u0438\u0434\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432\u0441\u0435 Webpack \u043a\u043e\u043d\u0444\u0438\u0433\u0438 \u0438 \u043c\u043e\u0434\u0443\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0448\u0430\u0440\u0438\u0442\u044c. \u0427\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u043d\u0430 \u043d\u043e\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c <code>@alfa-bank\/newclick-arui-scripts-presets<\/code> \u0438 \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u043f\u0430\u043f\u043e\u043a \u043f\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0443.<\/p>\n<h3>\u041f\u043b\u0430\u0433\u0438\u043d WMF<\/h3>\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a \u0440\u0430\u0437 \u0438 \u043e\u043d\u0438 \u2014\u00a0\u043c\u043e\u0434\u0443\u043b\u0438. \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043b\u0435\u0436\u0430\u0442 \u0432 \u043e\u0431\u0449\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435, \u0433\u0434\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433\u0438 \u0441\u0440\u0430\u0437\u0443 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u041d\u0430 \u043f\u0435\u0440\u0432\u043e\u0439 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438 \u043c\u044b \u0448\u0430\u0440\u0438\u043c \u0442\u043e\u043b\u044c\u043a\u043e react, react-dom, \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0440\u043e\u0443\u0442\u044b \u2014 \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0440\u0435\u0434\u043a\u043e.<\/p>\n<h3>\u041f\u0443\u0442\u044c \u0434\u043e \u0430\u0441\u0441\u0435\u0442\u043e\u0432\u00a0<\/h3>\n<p>\u041f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c <code>publicPath<\/code>.<\/p>\n<pre><code class=\"javascript\">output: { \u00a0\u00a0\u00a0\u00a0\u2026newConfig.output, \u00a0\u00a0\u00a0\u00a0publicPath: \u2018\/${name}\/assets\/\u2019, },<\/code><\/pre>\n<p>\u042d\u0442\u043e \u0432\u0430\u0436\u043d\u043e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e Model Federation \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 \u043f\u0443\u0442\u044c \u043a\u0430\u043a \u0440\u0430\u0437 \u0442\u0430\u043a\u0438 \u0432 <code>remoteEntry<\/code>. \u041e\u043d \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u043a\u0443\u0434\u0430 \u0438\u0434\u0442\u0438 \u0434\u043e <code>\/${name}\/assets<\/code>.<\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443 \u043d\u0430\u0441 \u0431\u044b\u043b\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430, \u0447\u0442\u043e \u043f\u0440\u0438 \u043f\u0440\u043e\u0448\u043b\u043e\u0439 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0435 \u043f\u0443\u0442\u044c \u0431\u044b\u043b \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c. \u0418 \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0441\u0442\u0430\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c WMF, \u0442\u043e \u0434\u0432\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0433\u0440\u0443\u0437\u0438\u043b\u0438\u0441\u044c \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u0438 \u043d\u0430\u0447\u0430\u043b\u0438 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u0432\u0430\u0442\u044c. \u041f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u00ab\u0434\u0438\u043d\u0430\u043c\u0438\u043a\u0438\u00bb.<\/p>\n<h3>\u041a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 remoteEntry<\/h3>\n<p>\u041d\u0430 \u043f\u0435\u0440\u0432\u043e\u0439 \u0438\u0442\u0435\u0440\u0430\u0446\u0438\u0438 \u043d\u0430 Nginx \u043c\u044b \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043b\u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u044d\u0448 \u0444\u0430\u0439\u043b\u0430 \u0432 15 \u043c\u0438\u043d\u0443\u0442, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0433 \u0447\u0443\u0432\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0431\u044f \u043a\u043e\u043c\u0444\u043e\u0440\u0442\u043d\u043e \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u0441\u0435\u0441\u0441\u0438\u0438.\u00a0<\/p>\n<p>\u041d\u043e api Webpack \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0445\u0430\u0440\u0434\u043a\u043e\u0434\u0438\u0442\u044c <code>remoteEntry.js<\/code>, \u043d\u043e \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a \u043d\u0435\u043c\u0443 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0445\u0435\u0448, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u043e \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043e\u0434\u043d\u043e\u0433\u043e \u0440\u0435\u043b\u0438\u0437\u0430. \u0417\u0430\u0440\u0435\u043b\u0438\u0437\u0438\u043b\u0441\u044f, \u043f\u0440\u043e\u0448\u043b\u043e \u043d\u0435\u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0430 \u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0434\u043e \u0441\u0438\u0445 \u043f\u043e\u0440 \u0432 \u0445\u0435\u0448\u0435 \u043b\u0435\u0436\u0438\u0442 \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b\u0438\u043a.<\/p>\n<figure class=\"full-width\"><\/figure>\n<figure class=\"full-width\"><\/figure>\n<h2>Host<\/h2>\n<p>\u0410 \u0432\u043e\u0442 \u0432 host \u043c\u044b \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u0447\u0435\u0440\u0435\u0437 \u043f\u043b\u0430\u0433\u0438\u043d, \u0430 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 (\u0447\u0443\u0442\u044c \u0434\u0430\u043b\u044c\u0448\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043f\u043e\u0447\u0435\u043c\u0443). \u041f\u043e\u043a\u0430 \u0447\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0443, \u0447\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c <code>ModuleFederationPlugin<\/code> \u2014 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u0432\u0441\u0435 \u0442\u0435 \u0436\u0435 \u043c\u043e\u0434\u0443\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u043e\u0442\u0438\u043c \u0448\u0430\u0440\u0438\u0442\u044c.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0425\u043e\u0441\u0442 \u0443 \u043d\u0430\u0441 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435, \u0430 remote \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u2014 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435.\u00a0<\/p>\n<pre><code class=\"javascript\">new NodeFederationPlugin(serverWmnfPluginOptions, {}), new StreamingTargetPlugin(serverWmnfPluginOptions), \u2026 export const serverWmfPluginOptions = { \u00a0\u00a0\u00a0\u00a0name, \u00a0\u00a0\u00a0\u00a0library: { type: \u2018commonjs-module\u2019 }, };<\/code><\/pre>\n<p>\u0418 \u0435\u0441\u043b\u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0430\u043a, \u0442\u043e \u043d\u043e\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u0440\u0443\u0433\u0430\u0442\u044c\u0441\u044f: \u00ab\u00ab\u0422\u044b \u043f\u043e\u0434\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0448\u044c api, \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0443 \u043c\u0435\u043d\u044f \u043d\u0435\u0442\u00bb. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0434\u0432\u0430 \u043f\u043b\u0430\u0433\u0438\u043d\u0430-\u0437\u0430\u0433\u043b\u0443\u0448\u043a\u0438, \u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435, \u043f\u043e\u043a\u0430 \u0443 \u043d\u0430\u0441 \u043d\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u0433\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0434\u043b\u044f MF.<\/p>\n<h3>\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043e \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435<\/h3>\n<p>\u0412 \u043d\u0435\u0439 \u0435\u0441\u0442\u044c \u043c\u0430\u0441\u0441\u0430 \u043f\u043b\u044e\u0441\u043e\u0432.<\/p>\n<ul>\n<li>\n<p>\u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f \u0434\u043e api WMF, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0441\u043a\u043e\u0443\u043f \u0438\u043b\u0438 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0447\u0430\u043d\u043a\u0438.\u00a0<\/p>\n<\/li>\n<li>\n<p>\u041d\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0432\u0441\u0435\u0445 <code>remoutEntry.js<\/code> \u0444\u0430\u0439\u043b\u043e\u0432. \u042d\u0442\u043e \u0432\u0430\u0436\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e. \u0415\u0441\u043b\u0438 \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0441\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u043f\u043b\u0430\u0433\u0438\u043d\u0435, \u0442\u043e \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432\u0441\u0435 \u0444\u0430\u0439\u043b\u044b \u0437\u0430\u0433\u0440\u0443\u0437\u044f\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u0430\u0440\u0442\u0435. \u0410 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e.<\/p>\n<\/li>\n<li>\n<p>\u0421\u0430\u043c\u043e\u0435 \u0432\u0430\u0436\u043d\u043e\u0435 \u2014\u00a0\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0437\u043d\u0430\u0442\u044c \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0432 \u043d\u0451\u043c \u0431\u0443\u0434\u0435\u0442 \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u0431\u043e\u0440\u043a\u0438. \u041a\u043e\u043d\u0444\u0438\u0433 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u0442\u044f\u043d\u0443\u0442\u044c \u0441 \u043c\u0438\u0434\u043b\u0430 (\u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u043e\u0442\u043a\u0443\u0434\u0430 \u0443\u0433\u043e\u0434\u043d\u043e).<\/p>\n<\/li>\n<\/ul>\n<h3>\u041a\u0430\u043a \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/h3>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c <code>remoteEntry.js<\/code> \u0444\u0430\u0439\u043b. \u0412 \u043d\u0451\u043c \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0432\u0441\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u0447\u0430\u043d\u043a\u0430\u0445, \u043f\u0430\u043a\u0435\u0442\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u043a\u0443\u0434\u0430 \u0438\u0434\u0442\u0438 \u0434\u043e \u0430\u0441\u0441\u0435\u0442\u043e\u0432 \u0438 \u043c\u043d\u043e\u0433\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435.\u00a0<\/p>\n<p>\u0418\u0437 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u044d\u0442\u043e\u0433\u043e \u0441\u043a\u0440\u0438\u043f\u0442\u0430 \u0432 dom.\u00a0<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c api WMF.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0417\u0434\u0435\u0441\u044c:\u00a0<\/p>\n<ul>\n<li>\n<p>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c <code>__webpack_init_sharing<\/code> \u2014\u00a0\u044d\u0442\u043e \u043e\u0431\u0449\u0438\u0439 \u0441\u043a\u043e\u0443\u043f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439.<\/p>\n<\/li>\n<li>\n<p>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043d\u0430\u0448 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u0430\u043a \u0440\u0430\u0437 \u0442\u0430\u043a\u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0432 <code>remoteEntry.js<\/code> \u0444\u0430\u0439\u043b\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u043e\u0431\u0449\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u0432 <code>remoteEntry.js<\/code> \u0444\u0430\u0439\u043b\u0435.<\/p>\n<\/li>\n<li>\n<p>\u0421\u043d\u0430\u0440\u0443\u0436\u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c \u0447\u0430\u043d\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u044b.\u00a0<\/p>\n<\/li>\n<\/ul>\n<p>\u0418 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043c\u043e\u0434\u0443\u043b\u044c.\u00a0<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0443 \u043d\u0430\u0441 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0430\u044f \u0441\u0442\u0430\u0442\u0438\u043a\u0430, \u0447\u0430\u043d\u043a\u0438 \u0432\u0437\u044f\u043b\u0438 \u0438\u0437 \u043e\u0431\u0449\u0435\u0433\u043e \u0441\u043a\u043e\u0443\u043f\u0430 \u0438\u043b\u0438 \u043e\u043d\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0438\u0441\u044c \u0438\u0437 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<pre><code class=\"javascript\">const Remote = await loadWmfComponent(scope, module);<\/code><\/pre>\n<p>\u041c\u043e\u0436\u043d\u043e \u0435\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0430\u0441\u0446\u0435\u043d\u0438\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u043b\u0435\u0439\u0437\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 host, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0438. \u0412 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435, \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a \u043c\u044b \u0435\u0433\u043e \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c.\u00a0<\/p>\n<p>\u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u0432\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0438 \u0432\u0441\u0451 \u0433\u043e\u0442\u043e\u0432\u043e.<\/p>\n<pre><code class=\"javascript\">React.lazy(memo(RemoteModule.default));<\/code><\/pre>\n<h3>\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u043e\u043c<\/h3>\n<p>\u0415\u0441\u043b\u0438 \u043e\u0447\u0435\u043d\u044c \u043a\u0440\u0430\u0442\u043a\u043e, \u0442\u043e \u0443 \u043d\u0430\u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f api react-router \u043f\u044f\u0442\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438. \u041c\u044b \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c\u0441\u044f \u0438 \u043d\u0430 host, \u0438 \u043d\u0430 remote \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435: \u0441\u043b\u0435\u0434\u0438\u043c \u0437\u0430 \u0432\u0441\u0435\u043c\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438 \u0432 \u043d\u0438\u0445, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u041a\u0430\u043a \u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u0435, \u043a\u0430\u0436\u0434\u044b\u0439 \u0437\u043d\u0430\u0435\u0442 \u043a\u0443\u0434\u0430 \u043e\u043d \u043f\u043e\u0448\u0451\u043b \u0438 \u0437\u0430\u0447\u0435\u043c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 remote \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u0430 \u0443 host \u0435\u0441\u0442\u044c navbar. \u041e\u043d\u0438 \u043c\u0435\u0436\u0434\u0443 \u0441\u043e\u0431\u043e\u0439 \u043e\u0431\u0449\u0430\u044e\u0442\u0441\u044f, \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0442\u0430 \u0441\u0430\u043c\u0430\u044f \u043c\u0430\u0433\u0438\u044f, \u043a\u043e\u0433\u0434\u0430 \u0432\u0441\u0435 \u0434\u0440\u0443\u0433 \u043e \u0434\u0440\u0443\u0433\u0435 \u0437\u043d\u0430\u044e\u0442 \u0438 \u043d\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c.<\/p>\n<p>\u041d\u043e, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0432\u0441\u0451 \u0442\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u043e.<\/p>\n<h2>\u00ab\u041f\u0440\u043e\u0441\u0442\u043e\u00bb \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u044b\u0435<\/h2>\n<p>\u0415\u0441\u043b\u0438 \u043f\u0440\u043e WMF \u0435\u0441\u0442\u044c \u0434\u043e\u043a\u043b\u0430\u0434 \u043d\u0430 \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0438 \u0438\u043b\u0438 \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0430 \u0425\u0430\u0431\u0440\u0435, \u0442\u043e, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0442\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u0431\u043b\u043e\u043a \u043f\u0440\u043e \u043e\u0448\u0438\u0431\u043a\u0438. \u0418 \u0441\u0430\u043c\u0430\u044f \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0434\u043e\u043a\u043b\u0430\u0434\u0430\u0445 \u2014\u00a0 \u044d\u0442\u043e <code>shared module is not available for eager consumption<\/code>: \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0434\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u044d\u0442\u0438 \u0434\u0432\u0430 \u0444\u0430\u0439\u043b\u0430 \u0434\u043b\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u0438\u043d\u0430\u0447\u0435 Webpack \u043d\u0435 \u043f\u043e\u043c\u0435\u0447\u0430\u0435\u0442 \u0444\u0430\u0439\u043b\u044b \u043a\u0430\u043a \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u0438 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0448\u0430\u0440\u0438\u0442\u044c \u044d\u0442\u0438 \u043c\u043e\u0434\u0443\u043b\u0438.<\/p>\n<p>\u0410 \u0435\u0441\u0442\u044c \u043e\u0448\u0438\u0431\u043a\u0438, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0430 \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u044f\u0445 \u043d\u0435 \u0433\u043e\u0432\u043e\u0440\u044f\u0442. \u041f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043e\u043d\u0438 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u044b\u0435. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e \u0442\u0435\u0445, \u0447\u0442\u043e \u0432\u044b\u043b\u0435\u0437\u043b\u0438 \u0443 \u043d\u0430\u0441.<\/p>\n<h3>Split chunks<\/h3>\n<p>\u0412<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-443160","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/443160","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=443160"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/443160\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=443160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=443160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=443160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}