{"id":389200,"date":"2024-06-29T08:26:31","date_gmt":"2024-06-29T08:26:31","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=389200"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=389200","title":{"rendered":"<span>Statoscope: \u043a\u0443\u0440\u0441 \u0438\u043d\u0442\u0435\u043d\u0441\u0438\u0432\u043d\u043e\u0439 \u0442\u0435\u0440\u0430\u043f\u0438\u0438 \u0434\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u0431\u0430\u043d\u0434\u043b\u0430<\/span>"},"content":{"rendered":"<div><!--[--><img loading=\"lazy\" decoding=\"async\" height=\"1\" src=\"https:\/\/www.facebook.com\/tr?id=2610199939046212&amp;ev=PageView&amp;noscript=1\" style=\"display:none;\" width=\"1\"><img loading=\"lazy\" decoding=\"async\" height=\"1\" src=\"https:\/\/vk.com\/rtrg?p=VK-RTRG-400285-cLVDA\" style=\"display:none;\" width=\"1\"><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>Statoscope \u2014 \u044d\u0442\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0430\u043d\u0430\u043b\u0438\u0437\u0430 webpack-\u0431\u0430\u043d\u0434\u043b\u043e\u0432, \u0430 \u044f \u0435\u0433\u043e \u0430\u0432\u0442\u043e\u0440 \u0438 \u043c\u0435\u0439\u043d\u0442\u0435\u0439\u043d\u0435\u0440. \u041e\u043d \u0437\u0430\u0440\u043e\u0434\u0438\u043b\u0441\u044f \u0432 \u0434\u0430\u043b\u0435\u043a\u043e\u043c 2016 \u0433\u043e\u0434\u0443 \u043a\u0430\u043a \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442, \u0430 \u0442\u0435\u043f\u0435\u0440\u044c \u044d\u0442\u043e \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u0442\u0443\u043b\u043a\u0438\u0442 \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430, \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u0438 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0441\u0431\u043e\u0440\u043a\u0438. <\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/wz\/xt\/pi\/wzxtpik-7jt0lplpsfsk4sggyok.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/wz\/xt\/pi\/wzxtpik-7jt0lplpsfsk4sggyok.jpeg\" data-blurred=\"true\"\/><\/p>\n<p>  <\/p>\n<p>\u0412 \u043d\u043e\u044f\u0431\u0440\u0435 \u043d\u0430 \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0438 <strong><a href=\"https:\/\/holyjs.ru\/?utm_source=habr&amp;utm_medium=595595\">HolyJS<\/a><\/strong> \u044f \u0432\u044b\u0441\u0442\u0443\u043f\u0438\u043b \u0441 \u0434\u043e\u043a\u043b\u0430\u0434\u043e\u043c \u043e Statoscope \u0438 \u043f\u0440\u043e\u0432\u0451\u043b \u0432\u043e\u0440\u043a\u0448\u043e\u043f \u043f\u043e \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e. \u0417\u0440\u0438\u0442\u0435\u043b\u044f\u043c \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u043e\u0441\u044c, \u0442\u0430\u043a \u0447\u0442\u043e \u043c\u044b \u0441 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0442\u043e\u0440\u0430\u043c\u0438 HolyJS \u0440\u0435\u0448\u0438\u043b\u0438, \u0447\u0442\u043e \u0434\u043e\u043a\u043b\u0430\u0434 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0438 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044f\u043c \u0425\u0430\u0431\u0440\u0430 \u2014\u00a0\u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e. \u0412\u0438\u0434\u0435\u043e\u0437\u0430\u043f\u0438\u0441\u044c \u0442\u043e\u0436\u0435 \u043f\u0440\u0438\u043b\u0430\u0433\u0430\u0435\u043c. <\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<div class=\"oembed\">\n<div class=\"tm-iframe_temp\" data-src=\"https:\/\/embedd.srv.habr.com\/iframe\/61b76d251370783b8bf93195\" data-style=\"\" id=\"61b76d251370783b8bf93195\" width=\"\"><\/div>\n<\/div>\n<p>  <\/p>\n<h2 id=\"oglavlenie\">\u041e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435<\/h2>\n<p>  <\/p>\n<ul>\n<li><a href=\"#story\">\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u0441\u0442\u043e\u0440\u0438\u0438<\/a><\/li>\n<li><a href=\"#analysis\">\u0410\u043d\u0430\u043b\u0438\u0437 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e<\/a><\/li>\n<li><a href=\"#reports\">\u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043e\u0442\u0447\u0451\u0442\u044b<\/a><\/li>\n<li><a href=\"#valid\">\u0412\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f<\/a><\/li>\n<li><a href=\"#requests\">\u0417\u0430\u043f\u0440\u043e\u0441\u044b \u0432 \u0441\u0442\u0430\u0442\u044b<\/a><\/li>\n<li><a href=\"#ci\">CI \u2014 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u0432\u0441\u0435 \u0432\u043c\u0435\u0441\u0442\u0435<\/a><\/li>\n<li><a href=\"#plans\">\u041f\u043b\u0430\u043d\u044b<\/a><\/li>\n<li><a href=\"#conclusion\">Call to action<\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<h2 id=\"nemnogo-istorii-anchorstoryanchor\">\u041d\u0435\u043c\u043d\u043e\u0433\u043e \u0438\u0441\u0442\u043e\u0440\u0438\u0438 <a name=\"story\"><\/a><\/h2>\n<p>  <\/p>\n<p>\u0412 2016 \u0433\u043e\u0434\u0443 \u044f \u0432\u044b\u043f\u0443\u0441\u0442\u0438\u043b \u043f\u0435\u0440\u0432\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u043e\u0433\u0434\u0430 \u043d\u0430\u0437\u044b\u0432\u0430\u043b\u0441\u044f \u0435\u0449\u0451 \u043d\u0435 Statoscope, \u0430 Webpack Runtime Analyzer. \u042d\u0442\u043e \u0431\u044b\u043b\u0430 \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0434\u0435\u043c\u043a\u0430 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430 <a href=\"https:\/\/github.com\/rempl\/rempl\">rempl<\/a> \u043e\u0442 \u0420\u043e\u043c\u0430\u043d\u0430 \u0414\u0432\u043e\u0440\u043d\u043e\u0432\u0430 (<a href=\"https:\/\/habr.com\/ru\/users\/lahmatiy\/\" class=\"user_link\">lahmatiy<\/a>).<\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u0445\u043e\u0442\u0435\u043b\u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u0441\u0431\u043e\u0440\u043a\u0438 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u0422\u043e \u0435\u0441\u0442\u044c \u0432\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0435 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0438 \u043e\u043d \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u0432\u0430\u0448\u0435\u0439 \u0441\u0431\u043e\u0440\u043a\u0438: \u0438\u0437 \u0447\u0435\u0433\u043e \u043e\u043d\u0430 \u0441\u043e\u0441\u0442\u043e\u0438\u0442, \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u043b\u0438 \u043e\u043d\u0430 \u0441\u0435\u0439\u0447\u0430\u0441, \u043a\u0430\u043a\u0438\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u0432\u043e\u0437\u043d\u0438\u043a\u043b\u0438. \u0422\u043e\u0433\u0434\u0430 \u0434\u043b\u044f \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u0438 \u043a\u043e\u043d\u0441\u043e\u043b\u044c\u043d\u044b\u0435 \u0443\u0442\u0438\u043b\u0438\u0442\u044b, \u043d\u043e \u043d\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u044b\u0435.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0433\u043e\u0434\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430\u0434 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c \u0443 \u043c\u0435\u043d\u044f \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u043b\u0438\u0441\u044c \u0438\u0434\u0435\u0438, \u0438 \u044f \u0437\u0430\u043c\u043e\u0440\u043e\u0437\u0438\u043b \u0435\u0433\u043e. \u041d\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u043e\u0433\u0434\u0430 \u0436\u0435 \u043d\u0430\u0447\u0430\u043b \u0431\u043e\u043b\u044c\u0448\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 webpack, \u043a\u043e\u043d\u0442\u0440\u0438\u0431\u044c\u044e\u0442\u0438\u043b \u0432 \u0435\u0433\u043e \u044f\u0434\u0440\u043e (\u043e\u0431 \u044d\u0442\u043e\u043c \u0443\u0436\u0435 <a href=\"https:\/\/www.youtube.com\/watch?v=qKz9YAeKYMs\">\u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043b<\/a> \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0438\u0437 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 <a href=\"https:\/\/holyjs.ru\/?utm_source=habr&amp;utm_medium=595311\">HolyJS<\/a>). \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 2018-\u043c \u0437\u0430\u0445\u043e\u0442\u0435\u043b \u0432\u043e\u0437\u0440\u043e\u0434\u0438\u0442\u044c Webpack Runtime Analyzer \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u043d\u0430\u043a\u043e\u043f\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430.<\/p>\n<p>  <\/p>\n<p>\u0412 \u043e\u043a\u0442\u044f\u0431\u0440\u0435 2020 \u0433\u043e\u0434\u0430 \u044f \u0432\u044b\u043f\u0443\u0441\u0442\u0438\u043b \u043f\u0435\u0440\u0432\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e Statoscope. \u041f\u043e \u0441\u0443\u0442\u0438, \u044d\u0442\u043e Webpack Runtime Analyzer, \u043d\u043e \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u043e\u0431\u0451\u0440\u0442\u043a\u0435 \u0441 \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u043a\u0430\u0447\u0430\u043d\u043d\u044b\u043c\u0438 \u0444\u0438\u0447\u0430\u043c\u0438 \u2014 \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0434\u0443\u043c\u0430\u043d\u043d\u044b\u0439, \u0433\u043b\u0443\u0431\u043e\u043a\u0438\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u0432\u0430\u0448\u0435\u0433\u043e \u0431\u0430\u043d\u0434\u043b\u0430. <\/p>\n<p>  <\/p>\n<p>\u0412 2021-\u043c Statoscope \u0441\u0442\u0430\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0443 \u043d\u0430\u0441 \u0432 \u042f\u043d\u0434\u0435\u043a\u0441\u0435, \u043f\u0440\u0438\u0447\u0435\u043c \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u0440\u0430\u0437\u043d\u044b\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b: \u042f\u043d\u0434\u0435\u043a\u0441.\u041c\u0430\u0440\u043a\u0435\u0442, \u042f\u043d\u0434\u0435\u043a\u0441.\u041a\u0430\u0440\u0442\u044b, \u042f\u043d\u0434\u0435\u043a\u0441.\u041c\u0435\u0442\u0440\u0438\u043a\u0430, \u041a\u0438\u043d\u043e\u043f\u043e\u0438\u0441\u043a. \u0421\u0443\u0434\u044f \u043f\u043e \u0444\u0438\u0434\u0431\u0435\u043a\u0443, \u0432\u0441\u0435 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u044b. <\/p>\n<p>  <\/p>\n<h2 id=\"analiz-soderzhimogo-anchoranalysisanchor\">\u0410\u043d\u0430\u043b\u0438\u0437 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e <a name=\"analysis\"><\/a><\/h2>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u043e\u0434\u043d\u0430 \u0438\u0437 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0444\u0438\u0447 Statoscope. \u041d\u043e \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u0439\u043c\u0451\u043c, \u043a\u0430\u043a \u0432\u043e\u043e\u0431\u0449\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u0431\u043e\u0440\u043a\u0430 \u0438 \u0438\u0437 \u0447\u0435\u0433\u043e \u043e\u043d\u0430 \u0441\u043e\u0441\u0442\u043e\u0438\u0442.<\/p>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0435\u0434 \u043d\u0430\u043c\u0438 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0442\u0438\u043f\u0438\u0447\u043d\u044b\u0439 \u043a\u043e\u043d\u0444\u0438\u0433 \u0441 \u0434\u0432\u0443\u043c\u044f \u0442\u043e\u0447\u043a\u0430\u043c\u0438 \u0432\u0445\u043e\u0434\u0430:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">module.exports = {   entry: {     main: '.\/main.js',     admin: '.\/admin.js',   }, }<\/code><\/pre>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0438 \u0430\u0434\u043c\u0438\u043d\u043a\u0430. \u0412\u0440\u043e\u0434\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0433\u043e.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/37\/mj\/ow\/37mjowpo7vhbsbi7vrg6lxbk5qc.png\" data-src=\"https:\/\/habrastorage.org\/webt\/37\/mj\/ow\/37mjowpo7vhbsbi7vrg6lxbk5qc.png\"\/><\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0441\u0431\u043e\u0440\u043a\u0443, webpack \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043a\u0430\u0436\u0434\u044b\u0439 JS- \u0438\u043b\u0438 TS-\u0444\u0430\u0439\u043b \u043a\u0430\u043a \u043c\u043e\u0434\u0443\u043b\u044c. \u0421\u0431\u043e\u0440\u043a\u0430 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 JS-\u043c\u043e\u0434\u0443\u043b\u0435\u0439 (\u043d\u0430 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0432\u044b\u0448\u0435 \u2014 \u0436\u0451\u043b\u0442\u044b\u0435 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u044b).<\/p>\n<p>  <\/p>\n<p>\u041c\u043e\u0434\u0443\u043b\u0438 \u0441\u043e\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u0432 \u0433\u0440\u0443\u043f\u043f\u044b \u2014 \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0435 \u0447\u0430\u043d\u043a\u0438 (\u0441\u0438\u043d\u0438\u0435 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u044b). \u0415\u0441\u0442\u044c \u0433\u0440\u0443\u043f\u043f\u0430 \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0445\u043e\u0434\u044f\u0442 \u0432 \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0430\u0434\u043c\u0438\u043d\u043a\u0438 \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435 (\u0441\u0438\u043d\u0438\u0435 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u044b). <\/p>\n<p>  <\/p>\n<p>\u0418 \u0432\u0441\u0451 \u044d\u0442\u043e \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0430\u0441\u0441\u0435\u0442\u044b (\u043a\u0440\u0430\u0441\u043d\u044b\u0435 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u044b). \u042d\u0442\u043e \u0432\u044b\u0445\u043e\u0434\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u0432\u0438\u0434\u0438\u0442\u0435 \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 dist (\u0438\u043b\u0438 build, \u0441\u043c\u043e\u0442\u0440\u044f \u043a\u0430\u043a \u0443 \u0432\u0430\u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u043e). \u042d\u0442\u043e \u0442\u043e, \u0447\u0435\u043c \u043e\u043f\u0435\u0440\u0438\u0440\u0443\u0435\u0442 webpack.<\/p>\n<p>  <\/p>\n<p>\u0411\u044b\u0441\u0442\u0440\u043e \u043f\u0440\u043e\u0439\u0434\u0435\u043c\u0441\u044f \u043f\u043e \u0441\u0442\u0430\u0434\u0438\u044f\u043c \u0441\u0431\u043e\u0440\u043a\u0438. \u042d\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0434\u043b\u044f \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0433\u043e \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442. <\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/e_\/an\/fy\/e_anfy5neret6m6yynfwfwiifo8.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/e_\/an\/fy\/e_anfy5neret6m6yynfwfwiifo8.jpeg\" data-blurred=\"true\"\/><\/p>\n<p>  <\/p>\n<ul>\n<li>Webpack \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043d\u0430 \u0432\u0445\u043e\u0434 JS-, TS- \u0438\u043b\u0438 CSS-\u043c\u043e\u0434\u0443\u043b\u0438, \u043f\u0430\u0440\u0441\u0438\u0442 \u0438\u0445 \u0432 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u043e\u0435 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e. <\/li>\n<li>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0441\u0432\u044f\u0437\u0438 \u043c\u0435\u0436\u0434\u0443 \u044d\u0442\u0438\u043c\u0438 \u043c\u043e\u0434\u0443\u043b\u044f\u043c\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0434\u0443\u043b\u044c \u0410 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u043c\u043e\u0434\u0443\u043b\u044c B. \u0410 \u043c\u043e\u0434\u0443\u043b\u044c B \u0447\u0442\u043e-\u0442\u043e \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442. \u0412 \u043e\u0431\u0449\u0435\u043c, \u043e\u043d \u0441\u0442\u0440\u043e\u0438\u0442 \u0433\u0440\u0430\u0444 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u043c\u0435\u0436\u0434\u0443 \u043c\u043e\u0434\u0443\u043b\u044f\u043c\u0438. <\/li>\n<li>\u041f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u0433\u0440\u0430\u0444: \u0435\u0441\u043b\u0438 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043c\u043e\u0434\u0443\u043b\u0438 \u0432 \u0441\u044b\u0440\u043e\u043c \u0432\u0438\u0434\u0435, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u043d\u0438 \u0435\u0441\u0442\u044c \u0432 \u0444\u0430\u0439\u043b\u043e\u0432\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435, \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0430\u043c \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0434\u0443\u0431\u043b\u0438 \u0438\u043b\u0438 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0438\u0437 \u044d\u0442\u0438\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0432\u043e\u043e\u0431\u0449\u0435 \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c, \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043d\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e, \u0430 \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043e\u0434\u0443\u043b\u044c \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u0432\u0430 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430, \u0430 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d. \u0412\u0442\u043e\u0440\u043e\u0439 \u044d\u043a\u0441\u043f\u043e\u0440\u0442 \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u0435\u043d, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0431\u0435\u0437\u0431\u043e\u043b\u0435\u0437\u043d\u0435\u043d\u043d\u043e \u0432\u044b\u043f\u0438\u043b\u0438\u0442\u044c \u0435\u0433\u043e \u2014 \u043d\u0438\u043a\u043e\u043c\u0443 \u043e\u0442 \u044d\u0442\u043e\u0433\u043e \u043f\u043b\u043e\u0445\u043e \u043d\u0435 \u0441\u0442\u0430\u043d\u0435\u0442, \u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043c\u044b \u0432 \u0441\u0431\u043e\u0440\u043a\u0435 \u043d\u0435 \u043f\u043e\u043b\u043e\u043c\u0430\u0435\u043c. \u042d\u0442\u043e \u0447\u0430\u0441\u0442\u044c \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u2014 \u0442\u043e, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 webpack, \u0447\u0442\u043e\u0431\u044b \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0432\u044b\u0445\u043e\u0434\u043d\u044b\u0445 \u0430\u0441\u0441\u0435\u0442\u043e\u0432. <\/li>\n<li>\u0413\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0444\u0430\u0439\u043b\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u0441\u044f \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u0438 dist \u2014 \u044d\u0442\u043e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0430\u0441\u0441\u0435\u0442\u043e\u0432.<\/li>\n<li>\u0421\u043b\u0438\u0432\u0430\u0435\u0442 \u044d\u0442\u0438 \u0444\u0430\u0439\u043b\u044b \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u043e\u0440\u0438\u044e. <\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u043d\u0435 \u0443\u0433\u043b\u0443\u0431\u043b\u044f\u0442\u044c\u0441\u044f, \u044d\u0442\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0441\u0442\u0430\u0434\u0438\u0438 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 webpack \u0438 \u0447\u0442\u043e \u043e\u043d \u0432\u043e\u043e\u0431\u0449\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 \u0441 \u044d\u0442\u0438\u043c\u0438 \u043c\u043e\u0434\u0443\u043b\u044f\u043c\u0438. <\/p>\n<p>  <\/p>\n<h3 id=\"s-chem-rabotaet-statoscope\">\u0421 \u0447\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 Statoscope?<\/h3>\n<p>  <\/p>\n<p>Webpack \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 Statoscope \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e\u0431\u043e \u0432\u0441\u0435\u0445 \u043c\u043e\u0434\u0443\u043b\u044f\u0445, \u0447\u0430\u043d\u043a\u0430\u0445, \u0430\u0441\u0441\u0435\u0442\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0441\u0442\u0440\u0435\u0442\u0438\u043b\u0438\u0441\u044c \u0435\u043c\u0443 \u043d\u0430 \u043f\u0443\u0442\u0438 \u0441\u0431\u043e\u0440\u043a\u0438. \u041e\u043d \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u044d\u0442\u043e \u0432 \u0432\u0438\u0434\u0435 \u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0445 \u00ab\u0441\u0442\u0430\u0442\u043e\u0432\u00bb \u2014 \u044d\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0444\u0430\u0439\u043b stats.json, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 webpack \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441\u043e \u0441\u0431\u043e\u0440\u043a\u043e\u0439, \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 \u0435\u0433\u043e \u0432 Statoscope (\u0442\u043e\u0447\u043d\u0435\u0435, \u0447\u0430\u0449\u0435 \u0432\u0441\u0435\u0433\u043e Statoscope \u0437\u0430\u0431\u0438\u0440\u0430\u0435\u0442 \u0435\u0433\u043e \u0441\u0430\u043c), \u0430 Statoscope \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0435\u0433\u043e \u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043e\u0442\u0447\u0451\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435. <\/p>\n<p>  <\/p>\n<p>\u0412\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441: webpack \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0441\u0442\u0430\u0442\u044b, \u043f\u0435\u0440\u0435\u0434\u0430\u0451\u0442 \u0438\u0445 \u0432 Statoscope, \u0430 Statoscope \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u044d\u0442\u0438\u0445 \u0441\u0442\u0430\u0442\u043e\u0432 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 HTML-\u043e\u0442\u0447\u0451\u0442.<\/p>\n<p>  <\/p>\n<h3 id=\"kak-poluchit-staty\">\u041a\u0430\u043a \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0441\u0442\u0430\u0442\u044b?<\/h3>\n<p>  <\/p>\n<p>\u0415\u0441\u0442\u044c \u0434\u0432\u0430 \u0441\u043f\u043e\u0441\u043e\u0431\u0430. \u041f\u0435\u0440\u0432\u044b\u0439 \u2014 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0432\u0430\u0448\u0443 \u0441\u0431\u043e\u0440\u043a\u0443, \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c webpack, \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0444\u043b\u0430\u0436\u043e\u043a JSON, \u0438 \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u0432 \u043a\u0430\u043a\u043e\u0439 \u0444\u0430\u0439\u043b \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0441\u0442\u0430\u0442\u044b. \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0441\u0442\u0430\u0442\u044b \u043d\u0430 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0430\u0439\u0442 <a href=\"https:\/\/statoscope.tech\">statoscope.tech<\/a> \u2014 \u044d\u0442\u043e \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u043d\u044f\u043b \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u0440\u043e\u043f\u043d\u0443\u0442\u044c \u0442\u0443\u0434\u0430 \u0441\u0442\u0430\u0442\u044b \u0438 \u043f\u043e\u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u042d\u0442\u043e \u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0441\u0442\u0430\u0442\u044b, \u043d\u0438\u043a\u0443\u0434\u0430 \u043d\u0435 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u0443\u044f Statoscope.<\/p>\n<p>  <\/p>\n<p><code>$ webpack \u2013json stats.json<\/code><\/p>\n<p>  <\/p>\n<p>\u0412\u0442\u043e\u0440\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u0432\u0430\u0448\u0435\u0439 \u0441\u0431\u043e\u0440\u043a\u0435 \u2014 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u0432\u0430\u0448\u0443 \u0441\u0431\u043e\u0440\u043a\u0443 Statoscope-\u043f\u043b\u0430\u0433\u0438\u043d. <\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">config.plugins.push(new StatoscopeWebpackPlugin())<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0434\u0451\u0442\u0435 \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u0432\u0430\u0448\u0435\u0439 \u0441\u0431\u043e\u0440\u043a\u0438 \u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u0435: \u0434\u043e\u0431\u0430\u0432\u044c \u043c\u043d\u0435 \u0432 \u043c\u043e\u044e \u0441\u0431\u043e\u0440\u043a\u0443 \u043f\u043b\u0430\u0433\u0438\u043d Statoscope. \u0421 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435.<\/p>\n<p>  <\/p>\n<h3 id=\"chto-predstavlyayut-soboy-staty\">\u0427\u0442\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0441\u043e\u0431\u043e\u0439 \u0441\u0442\u0430\u0442\u044b?<\/h3>\n<p>  <\/p>\n<pre><code class=\"json\">{   \"modules\": [\/*...*\/],   \"chunks\": [\/*...*\/],   \"assets\": [\/*...*\/],   \"entrypoints\": {\/*...*\/},   \/*...*\/ }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u0442\u0430\u0442\u044b \u2014 \u044d\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u044f\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u0438\u0437 webpack: \u043d\u0430 \u043a\u0430\u043a\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u0438, JS-, TS-, CSS-\u0444\u0430\u0439\u043b\u044b \u043e\u043d \u043d\u0430\u0442\u043a\u043d\u0443\u043b\u0441\u044f, \u0432 \u043a\u0430\u043a\u0438\u0435 \u0447\u0430\u043d\u043a\u0438 \u043e\u043d \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u043b \u044d\u0442\u0438 \u0444\u0430\u0439\u043b\u044b, \u043a\u0430\u043a\u0438\u0435 \u0430\u0441\u0441\u0435\u0442\u044b \u043f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438\u0441\u044c. \u0412\u0441\u0451 \u044d\u0442\u043e \u0441\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043e\u0434\u0438\u043d \u0431\u043e\u043b\u044c\u0448\u043e\u0439 .json-\u0444\u0430\u0439\u043b, \u0430 \u043f\u043e\u0442\u043e\u043c Statoscope \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b. <\/p>\n<p>  <\/p>\n<h3 id=\"detali\">\u0414\u0435\u0442\u0430\u043b\u0438<\/h3>\n<p>  <\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u0431\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043c\u043e\u0434\u0443\u043b\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"json\">{   \"identifier\": \"babel-loader!.\/src\/index.js\",   \"name\": \".\/src\/index.js\",   \"reasons\": [\/*...*\/],   \/*...*\/ }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c: \u043d\u0430\u0448 \u0433\u043b\u0430\u0432\u043d\u044b\u0439 \u0444\u0430\u0439\u043b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f index.js \u0438\u043c\u0435\u0435\u0442 \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440, \u0442\u0430\u043a\u043e\u0435 \u0438\u043c\u044f \u0444\u0430\u0439\u043b\u0430, \u0432\u043e\u0442 \u043f\u043e \u0442\u0430\u043a\u043e\u043c\u0443 \u043f\u0443\u0442\u0438 \u043e\u043d \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f. \u0410 \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 reasons \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u0433\u0434\u0435 \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f, \u0433\u0434\u0435 \u043e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f. \u0412\u043e\u0442 \u0442\u0430\u043a\u0443\u044e \u043f\u043e\u0434\u043e\u0431\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e webpack \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432 \u0441\u0442\u0430\u0442\u0430\u0445. <\/p>\n<p>  <\/p>\n<p>Statoscope \u044d\u0442\u043e \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442, \u043a\u043e\u043c\u043f\u043e\u043d\u0443\u0435\u0442, \u0447\u0442\u043e-\u0442\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0441 \u044d\u0442\u0438\u043c \u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432 \u0443\u0434\u043e\u0431\u043d\u043e\u043c \u0432\u0438\u0434\u0435. \u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0432 \u0442\u0430\u043a\u043e\u043c:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/im\/ah\/ks\/imahksopwxo6eiaegof2-m8nan8.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/im\/ah\/ks\/imahksopwxo6eiaegof2-m8nan8.jpeg\" data-blurred=\"true\"\/><\/p>\n<p>  <\/p>\n<p>\u041e\u043d \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 entrypoints, \u043c\u043e\u0434\u0443\u043b\u0438, \u0447\u0430\u043d\u043a\u0438, \u0430\u0441\u0441\u0435\u0442\u044b \u2014 \u0432\u0441\u0451, \u043e \u0447\u0451\u043c \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u043b.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/-g\/dh\/3r\/-gdh3rqcm-3ymizbptijeje9mbq.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/-g\/dh\/3r\/-gdh3rqcm-3ymizbptijeje9mbq.jpeg\" data-blurred=\"true\"\/><\/p>\n<p>  <\/p>\n<p>\u041d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u0432\u044b\u0448\u0435, \u0432 \u0441\u0435\u0440\u0435\u0434\u0438\u043d\u0435, \u0447\u0430\u043d\u043a main. \u041c\u044b \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u044d\u0442\u043e initial \u0447\u0430\u043d\u043a. <\/p>\n<p>  <\/p>\n<p>\u0412\u043e\u043e\u0431\u0449\u0435 \u0447\u0430\u043d\u043a\u0438 \u0431\u044b\u0432\u0430\u044e\u0442 \u0434\u0432\u0443\u0445 \u0432\u0438\u0434\u043e\u0432: <\/p>\n<p>  <\/p>\n<ul>\n<li>initial \u2014 \u0442\u043e\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b;<\/li>\n<li>async \u2014 \u0442\u043e\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u0438 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0442\u043e \u0435\u0441\u0442\u044c \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439. \u0415\u0441\u043b\u0438 \u0432\u044b \u0434\u0435\u043b\u0438\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0447\u0430\u0441\u0442\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0442\u044f\u0436\u0451\u043b\u0430\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c, \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u0430\u0441\u044c, \u2014 \u044d\u0442\u043e \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u0447\u0430\u043d\u043a.<\/li>\n<\/ul>\n<p>  <\/p>\n<h3 id=\"kopii-paketov-i-ih-versii\">\u041a\u043e\u043f\u0438\u0438 \u043f\u0430\u043a\u0435\u0442\u043e\u0432 \u0438 \u0438\u0445 \u0432\u0435\u0440\u0441\u0438\u0438<\/h3>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/77\/qh\/xd\/77qhxdwecejx90jz9whtd7hepka.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/77\/qh\/xd\/77qhxdwecejx90jz9whtd7hepka.jpeg\" data-blurred=\"true\"\/><\/p>\n<p>  <\/p>\n<p>\u041d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u044d\u0442\u043e\u0439 \u0436\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 Statoscope \u0435\u0449\u0451 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442 \u0434\u0435\u0440\u0435\u0432\u043e \u043f\u0430\u043a\u0435\u0442\u043e\u0432 \u2014 \u043f\u043e \u0441\u0443\u0442\u0438 npm-\u043f\u0430\u043a\u0435\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 \u0432\u0430\u0448\u0435\u0439 \u0441\u0431\u043e\u0440\u043a\u0435: \u043a\u0430\u043a\u0438\u0435 \u043f\u0430\u043a\u0435\u0442\u044b, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043f\u0438\u0439 \u0443 \u044d\u0442\u0438\u0445 \u043f\u0430\u043a\u0435\u0442\u043e\u0432. <\/p>\n<p>  <\/p>\n<p>\u041c\u043e\u0436\u0435\u0442 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0443\u0442\u044c \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0435 \u043f\u0430\u043a\u0435\u0442 \u0410 \u0438 \u043f\u0430\u043a\u0435\u0442 B. \u042d\u0442\u0438 \u0434\u0432\u0430 \u043f\u0430\u043a\u0435\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043e\u0434\u0438\u043d \u043f\u0430\u043a\u0435\u0442 \u0421, \u043d\u043e \u0440\u0430\u0437\u043d\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u0439. \u0418 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0432\u0434\u0440\u0443\u0433 \u0432 \u0432\u0430\u0448\u0435\u0439 \u0441\u0431\u043e\u0440\u043a\u0435 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0434\u0432\u0430 \u043f\u0430\u043a\u0435\u0442\u0430 \u0421 \u2014 \u0434\u0443\u0431\u043b\u044c. Statoscope \u0433\u043e\u0432\u043e\u0440\u0438\u0442: \u0432\u043e\u0442 \u0443 \u0442\u0435\u0431\u044f fbjs \u0434\u0432\u0443\u0445 \u0432\u0435\u0440\u0441\u0438\u0439. \u0412 \u043a\u043e\u0440\u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432\u0435\u0440\u0441\u0438\u044f 0.8.17, \u0430 \u0433\u0434\u0435-\u043d\u0438\u0431\u0443\u0434\u044c \u0432 draft-js \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432\u0435\u0440\u0441\u0438\u044f 2.0.0. \u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0440\u0430\u0437\u0431\u0435\u0440\u0438\u0441\u044c. \u041e\u0431\u043d\u043e\u0432\u0438 \u0441\u0432\u043e\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u0438 \u0434\u0443\u0431\u043b\u044c \u043f\u0430\u043a\u0435\u0442\u0430 \u0443\u0439\u0434\u0451\u0442. <\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, Statoscope \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0431\u043e\u0433\u0430\u0449\u0430\u0435\u0442 \u0441\u0442\u0430\u0442\u044b \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0434\u0440\u0443\u0433\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 \u043e \u0432\u0435\u0440\u0441\u0438\u044f\u0445 \u043f\u0430\u043a\u0435\u0442\u043e\u0432. \u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0441\u0442\u0430\u0442\u044b webpack \u043d\u0435 \u043e\u0431\u043b\u0430\u0434\u0430\u044e\u0442 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 \u043e \u0432\u0435\u0440\u0441\u0438\u0438 \u043f\u0430\u043a\u0435\u0442\u043e\u0432. \u0427\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u043a\u0430\u043a \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442. <\/p>\n<p>  <\/p>\n<h3 id=\"karta-moduley\">\u041a\u0430\u0440\u0442\u0430 \u043c\u043e\u0434\u0443\u043b\u0435\u0439<\/h3>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/ab\/85\/hf\/ab85hf3v4wf1aq80ft195cpvnxc.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/ab\/85\/hf\/ab85hf3v4wf1aq80ft195cpvnxc.jpeg\" data-blurred=\"true\"\/><\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u0440\u0442\u0430 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0432\u0430\u043c \u0437\u043d\u0430\u043a\u043e\u043c\u0430, \u0435\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u0441\u0442\u0430\u0442\u043e\u0432, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Webpack Bundle Analyzer.<\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u0440\u0442\u0430 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u2014 \u043e\u0434\u043d\u0430 \u0438\u0437 \u0447\u0430\u0441\u0442\u0435\u0439 Statoscope. \u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e Webpack Bundle Analyzer \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u043d\u0435 \u0441\u0442\u0430\u0442\u044b, \u0430 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u0438 webpack. \u0410 Statoscope \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0441\u0442\u0430\u0442\u044b. \u0421\u043c\u044b\u0441\u043b \u043f\u043e\u0447\u0442\u0438 \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435, \u043d\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f \u0440\u0430\u0431\u043e\u0442\u044b \u0440\u0430\u0437\u043d\u044b\u0439. \u0412 Statoscope \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u043c\u043e\u0434\u0443\u043b\u0438, \u0438 \u043a\u0430\u0440\u0442\u0443 \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u0438 \u0447\u0430\u043d\u043a\u0438, \u0438 \u0430\u0441\u0441\u0435\u0442\u044b \u2014 \u0438 \u0432\u0441\u0451 \u044d\u0442\u043e \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/p4\/2d\/x8\/p42dx8gvmuwnn23wjtvfuqomhfo.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/p4\/2d\/x8\/p42dx8gvmuwnn23wjtvfuqomhfo.jpeg\" data-blurred=\"true\"\/><\/p>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 \u043f\u0430\u043a\u0435\u0442, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, asn1. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u0438\u0437 \u0447\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u043a\u0430\u0436\u0434\u044b\u0439 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0430\u043a\u0435\u0442. \u0425\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u043d\u044f\u0442\u044c, \u043f\u043e\u0447\u0435\u043c\u0443 \u043f\u0430\u043a\u0435\u0442 \u0442\u0430\u043a \u043c\u043d\u043e\u0433\u043e \u0432\u0435\u0441\u0438\u0442? \u0417\u0430\u0445\u043e\u0434\u0438\u043c \u0432 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u043f\u0430\u043a\u0435\u0442\u0435 \u0438 \u0441\u043c\u043e\u0442\u0440\u0438\u043c.<\/p>\n<p>  <\/p>\n<h3 id=\"sravnenie-sborok\">\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0441\u0431\u043e\u0440\u043e\u043a<\/h3>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/4h\/v4\/-i\/4hv4-it01y9lhsmfysjauq9dpti.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/4h\/v4\/-i\/4hv4-it01y9lhsmfysjauq9dpti.jpeg\" data-blurred=\"true\"\/><\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0435 \u0441\u0442\u0430\u0442\u044b, \u0442\u0435\u043a\u0443\u0449\u0438\u0435 \u0441\u0442\u0430\u0442\u044b, \u043d\u0430\u0436\u0430\u0442\u044c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u2014 \u0438 Statoscope \u043f\u043e\u043a\u0430\u0436\u0435\u0442, \u0430 \u0447\u0442\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u043e\u0441\u044c: \u043a\u0430\u043a\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u0431\u044b\u043b\u0438, \u043a\u0430\u043a\u0438\u0435 \u0441\u0442\u0430\u043b\u0438, \u043a\u0430\u043a\u0438\u0435 \u0443\u0434\u0430\u043b\u0438\u043b\u0438\u0441\u044c, \u043a\u0430\u043a\u0438\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438\u0441\u044c, \u043a\u0430\u043a\u0438\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u0441\u044f \u0440\u0430\u0437\u043c\u0435\u0440), \u043a\u0430\u043a\u0438\u0435 \u0447\u0430\u043d\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438\u0441\u044c, \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c, \u0443\u0434\u0430\u043b\u0438\u043b\u0438\u0441\u044c \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435. <\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0435\u043a\u0443\u0449\u0438\u043c\u0438 \u0441\u0442\u0430\u0442\u0430\u043c\u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0441\u0442\u0430\u0442\u044b \u0438\u0437 \u0432\u0430\u0448\u0435\u0439 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 feature-\u0432\u0435\u0442\u043a\u0438. \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0432\u044b \u0434\u0435\u043b\u0430\u0435\u0442\u0435 \u0441\u0443\u043f\u0435\u0440\u043a\u043b\u0430\u0441\u0441\u043d\u0443\u044e \u0444\u0438\u0447\u0443, \u0430 \u0441\u0442\u0430\u0442\u0430\u043c\u0438 \u00ab\u0434\u043e\u00bb \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0441\u0442\u0430\u0442\u044b \u0438\u0437 \u043c\u0430\u0441\u0442\u0435\u0440-\u0432\u0435\u0442\u043a\u0438. \u0412\u0430\u043c \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u043f\u043e\u043d\u044f\u0442\u044c: \u0430 \u0432\u043e\u0442 \u0442\u043e, \u0447\u0442\u043e \u044f \u0441\u0435\u0439\u0447\u0430\u0441 \u0441\u0434\u0435\u043b\u0430\u043b, \u043d\u0435 \u0443\u0442\u044f\u0436\u0435\u043b\u0438\u043b\u043e \u0441\u0431\u043e\u0440\u043a\u0443? \u042f \u043d\u0435 \u0443\u0445\u0443\u0434\u0448\u0438\u043b \u0442\u043e, \u0447\u0442\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u0432 \u043c\u0430\u0441\u0442\u0435\u0440\u0435? \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0441\u0451 \u044d\u0442\u043e \u0441\u043a\u043e\u0440\u043c\u0438\u0442\u044c Statoscope, \u0438 \u043e\u043d \u0432\u0430\u043c \u0441\u043a\u0430\u0436\u0435\u0442, \u0443\u0445\u0443\u0434\u0448\u0438\u043b\u0438 \u043b\u0438 \u0432\u044b (\u0430 \u043c\u043e\u0436\u0435\u0442, \u0438 \u0443\u043b\u0443\u0447\u0448\u0438\u043b\u0438), \u0438 \u0447\u0435\u043c.<\/p>\n<p>  <\/p>\n<h2 id=\"sobstvennye-otchyoty-anchorreportsanchor\">\u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043e\u0442\u0447\u0451\u0442\u044b <a name=\"reports\"><\/a><\/h2>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u043e\u0442\u0447\u0451\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u0430\u043c Statoscope, \u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0441\u0432\u043e\u0451, \u0442\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043e\u0442\u0447\u0451\u0442. <\/p>\n<p>  <\/p>\n<p>\u041d\u043e \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 Statoscope \u0442\u043e\u0436\u0435 \u0440\u0435\u0448\u0430\u0435\u0442.<\/p>\n<p>  <\/p>\n<p>\u0421\u0442\u0430\u0442\u044b \u2014 \u044d\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u0439 .json-\u0444\u0430\u0439\u043b, \u0438 \u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440 \u043c\u043e\u0436\u0435\u0442 \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0433\u0438\u0433\u0430\u0431\u0430\u0439\u0442\u043e\u0432. \u0423 \u044d\u0442\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439 \u0444\u043e\u0440\u043c\u0430\u0442, \u0447\u0430\u0441\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u043d\u0443\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u044d\u0442\u043e\u0433\u043e .json-\u0444\u0430\u0439\u043b\u0430. \u041d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u043d\u0438\u043a\u043e\u043c\u0443 \u043d\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u043f\u0438\u0441\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043a\u043e\u0434, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0435\u0441\u043b\u0438 \u0435\u0433\u043e \u043c\u043d\u043e\u0433\u043e. \u0425\u043e\u0447\u0435\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0451 \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u043f\u0440\u043e\u0449\u0435. <\/p>\n<p>  <\/p>\n<h3 id=\"jora\">Jora<\/h3>\n<p>  <\/p>\n<p>\u041e\u0434\u043d\u043e \u0438\u0437 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u2014 \u044f\u0437\u044b\u043a \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f Jora. \u041d\u0435 \u0441\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0439\u0442\u0435, \u043e\u0442\u043a\u0443\u0434\u0430 \u0442\u0430\u043a\u043e\u0435 \u0438\u043c\u044f. <\/p>\n<p>  <\/p>\n<p>\u0412\u043e\u0442 JS-\u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438 \u0431\u044b, \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u043d\u0443\u0442\u044c \u0438\u0437 \u0441\u0442\u0430\u0442\u043e\u0432, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u043f\u0438\u0441\u043e\u043a \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0438 \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e \u0438\u043c\u0435\u043d\u0438:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">const modules = [];  for (const compilation of compilations) {   for (const module of compilation.modules) {     modules.push(module);   } }  modules.sort((a, b) => a.name.localeCompare(b.name))<\/code><\/pre>\n<p>  <\/p>\n<p>\u0410 \u0432\u043e\u0442 \u043a\u0443\u0441\u043e\u0447\u0435\u043a \u043a\u043e\u0434\u0430 \u043d\u0430 \u044f\u0437\u044b\u043a\u0435 Jora, \u0438 \u044d\u0442\u043e\u0442 \u043a\u0443\u0441\u043e\u0447\u0435\u043a \u0434\u0435\u043b\u0430\u0435\u0442 \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435:<\/p>\n<p>  <\/p>\n<p><code>compilations.modules.sort(name)<\/code><\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c \u0435\u043c\u0443: \u0432\u043e\u0437\u044c\u043c\u0438 \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438, \u0438\u0437 \u044d\u0442\u0438\u0445 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0439 \u0432\u043e\u0437\u044c\u043c\u0438 \u0432\u0441\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u0438 \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u0443\u0439 \u0438\u0445 \u043f\u043e \u0438\u043c\u0435\u043d\u0438. \u0412\u0441\u0451 \u2014 \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e.<\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, Jora \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e JS-\u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043f\u0438\u0448\u0435\u043c. \u042d\u0442\u043e \u043b\u0451\u0433\u043a\u0438\u0439, \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u043d\u044b\u0439, \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0439 \u044f\u0437\u044b\u043a \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0432 JSON. <\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0441 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430\u043c\u0438 \u0442\u0438\u043f\u0430 <a href=\"https:\/\/github.com\/stedolan\/jq\">jq<\/a>, \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u0430\u043c \u0437\u043d\u0430\u043a\u043e\u043c\u043e.<\/p>\n<p>  <\/p>\n<p>\u0412\u043e\u0442 \u0442\u0440\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0438\u0437 Jora.<\/p>\n<p>  <\/p>\n<h4 id=\"filter\">Filter<\/h4>\n<p>  <\/p>\n<p><code>modules.[size > 1000]<\/code><\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043a\u0430\u0437\u0430\u0442\u044c: \u0434\u0430\u0439-\u043a\u0430 \u043c\u043d\u0435 \u0432\u0441\u0435 \u043c\u043e\u0434\u0443\u043b\u0438, \u0440\u0430\u0437\u043c\u0435\u0440 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u043e\u043b\u044c\u0448\u0435 \u0442\u044b\u0441\u044f\u0447\u0438 \u0431\u0430\u0439\u0442\u043e\u0432. <\/p>\n<p>  <\/p>\n<h4 id=\"map\">Map<\/h4>\n<p>  <\/p>\n<p><code>modules.({module: $, size})<\/code><\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u0445\u043e\u0442\u0438\u043c \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u0438 \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442. \u0413\u043e\u0432\u043e\u0440\u0438\u043c: \u0434\u0430\u0439 \u043d\u0430\u043c, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043c\u043e\u0434\u0443\u043b\u0438 \u0438 \u0434\u043e\u0431\u0430\u0432\u044c \u043a \u043d\u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u044b. \u0423 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u0434\u0432\u0443\u043c\u044f \u043f\u043e\u043b\u044f\u043c\u0438: \u043c\u043e\u0434\u0443\u043b\u044c \u0438 \u0440\u0430\u0437\u043c\u0435\u0440. \u041f\u0440\u043e\u0441\u0442\u043e \u0438 \u043b\u0430\u043a\u043e\u043d\u0438\u0447\u043d\u043e.<\/p>\n<p>  <\/p>\n<h4 id=\"map-call\">Map call<\/h4>\n<p>  <\/p>\n<p><code>modules.(getModuleSize(hash)).size<\/code><\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u0434\u0435\u043b\u0430\u0435\u043c map, \u0438 \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u043e\u0431\u044a\u0435\u043a\u0442, \u043c\u044b \u0435\u0449\u0451 \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043d\u0430\u043c \u044d\u0442\u043e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442. \u0412\u0435\u0440\u043d\u0435\u043c\u0441\u044f \u043a \u044d\u0442\u043e\u043c\u0443 \u0432 <a href=\"https:\/\/youtu.be\/-OUb1RmLhK0\">\u0432\u043e\u0440\u043a\u0448\u043e\u043f\u0435<\/a>, \u0433\u0434\u0435 \u044f \u043f\u043e\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043e Statoscope.<\/p>\n<p>  <\/p>\n<h3 id=\"ui\">UI<\/h3>\n<p>  <\/p>\n<p>\u0418\u0442\u0430\u043a, \u043c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438\u0441\u044c \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e Statoscope \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0432 \u0441\u0442\u0430\u0442\u044b, \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u043e\u0442\u0447\u0451\u0442\u044b \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u044f\u0437\u044b\u043a\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 Jora. \u0410 \u043a\u0430\u043a \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c? \u041d\u0430\u043c \u0436\u0435 \u043d\u0443\u0436\u0435\u043d \u043a\u0430\u043a\u043e\u0439-\u0442\u043e UI, \u043c\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u043c \u0442\u0443\u043f\u043e \u0432\u044b\u0432\u043e\u0434\u0438\u0442\u044c \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 JS-\u043e\u0431\u044a\u0435\u043a\u0442\u0430. \u041d\u0430\u043c \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0432\u044b\u0432\u0435\u0441\u0442\u0438 \u0441\u043f\u0438\u0441\u043e\u043a, \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a, \u043a\u043d\u043e\u043f\u043a\u0438, \u0431\u0435\u0439\u0434\u0436\u0438.<\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c UI \u043d\u0430 React. \u041d\u043e \u0442\u043e\u0433\u0434\u0430 \u043d\u0430\u0447\u043d\u0443\u0442\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b: \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043d\u0430\u0434\u043e \u0433\u0434\u0435-\u0442\u043e \u0445\u043e\u0441\u0442\u0438\u0442\u044c, \u0435\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c, \u043a\u0443\u0434\u0430-\u0442\u043e \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c. Statoscope \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043f\u043e\u0441\u043e\u0431, \u043a\u0430\u043a \u0440\u0435\u0448\u0438\u0442\u044c \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443. <\/p>\n<p>  <\/p>\n<h4 id=\"discoveryjs\">Discovery.js<\/h4>\n<p>  <\/p>\n<p><a href=\"https:\/\/github.com\/discoveryjs\">Discovery.js<\/a> \u2014 \u044d\u0442\u043e \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f UI. <\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/fs\/oe\/mn\/fsoemnhfk1mykz5lznwkf_awo20.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/fs\/oe\/mn\/fsoemnhfk1mykz5lznwkf_awo20.jpeg\" data-blurred=\"true\"\/><\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u0432\u0438\u0434\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u0440. \u0421\u043b\u0435\u0432\u0430 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0438\u0434\u0435\u0442\u044c \u0443\u0436\u0435 \u0433\u043e\u0442\u043e\u0432\u044b\u0435 UI-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. \u0412 Discovery.js \u0432\u0445\u043e\u0434\u0438\u0442 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 UI-\u043a\u0438\u0442: \u043a\u043d\u043e\u043f\u043a\u0438, \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438, \u0431\u0435\u0439\u0434\u0436\u0438, \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u044b \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435. \u0412\u0441\u0451 \u044d\u0442\u043e \u0435\u0441\u0442\u044c \u0433\u043e\u0442\u043e\u0432\u043e\u0435, \u0438 \u044d\u0442\u0438\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f. <\/p>\n<p>  <\/p>\n<p>\u041d\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0444\u0438\u0447\u0430 \u044d\u0442\u043e\u0439 \u0438\u0441\u0442\u043e\u0440\u0438\u0438 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e layout, \u0441\u0430\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0432\u044c\u044e\u0448\u0435\u0447\u043a\u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 JSON.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/gj\/vb\/l9\/gjvbl9mpkmodwfcawaijqa7lqr0.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/gj\/vb\/l9\/gjvbl9mpkmodwfcawaijqa7lqr0.jpeg\" data-blurred=\"true\"\/><\/p>\n<p>  <\/p>\n<p>\u0422\u043e \u0435\u0441\u0442\u044c \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c: \u043c\u043d\u0435 \u043d\u0443\u0436\u0435\u043d \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440, \u043d\u0430\u0434\u043f\u0438\u0441\u044c \u0443 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u0430 \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u0430\u044f-\u0442\u043e, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u043e\u0435-\u0442\u043e. <\/p>\n<p>  <\/p>\n<p>\u0418 \u0432\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e JSON Discovery.js \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u0442 \u0432\u0430\u043c HTML-\u0432\u044c\u044e\u0448\u0435\u0447\u043a\u0443. \u0414\u0435\u043b\u0430\u044f \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044e \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 JSON-\u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043e\u0442\u0447\u0451\u0442\u044b. <\/p>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 Jora \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 layout \u043d\u0430 Discovery.js \u0432\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 view, \u0441\u043e\u0435\u0434\u0438\u043d\u044f\u0435\u0442\u0435 \u2014 \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0435 \u043e\u0442\u0447\u0451\u0442. <\/p>\n<p>  <\/p>\n<h4 id=\"sobiraem-vsyo-vmeste\">\u0421\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u0432\u0441\u0451 \u0432\u043c\u0435\u0441\u0442\u0435<\/h4>\n<p>  <\/p>\n<p>\u0412\u043e\u0442 \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/im\/ch\/xs\/imchxsr8sbrn_eqpy6yj_nny9h0.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/im\/ch\/xs\/imchxsr8sbrn_eqpy6yj_nny9h0.jpeg\" data-blurred=\"true\"\/><\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432 Statoscope \u043d\u0430\u0436\u0430\u0442\u044c \u043a\u043d\u043e\u043f\u043a\u0443 Make report, \u0442\u043e \u0432\u0432\u0435\u0440\u0445\u0443 \u043c\u043e\u0436\u043d\u043e \u0432\u0432\u0435\u0441\u0442\u0438 \u0437\u0430\u043f\u0440\u043e\u0441 \u043b\u044e\u0431\u043e\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043d\u0430 Jora, \u0432 \u043f\u043e\u043b\u0435 \u043d\u0438\u0436\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0432\u0435\u0441\u0442\u0438 UI, \u0442\u043e \u0435\u0441\u0442\u044c \u043e\u043f\u0438\u0441\u0430\u0442\u044c layout \u0432 \u0432\u0438\u0434\u0435 JSON, \u0438 \u043d\u0438\u0436\u0435 \u0443 \u0432\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043e\u0442\u0447\u0451\u0442.<\/p>\n<p>  <\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0431\u0435\u0440\u0451\u043c \u0432\u0441\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u0432\u0441\u0435\u0445 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0439 \u0438 \u0441\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0438\u0445 \u043f\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0443. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0439 \u043e\u0442\u0447\u0451\u0442. \u0412\u0432\u0435\u0440\u0445\u0443 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0443\u0442 \u0441\u0430\u043c\u044b\u0435 \u0442\u044f\u0436\u0451\u043b\u044b\u0435 \u043c\u043e\u0434\u0443\u043b\u0438. <\/p>\n<p>  <\/p>\n<p>\u041f\u043b\u044e\u0448\u0435\u0447\u043a\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441\u0441\u044b\u043b\u043a\u043e\u0439 \u043d\u0430 \u044d\u0442\u043e\u0442 \u043e\u0442\u0447\u0451\u0442 \u0441 \u043a\u043e\u043b\u043b\u0435\u0433\u043e\u0439. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u044b \u043d\u0430 CI \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b\u0438 \u043e\u0442\u0447\u0451\u0442, \u043f\u043e\u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043b\u0438, \u043f\u043e\u043d\u044f\u043b\u0438, \u0447\u0442\u043e \u0447\u0442\u043e-\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043d\u0435 \u0442\u043e. \u0414\u0430\u0439-\u043a\u0430 \u043d\u0430\u043f\u0438\u0448\u0443 \u0441\u0432\u043e\u0439 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u043e\u0442\u0447\u0451\u0442. \u041d\u0430\u043f\u0438\u0441\u0430\u043b\u0438 \u044d\u0442\u043e\u0442 \u043e\u0442\u0447\u0451\u0442 \u0438 \u043f\u043e\u043d\u044f\u043b\u0438, \u0433\u0434\u0435 \u0441\u043e\u0431\u0430\u043a\u0430 \u043f\u043e\u0440\u044b\u043b\u0430\u0441\u044c. \u0421\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u043e\u0442\u0447\u0451\u0442, \u043a\u043e\u043f\u0438\u0440\u0443\u0435\u0442\u0435 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043d\u0435\u0433\u043e, \u043f\u0440\u044f\u043c\u043e \u043d\u0430 CI, \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u043a\u043e\u043b\u043b\u0435\u0433\u0435. \u041a\u043e\u043b\u043b\u0435\u0433\u0430 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0435\u0433\u043e \u0438 \u0432\u0438\u0434\u0438\u0442 \u0442\u043e\u0442 \u0436\u0435 \u043e\u0442\u0447\u0451\u0442, \u0447\u0442\u043e \u0438 \u0432\u044b. \u042d\u0442\u043e \u0441\u0443\u043f\u0435\u0440\u0443\u0434\u043e\u0431\u043d\u043e.<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u043e\u0434\u0438\u043d \u0438\u0437 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u043e\u0442\u0447\u0451\u0442\u044b \u043f\u0440\u044f\u043c\u043e \u043d\u0430 \u0445\u043e\u0434\u0443. \u041d\u0430\u0436\u0430\u043b\u0438 Make report, \u043d\u0430\u043f\u0438\u0441\u0430\u043b\u0438 Jora-\u0437\u0430\u043f\u0440\u043e\u0441, Discovery.js layout, \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u043e\u0442\u0447\u0451\u0442 \u043d\u0430 \u0445\u043e\u0434\u0443, \u043d\u0430 \u043b\u0435\u0442\u0443. <\/p>\n<p>  <\/p>\n<h3 id=\"zashivaem-v-ui\">\u0417\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u0432 UI<\/h3>\n<p>  <\/p>\n<p>\u041d\u043e \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u043e\u0442\u0447\u0451\u0442\u044b \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0435\u0449\u0451 \u0438 \u0432 \u0432\u0430\u0448 \u043e\u0442\u0447\u0451\u0442 \u043d\u0430 CI. \u0414\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u044d\u0442\u043e \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 Statoscope-\u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0434\u043b\u044f webpack. \u0423 \u043d\u0435\u0433\u043e \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e reports, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u0432 webpack-\u0441\u0431\u043e\u0440\u043a\u0443 Statoscope-\u043f\u043b\u0430\u0433\u0438\u043d, \u0432\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u0435: \u0430 \u0437\u0430\u0448\u0435\u0439-\u043a\u0430 \u043c\u043d\u0435 \u0432 \u043c\u043e\u0439 HTML-\u043e\u0442\u0447\u0451\u0442 \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 \u043c\u043e\u0439 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u043e\u0442\u0447\u0451\u0442. \u042d\u0442\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u0447\u0442\u043e \u0438 \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435, \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0434\u0435\u0441\u044c \u0442\u043e\u043f-20 \u0441\u0430\u043c\u044b\u0445 \u0442\u044f\u0436\u0451\u043b\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439. \u0422\u0443\u0442 \u043c\u044b \u043e\u0442\u0441\u0435\u043a\u0430\u0435\u043c \u043d\u0438\u0436\u043d\u044e\u044e \u0433\u0440\u0430\u043d\u0438\u0446\u0443. <\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">new StatoscopeWebpackPlugin({   reports: [     {       id: 'top-20-biggest-modules',       name: 'Top 20 biggest modules',       data: { some: { custom: 'data' } }, \/\/ or () => fetchAsyncData()       view: {         {           data: `#.stats.compilations.(             $compilation: $;             modules.({               modules: $,               hash: $compilation.hash,               size: getModuleSize($compilation.hash)             })           ).sort(size.size desc)[:20]`,           view: 'list',           item: 'module-item',         },      },     },   ], })<\/code><\/pre>\n<p>  <\/p>\n<p>\u041d\u0430 \u043f\u044f\u0442\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 \u2014 \u0438\u043c\u044f \u043e\u0442\u0447\u0451\u0442\u0430, \u043d\u0430 \u0448\u0435\u0441\u0442\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435 \u2014 \u0434\u0430\u043d\u043d\u044b\u0435, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u044b. \u041e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u043e\u0442\u0447\u0451\u0442 \u0441 \u043c\u0435\u0442\u0440\u0438\u043a\u0430\u043c\u0438, \u043a\u0430\u043a \u043c\u0435\u043d\u044f\u043b\u0430\u0441\u044c \u043d\u0430\u0448\u0430 \u0441\u0431\u043e\u0440\u043a\u0430. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0432 data \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0430 \u043d\u0430\u0448\u0438\u0445 \u043c\u0435\u0442\u0440\u0438\u043a. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043a\u0430\u0436\u0434\u044b\u0439 \u0434\u0435\u043d\u044c \u0437\u0430\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0441\u0440\u0435\u0434\u043d\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438, \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0432 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0441 \u043c\u0435\u0442\u0440\u0438\u043a\u0430\u043c\u0438 \u0438 \u043f\u043e\u0442\u043e\u043c \u0432\u0448\u0438\u0432\u0430\u0442\u044c \u0432 \u044d\u0442\u043e\u0442 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u043e\u0442\u0447\u0451\u0442. \u0413\u043e\u0432\u043e\u0440\u0438\u0442\u044c: \u0432\u043e\u0437\u044c\u043c\u0438 \u043c\u0435\u0442\u0440\u0438\u043a\u0438 \u043e\u0442\u0441\u044e\u0434\u0430 \u0438 \u0441\u043e\u0441\u0442\u0430\u0432\u044c UI-\u043e\u0442\u0447\u0451\u0442, \u0433\u0434\u0435 \u043d\u0430 \u0433\u0440\u0430\u0444\u0438\u043a\u0435 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u043e\u043f\u043e\u0440\u043d\u044b\u0435 \u0442\u043e\u0447\u043a\u0438, \u0438 \u043f\u043e \u044d\u0442\u0438\u043c \u0442\u043e\u0447\u043a\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0430 \u043b\u0438\u043d\u0438\u044f, \u043f\u043e \u0441\u0443\u0442\u0438 chart \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043c\u0435\u043d\u044f\u043b\u0430\u0441\u044c \u043d\u0430\u0448\u0430 \u0441\u0431\u043e\u0440\u043a\u0430 \u0441 \u0442\u0435\u0447\u0435\u043d\u0438\u0435\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u0413\u0440\u0430\u0444\u0438\u043a \u0442\u043e\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 Discovery.js, \u0442\u0430\u043c \u0442\u043e\u0436\u0435 \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u0430\u044f \u0432\u044c\u044e\u0448\u0435\u0447\u043a\u0430. \u041a\u0430\u043a \u043c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u044d\u0442\u043e \u0441\u0443\u043f\u0435\u0440\u0443\u0434\u043e\u0431\u043d\u043e.<\/p>\n<p>  <\/p>\n<p>\u0422\u0435 \u043e\u0442\u0447\u0451\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u0432\u0448\u0438\u0432\u0430\u0435\u0442\u0435 \u0432 UI-\u043e\u0442\u0447\u0451\u0442, \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0435\u043c \u043c\u0435\u043d\u044e. \u0412\u043e\u0442 \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/rl\/6l\/uy\/rl6luydrqdypvonn3uzb6jgdauc.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/rl\/6l\/uy\/rl6luydrqdypvonn3uzb6jgdauc.jpeg\" data-blurred=\"true\"\/><\/p>\n<p>  <\/p>\n<p>\u041c\u043e\u0436\u0435\u0442\u0435 \u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u044d\u0442\u0438\u043c \u043e\u0442\u0447\u0451\u0442\u043e\u043c \u0441 \u043a\u043e\u043b\u043b\u0435\u0433\u0430\u043c\u0438. \u041d\u0430\u043f\u043e\u043c\u043d\u044e, \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0432 \u043f\u0435\u0440\u0432\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u044b \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0435 \u0441\u0432\u043e\u0438 \u043e\u0442\u0447\u0451\u0442\u044b \u043d\u0430 \u0445\u043e\u0434\u0443 \u0438 \u0434\u0435\u043b\u0438\u0442\u0435\u0441\u044c \u0441 \u043a\u043e\u043b\u043b\u0435\u0433\u0430\u043c\u0438, \u0430 \u0432 \u044d\u0442\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435 \u0432\u044b \u0432\u0448\u0438\u0432\u0430\u0435\u0442\u0435 \u0441\u0432\u043e\u0438 \u043e\u0442\u0447\u0451\u0442\u044b \u0432 HTML, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0443 \u0432\u0430\u0441 \u043d\u0430 CI. \u042d\u0442\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u0441\u044b\u043b\u043a\u0430, \u0432 GET-\u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0437\u0430\u0448\u0438\u0442\u044b \u0437\u0430\u043f\u0440\u043e\u0441, view \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435. \u042d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u0430\u043c\u044b\u0439 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u0432\u0448\u0438\u0442\u044b\u0439 \u0432 HTML \u043e\u0442\u0447\u0451\u0442.<\/p>\n<p>  <\/p>\n<h2 id=\"validaciya-anchorvalidanchor\">\u0412\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f <a name=\"valid\"><\/a><\/h2>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u0441\u0443\u043f\u0435\u0440\u0432\u0430\u0436\u043d\u0430\u044f \u0438 \u0441\u0443\u043f\u0435\u0440\u043a\u043b\u0430\u0441\u0441\u043d\u0430\u044f \u0438\u0441\u0442\u043e\u0440\u0438\u044f. \u041f\u043e\u0447\u0435\u043c\u0443 \u043e\u043d\u0430 \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u0432\u0430\u0436\u043d\u0430: \u044f \u043f\u043e\u0434\u0441\u0442\u0443\u043f\u0430\u043b\u0441\u044f \u043a \u043d\u0435\u0439 \u043d\u0435 \u043e\u0434\u043d\u0443 \u043d\u0435\u0434\u0435\u043b\u044e, \u043f\u044b\u0442\u0430\u044f\u0441\u044c \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u0442\u044c, \u043a\u0430\u043a \u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044b. \u0427\u0442\u043e \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442: \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0448\u0438 pull requests \u043d\u0435 \u043f\u043e\u043f\u0430\u043b\u0438 \u0432 \u043c\u0430\u0441\u0442\u0435\u0440, \u0435\u0441\u043b\u0438 \u0443\u0445\u0443\u0434\u0448\u0430\u044e\u0442 \u043d\u0430\u0448\u0443 \u0441\u0431\u043e\u0440\u043a\u0443 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044e\u0442 \u043e\u0431\u044a\u0451\u043c \u0431\u0430\u043d\u0434\u043b\u0430 \u0438\u043b\u0438 \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438). \u0422\u0430\u043a\u0438\u0435 \u0432 \u043c\u0430\u0441\u0442\u0435\u0440\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u044b. <\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u0443\u0434\u043e\u0431\u043d\u043e? \u041f\u043e\u0434\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0431\u044b\u043b\u043e \u043d\u0435\u0433\u0434\u0435, \u044f \u043d\u0438\u0433\u0434\u0435 \u043d\u0435 \u043d\u0430\u0442\u044b\u043a\u0430\u043b\u0441\u044f \u043d\u0430 \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f. <\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u044b\u0442\u0430\u043b\u0441\u044f \u0447\u0442\u043e-\u0442\u043e \u0438\u0437\u043e\u0431\u0440\u0435\u0442\u0430\u0442\u044c, \u0434\u0435\u043b\u0430\u043b, \u043f\u043e\u043d\u0438\u043c\u0430\u043b, \u0447\u0442\u043e \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043f\u0435\u0440\u0435\u0434\u0435\u043b\u044b\u0432\u0430\u043b, \u043f\u043e\u043d\u0438\u043c\u0430\u043b, \u0447\u0442\u043e \u043d\u0435\u0443\u0434\u043e\u0431\u043d\u043e, \u0441\u043d\u043e\u0432\u0430 \u043f\u0435\u0440\u0435\u0434\u0435\u043b\u044b\u0432\u0430\u043b\u2026 \u042d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043a\u0440\u043e\u043f\u043e\u0442\u043b\u0438\u0432\u0430\u044f \u0438\u0441\u0442\u043e\u0440\u0438\u044f, \u043d\u043e \u043a\u0430\u043a \u043c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0432 \u0438\u0442\u043e\u0433\u0435 \u044f \u0441\u043f\u0440\u0430\u0432\u0438\u043b\u0441\u044f. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f Statoscope CLI. \u042d\u0442\u043e \u043a\u043e\u043d\u0441\u043e\u043b\u044c\u043d\u0430\u044f \u0443\u0442\u0438\u043b\u0438\u0442\u0430, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0430\u044f \u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044b.<\/p>\n<p>  <\/p>\n<h4 id=\"ustanovit-cli\">\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c CLI<\/h4>\n<p>  <\/p>\n<p><code>npm install -g @statoscope\/cli<\/code><\/p>\n<p>  <\/p>\n<h4 id=\"ustanovit-plagin-dlya-validacii-webpack-sborki\">\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d \u0434\u043b\u044f \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 webpack-\u0441\u0431\u043e\u0440\u043a\u0438<\/h4>\n<p>  <\/p>\n<p><code>npm install -D @statoscope\/stats-validator-plugin-webpack<\/code><\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442? \u041c\u043d\u0435 \u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0438\u0437\u043e\u0431\u0440\u0435\u0442\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043a\u0430\u0440\u0434\u0438\u043d\u0430\u043b\u044c\u043d\u043e \u043d\u043e\u0432\u043e\u0435. \u041d\u0443, \u0432\u043e\u0442 \u0435\u0441\u0442\u044c \u0432\u0441\u0435\u043c \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u0439 ESLint. \u041e\u043d \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043b\u0438\u043d\u0442\u0438\u0442\u044c JS\/TS-\u0444\u0430\u0439\u043b\u044b. \u0415\u0441\u043b\u0438 \u0447\u0442\u043e-\u0442\u043e \u0438\u0434\u0451\u0442 \u043d\u0435 \u0442\u0430\u043a, \u043d\u0430\u0448 \u043a\u043e\u0434 \u043d\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0435 ESLint, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u043e\u0448\u0438\u0431\u043a\u0443. \u0415\u0441\u043b\u0438 \u043d\u0430 CI \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u043d\u0435 \u043f\u0440\u043e\u0439\u0434\u0443\u0442 \u2014 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u043e\u0434\u0435\u043b\u0430\u0435\u0448\u044c, \u0438\u0434\u0438 \u0438 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0439 \u044d\u0442\u0438 \u043e\u0448\u0438\u0431\u043a\u0438.<\/p>\n<p>  <\/p>\n<p>\u042f \u0445\u043e\u0442\u0435\u043b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435\u0435, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u043a\u0430\u043a\u0443\u044e-\u0442\u043e \u0441\u0443\u043f\u0435\u0440\u043d\u043e\u0432\u0443\u044e \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044e. \u041d\u043e\u0432\u044b\u0445 \u0432\u0435\u0449\u0435\u0439 \u0432\u0440\u043e\u0434\u0435 Jora \u0438 Discovery.js, \u043c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043a\u043e\u043d\u0441\u043e\u043b\u044c\u043d\u0443\u044e \u0443\u0442\u0438\u043b\u0438\u0442\u0443 Statoscope CLI. \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u043f\u043b\u0430\u0433\u0438\u043d \u0434\u043b\u044f webpack, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u043c \u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c webpack-\u0441\u0442\u0430\u0442\u044b. <\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u043a\u0430 \u0447\u0442\u043e Statoscope \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 webpack-\u0441\u0442\u0430\u0442\u0430\u043c\u0438, \u043d\u043e \u0432 \u043c\u043e\u0451\u043c \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043c\u0438\u0440\u0435 \u043e\u043d \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u043e\u0439 \u0434\u043b\u044f \u043b\u044e\u0431\u043e\u0433\u043e \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u043e \u0441\u0442\u0440\u0435\u043c\u0438\u043b\u0441\u044f \u0440\u0430\u0441\u043f\u0438\u043b\u0438\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u0443\u0441\u043e\u0447\u0435\u043a \u0442\u0443\u043b\u043a\u0438\u0442\u0430 (\u043d\u0435 \u0437\u0440\u044f \u044f \u0441\u043a\u0430\u0437\u0430\u043b, \u0447\u0442\u043e \u044d\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0443\u043b\u043a\u0438\u0442), \u0441\u0442\u0440\u0435\u043c\u0438\u043b\u0441\u044f \u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u043b\u0441\u044f \u043a\u0430\u043a \u043f\u043b\u0430\u0433\u0438\u043d, \u0430 \u043d\u0435 \u043a\u0430\u043a \u0447\u0442\u043e-\u0442\u043e \u0437\u0430\u0445\u0430\u0440\u0434\u043a\u043e\u0436\u0435\u043d\u043d\u043e\u0435. \u0418 \u043f\u043e\u043d\u0435\u043c\u043d\u043e\u0433\u0443 \u044f \u043a \u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u0445\u043e\u0436\u0443.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c Statoscope CLI \u0438 webpack-\u043f\u043b\u0430\u0433\u0438\u043d \u0434\u043b\u044f \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0438\u043c\u0435\u043d\u043d\u043e webpack-\u0441\u0442\u0430\u0442\u043e\u0432. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 Rollup, \u0442\u043e \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c \u0443 \u0432\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043f\u043b\u0430\u0433\u0438\u043d \u0438\u043c\u0435\u043d\u043d\u043e \u0434\u043b\u044f \u0435\u0433\u043e \u0441\u0442\u0430\u0442\u043e\u0432, \u0438\u043b\u0438 esbuild-\u0441\u0442\u0430\u0442\u043e\u0432. \u042d\u0442\u043e \u043a\u0430\u043a \u0432 ESLint: \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u043b\u0438\u043d\u0442\u0438\u0442\u044c TypeScript \u2014 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u043f\u043b\u0430\u0433\u0438\u043d, \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u043b\u0438\u043d\u0442\u0438\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0435\u0449\u0451 \u2014 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u043b\u0430\u0433\u0438\u043d \u0438 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430.<\/p>\n<p>  <\/p>\n<p>\u0412\u043e\u0442 \u0442\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u043e\u043d\u0444\u0438\u0433 Statoscope \u0434\u043b\u044f \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 (\u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043d\u0435\u0435):<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">module.exports = {   validate: {     \/\/ \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d \u0441 \u043f\u0440\u0430\u0432\u0438\u043b\u0430\u043c\u0438 \u0434\u043b\u044f webpack-\u0441\u0431\u043e\u0440\u043e\u043a     plugins: ['@statoscope\/webpack'},     reporters: [       \/\/ \u0440\u0435\u043f\u043e\u0440\u0442\u0435\u0440 \u0434\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c       '@statoscope\/console',       \/\/ \u0440\u0435\u043f\u043e\u0440\u0442\u0435\u0440 \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 UI-\u043e\u0442\u0447\u0435\u0442\u0430       ['@statoscope\/stats-report', {open: true}],     ].     rules: {       \/\/ \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u0443\u0445\u0443\u0434\u0448\u0438\u043b\u043e\u0441\u044c \u043d\u0435 \u0431\u043e\u043b\u0435\u0435 \u0447\u0435\u043c \u043d\u0430 10 \u0441\u0435\u043a       '@statoscope\/webpack\/build-time-limits': ['error', {global: 10000}],       \/\/ \u043b\u044e\u0431\u044b\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430       }     } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0434\u0435\u0441\u044c \u0432\u0441\u0435 \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u0442\u043e\u0442 \u0436\u0435 ESLint \u2014 \u043e\u043f\u044f\u0442\u044c \u0436\u0435, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0432\u044b\u0431\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u0437 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u044b\u0445 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0439. \u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d\u044b, \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u043c \u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043b\u0430\u0433\u0438\u043d\u0430. <\/p>\n<p>  <\/p>\n<p>\u0413\u043e\u0432\u043e\u0440\u0438\u043c, \u0447\u0442\u043e \u0431\u0443\u0434\u0443\u0442 \u0432\u043e\u0442 \u0442\u0430\u043a\u0438\u0435 \u0440\u0435\u043f\u043e\u0440\u0442\u0435\u0440\u044b. \u041f\u043e\u043a\u0430 \u0432 Statoscope \u0434\u0432\u0430 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u0440\u0435\u043f\u043e\u0440\u0442\u0435\u0440\u0430: \u043a\u043e\u043d\u0441\u043e\u043b\u044c\u043d\u044b\u0439 (\u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u0432\u0441\u0435 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c) \u0438 stats-report (\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043e\u0442\u0447\u0435\u0442). \u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043e\u0442\u0447\u0435\u0442\u0430 \u2014 \u044d\u0442\u043e \u043a\u0438\u043b\u043b\u0435\u0440-\u0444\u0438\u0447\u0430 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0438\u0441\u043a\u0430\u0442\u044c \u0438 \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u043c\u0443 \u0447\u0438\u0441\u043b\u0443 \u043e\u0448\u0438\u0431\u043e\u043a \u0442\u0440\u0443\u0434\u043d\u043e. <\/p>\n<p>  <\/p>\n<p>\u0410 \u043f\u043e\u0442\u043e\u043c \u044f \u0445\u043e\u0447\u0443 \u044d\u0442\u0438 \u043e\u0448\u0438\u0431\u043a\u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c \u043a \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u043c \u043c\u043e\u0434\u0443\u043b\u044f\u043c. \u042f \u0445\u043e\u0447\u0443 \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c \u0438 \u0432\u0438\u0434\u0435\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u043e\u0448\u0438\u0431\u043a\u0438 \u044d\u0442\u043e\u043c\u0443 \u043c\u043e\u0434\u0443\u043b\u044e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442. \u0412 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c, \u043c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u2014 \u0442\u0430\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u0431\u0435\u0437 \u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u0430, \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0443\u043f\u0435\u0440\u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u043a\u043e\u043d\u0441\u043e\u043b\u044c\u043d\u044b\u0435 UI-\u0448\u0442\u0443\u043a\u0438 \u043c\u043d\u0435 \u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c. <\/p>\n<p>  <\/p>\n<p>\u0412 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 rules \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c, \u043a\u0430\u043a\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0445\u043e\u0442\u0438\u043c \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043a \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438. \u041f\u0440\u0430\u0432\u0438\u043b \u0441\u0435\u0439\u0447\u0430\u0441 \u043f\u043e\u0440\u044f\u0434\u043a\u0430 12. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044e\u0434\u0436\u0435\u0442\u0438\u0440\u0443\u044e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u0431\u0430\u043d\u0434\u043b\u0430, initial size \u0431\u0430\u043d\u0434\u043b\u0430, \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0431\u0430\u043d\u0434\u043b\u0430 \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442. <\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435, \u0447\u0442\u043e\u0431\u044b pull requests, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044e\u0442 \u0432\u0440\u0435\u043c\u044f \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u0431\u0430\u043d\u0434\u043b\u0430 \u043d\u0430 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u043c 3G, \u043d\u0435 \u043f\u043e\u043f\u0430\u0434\u0430\u043b\u0438 \u0432 master. \u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0432 Statoscope \u043e\u043d\u043e \u0435\u0441\u0442\u044c. <\/p>\n<p>  <\/p>\n<p>\u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043f\u043e \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u043f\u0440\u0430\u0432\u0438\u043b\u0443 \u0435\u0441\u0442\u044c, \u043c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u0439\u0442\u0438 \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 Statoscope, \u0442\u0430\u043c \u0435\u0441\u0442\u044c <a href=\"https:\/\/github.com\/statoscope\/statoscope\/blob\/master\/packages\/stats-validator-plugin-webpack\/README.md\">\u0441\u0441\u044b\u043b\u043a\u0430<\/a> \u043d\u0430 \u044d\u0442\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u0430, \u0438 \u043f\u043e \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u043f\u0440\u0430\u0432\u0438\u043b\u0443 \u0435\u0441\u0442\u044c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0430\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f. \u041e\u043d\u0438 \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u043b\u0443\u0447\u0430\u0438 \u0436\u0438\u0437\u043d\u0438 \u0432\u043f\u043b\u043e\u0442\u044c \u0434\u043e \u00ab\u0437\u0430\u043f\u0440\u0435\u0442\u0438\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0443\u0431\u043b\u0438 \u043f\u0430\u043a\u0435\u0442\u043e\u0432\u00bb. \u0415\u0441\u043b\u0438 \u0432\u0434\u0440\u0443\u0433 \u0441\u0434\u0435\u043b\u0430\u0435\u0442\u0435 pull request, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0439 \u0434\u0443\u0431\u043b\u044c, \u0442\u043e \u0442\u0430\u043a\u043e\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0435 \u043f\u0440\u043e\u0439\u0434\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443, \u0432\u0430\u0441 \u043e\u0442\u043f\u0440\u0430\u0432\u044f\u0442 \u0435\u0433\u043e \u043f\u0435\u0440\u0435\u0434\u0435\u043b\u044b\u0432\u0430\u0442\u044c \u2014 \u044d\u0442\u043e \u0438\u0441\u0442\u043e\u0440\u0438\u044f \u043f\u0440\u043e CI.<\/p>\n<p>  <\/p>\n<h3 id=\"zapuskaem-validaciyu\">\u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e<\/h3>\n<p>  <\/p>\n<p>\u0412\u0441\u0451 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e. \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438:<\/p>\n<p>  <\/p>\n<p><code>$ statoscope validate --input .\/stats.json<\/code><\/p>\n<p>  <\/p>\n<p>\u0412\u0441\u0435 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e: \u0432\u0432\u043e\u0434\u0438\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 statoscope validate, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0438 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u043d\u0430\u0434 \u0447\u0435\u043c \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043e\u0442\u0447\u0451\u0442 (\u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435), \u0442\u043e\u0436\u0435 \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 ESLint.<\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u043c\u044b \u043f\u0440\u043e\u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u043e\u0434\u043d\u0438 \u0441\u0442\u0430\u0442\u044b. \u041d\u043e \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u0430, \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u044e\u0449\u0438\u0435 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u0441\u0442\u0430\u0442\u044b (\u0432\u0440\u043e\u0434\u0435 \u00ab\u043d\u0435\u0442 \u043b\u0438 \u0434\u0443\u0431\u043b\u0435\u0439\u00bb), \u0442\u0430\u043a \u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u044e\u0442, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u044b \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u043b\u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u0441\u0431\u043e\u0440\u043e\u043a? \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u043d\u0435 \u0431\u043e\u043b\u0435\u0435 \u0447\u0435\u043c \u043d\u0430 2%. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0443\u0436\u043d\u043e \u0441\u043a\u0430\u0440\u043c\u043b\u0438\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044b \u0438 \u0438\u0437 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0432\u0435\u0442\u043a\u0438, \u0438 \u0438\u0437 master.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u0438:<br \/>  &#8212;input \u2014 \u044d\u0442\u043e \u0442\u0435\u043a\u0443\u0449\u0438\u0435 \u0441\u0442\u0430\u0442\u044b,<br \/>  &#8212;reference \u2014 \u00ab\u044d\u0442\u0430\u043b\u043e\u043d\u043d\u044b\u0435\u00bb, \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0435, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435. <\/p>\n<p>  <\/p>\n<h3 id=\"izuchaem-otchyot\">\u0418\u0437\u0443\u0447\u0430\u0435\u043c \u043e\u0442\u0447\u0451\u0442<\/h3>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435, \u0442\u043e \u0436\u0435, \u0447\u0442\u043e \u043c\u044b \u0432\u0438\u0434\u0435\u043b\u0438 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438, \u043d\u043e \u0432 \u0443\u0434\u043e\u0431\u043e\u0432\u0430\u0440\u0438\u043c\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/jm\/0k\/uc\/jm0kucosid1srizwlrvh5wgv5rm.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/jm\/0k\/uc\/jm0kucosid1srizwlrvh5wgv5rm.jpeg\" data-blurred=\"true\"\/><\/p>\n<p>  <\/p>\n<p>\u042d\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e, \u0433\u0434\u0435 \u0432\u0441\u0435 \u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0435\u043d\u043e, \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0441\u043a\u0440\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u043b\u0438 \u0440\u0430\u0441\u043a\u0440\u044b\u0432\u0430\u0442\u044c\u0441\u044f, \u043c\u043e\u0433\u0443\u0442 \u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0441\u0441\u044b\u043b\u043a\u0430\u043c\u0438 (\u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e\u0431 \u043e\u0448\u0438\u0431\u043a\u0435 \u0438\u043b\u0438 \u0441 \u043a\u0430\u043a\u0438\u043c\u0438 \u043c\u043e\u0434\u0443\u043b\u044f\u043c\u0438 \u043e\u043d\u0430 \u0441\u0432\u044f\u0437\u0430\u043d\u0430). \u0422\u0443\u0442 \u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432\u0430\u0442\u044c, \u0441\u0432\u0435\u0440\u0445\u0443 \u043f\u043e\u043b\u0435 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e. \u042d\u0442\u043e \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0443\u0434\u043e\u0431\u043d\u0435\u0435, \u0447\u0435\u043c \u0433\u0440\u0435\u043f\u0430\u0442\u044c \u0438 \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0441\u043e\u043b\u044c\u043d\u044b\u0439 \u0432\u044b\u0432\u043e\u0434.<\/p>\n<p>  <\/p>\n<h2 id=\"zaprosy-v-staty-anchorrequestsanchor\">\u0417\u0430\u043f\u0440\u043e\u0441\u044b \u0432 \u0441\u0442\u0430\u0442\u044b <a name=\"requests\"><\/a><\/h2>\n<p>  <\/p>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0447\u0430\u0441\u0442\u044c, \u043a\u0430\u0441\u0430\u044e\u0449\u0430\u044f\u0441\u044f CLI. \u0417\u0430\u0447\u0435\u043c \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0432 \u0441\u0442\u0430\u0442\u044b?<\/p>\n<p>  <\/p>\n<p>\u0412\u043e\u0442 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c stats.json \u2014 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u043c\u043e\u0434\u0443\u043b\u044f\u0445, \u0447\u0430\u043d\u043a\u0430\u0445, \u0430\u0441\u0441\u0435\u0442\u0430\u0445. \u041c\u044b \u0445\u043e\u0442\u0438\u043c \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0438\u0437 \u0441\u0442\u0430\u0442\u043e\u0432 \u0440\u0430\u0437\u043c\u0435\u0440 \u0432\u0430\u0448\u0435\u0439 \u0441\u0431\u043e\u0440\u043a\u0438 \u0438\u043b\u0438 \u0435\u0435 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432 \u043a \u0432\u0430\u0448\u0435\u043c\u0443 pull request \u0438\u043b\u0438 \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u043c\u0435\u0442\u0440\u0438\u043a. <\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/mj\/0y\/8x\/mj0y8x3a5nyyqoejulazdnxxqso.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/mj\/0y\/8x\/mj0y8x3a5nyyqoejulazdnxxqso.jpeg\" data-blurred=\"true\"\/><\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u0442\u043e\u043b\u044c\u043a\u043e \u043a \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438, \u044d\u0442\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439 \u2014 \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u043a\u0430\u043a \u043e\u0442\u0442\u0443\u0434\u0430 \u0432\u044b\u0442\u0430\u0449\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435. \u041d\u043e \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043a\u043e\u043d\u0441\u043e\u043b\u044c\u043d\u0430\u044f \u0443\u0442\u0438\u043b\u0438\u0442\u0430 <code>statoscope query<\/code>, \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u0432\u0441\u0451 \u044d\u0442\u043e \u043f\u0440\u043e\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0435\u043c. \u041e\u043d\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c Jora-\u0437\u0430\u043f\u0440\u043e\u0441.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/un\/6p\/9w\/un6p9wgaugumghgz_hozjaxuyqa.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/un\/6p\/9w\/un6p9wgaugumghgz_hozjaxuyqa.jpeg\" data-blurred=\"true\"\/><\/p>\n<p>  <\/p>\n<p>\u0412\u043e\u0442 \u043d\u0430\u0434 \u0437\u0435\u043b\u0435\u043d\u043e\u0439 \u043b\u0438\u043d\u0438\u0435\u0439 \u0443\u043a\u0430\u0437\u0430\u043d\u043e, \u043a\u0430\u043a\u043e\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u0445\u043e\u0442\u0438\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u043d\u0430\u0434 \u0441\u0438\u043d\u0435\u0439 \u2014 \u0432 \u043a\u0430\u043a\u0438\u0445 \u0441\u0442\u0430\u0442\u0430\u0445 \u0434\u0435\u043b\u0430\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c: \u0430 \u0434\u0430\u0439-\u043a\u0430 \u043d\u0430\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043c\u043e\u0434\u0443\u043b\u0435\u0439. \u0418 \u044d\u0442\u0430 \u0443\u0442\u0438\u043b\u0438\u0442\u0430 \u0432\u0435\u0440\u043d\u0435\u0442 \u0435\u0433\u043e.<\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0439 Jora-\u0437\u0430\u043f\u0440\u043e\u0441 \u0438 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435. \u0412\u043e\u0442 \u0442\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u00ab\u0434\u0430\u0439 \u043c\u043d\u0435 \u0437\u0430\u043f\u0440\u043e\u0441 \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 query.jora, &#171;\u0441\u043f\u0430\u0439\u043f\u043d\u0438&#187; (\u043f\u0435\u0440\u0435\u0434\u0430\u0439) \u0435\u0433\u043e \u0432 statoscope query, \u043f\u0440\u0438\u043c\u0435\u043d\u0438 \u043a \u0442\u0430\u043a\u0438\u043c-\u0442\u043e \u0441\u0442\u0430\u0442\u0430\u043c, \u0430 \u043f\u043e\u0442\u043e\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u0438 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 \u0444\u0430\u0439\u043b result.json\u00bb:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/yn\/g0\/ru\/yng0rulhmvaac8zys77xoulxx_u.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/yn\/g0\/ru\/yng0rulhmvaac8zys77xoulxx_u.jpeg\" data-blurred=\"true\"\/><\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0445\u043e\u0442\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0448\u0438\u0431\u043e\u043a \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u044f\u0442\u044c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u043a pull request \u2014 \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430!<\/p>\n<p>  <\/p>\n<h2 id=\"ci--sobiraem-vse-vmeste-anchorcianchor\">CI \u2014 \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u043c \u0432\u0441\u0435 \u0432\u043c\u0435\u0441\u0442\u0435 <a name=\"ci\"><\/a><\/h2>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442, \u0435\u0441\u043b\u0438 \u0441\u043e\u0431\u0440\u0430\u0442\u044c \u0432\u043c\u0435\u0441\u0442\u0435 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044e \u0438 statoscope query. \u042f \u043f\u043e\u043a\u0430\u0436\u0443 \u044d\u0442\u043e \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 Github Actions.<\/p>\n<p>  <\/p>\n<h3 id=\"kommity-v-master\">\u041a\u043e\u043c\u043c\u0438\u0442\u044b \u0432 master<\/h3>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u044f \u0443\u0436\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043b, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c input-\u0441\u0442\u0430\u0442\u044b (\u0432 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0432\u0435\u0442\u043a\u0435) \u0438 reference-\u0441\u0442\u0430\u0442\u044b (\u0438\u0437 master). \u041a\u0430\u043a \u043c\u044b \u0438\u0445 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0438 \u0445\u0440\u0430\u043d\u0438\u043c? \u041d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043c\u0438\u0442 \u0432 master \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u0431\u0438\u043b\u0434 (\u0435\u0441\u043b\u0438 \u043c\u044b \u0447\u0442\u043e-\u0442\u043e \u0437\u0430\u043a\u043e\u043c\u043c\u0438\u0442\u0438\u043b\u0438 \u0432 master, \u0437\u043d\u0430\u0447\u0438\u0442, \u0442\u0430\u043c \u0432\u0441\u0451 \u0445\u043e\u0440\u043e\u0448\u043e), \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0438\u0437 \u043d\u0435\u0433\u043e \u0441\u0442\u0430\u0442\u044b, \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0444\u0430\u0439\u043b reference.json \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u043d\u0430\u0448\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u043e\u0432 \u2014 \u0438\u043c \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0432\u0441\u0451 \u0447\u0442\u043e \u0443\u0433\u043e\u0434\u043d\u043e. <\/p>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0440\u0435\u0447\u044c \u0438\u0434\u0435\u0442 \u043e GitHub, \u0442\u0430\u043c \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u043e\u0435 \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u043e\u0432, \u0432\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c, \u043f\u0440\u043e\u0441\u0442\u043e \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u0435 \u00abupload artifact\u00bb. \u0421 \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0441\u0442\u0430\u0442\u044b \u0438\u0437 master, \u0438 \u043e\u043d\u0438 \u0433\u0434\u0435-\u0442\u043e \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f.<\/p>\n<p>  <\/p>\n<h3 id=\"kommity-v-pull-requests\">\u041a\u043e\u043c\u043c\u0438\u0442\u044b \u0432 pull requests<\/h3>\n<p>  <\/p>\n<p>\u041d\u043e \u0443 \u043d\u0430\u0441 \u0435\u0449\u0435 \u0435\u0441\u0442\u044c \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u044b \u0432 pull requests, \u0441\u0430\u043c\u043e\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435. \u041d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u043a\u043e\u043c\u043c\u0438\u0442\u0435 \u0432 pull request \u043c\u044b \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a \u0436\u0435 \u0431\u0438\u043b\u0434\u0438\u043c \u0441\u0431\u043e\u0440\u043a\u0443, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0438\u0437 \u043d\u0435\u0435 webpack-\u0441\u0442\u0430\u0442\u044b, \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b input.json, \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u0435\u043c \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442 reference.json \u0438\u0437 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u0448\u0430\u0433\u0430, \u0438 \u0432\u043e\u0442 \u0443 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442\u0441\u044f \u0434\u0432\u0430 \u0444\u0430\u0439\u043b\u0430. \u0421\u043a\u0430\u0440\u043c\u043b\u0438\u0432\u0430\u0435\u043c \u0434\u0432\u0430 \u044d\u0442\u0438\u0445 \u0441\u0442\u0430\u0442\u0430 \u0432 statoscope validate (\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c report.html) \u0438 statoscope query (\u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c result.json).<\/p>\n<p>  <\/p>\n<p>\u0412\u0441\u0451, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0438 UI-\u043e\u0442\u0447\u0435\u0442, \u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 query. \u0418 \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 \u043e\u0442 \u043b\u0438\u0446\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u0431\u043e\u0442\u0430.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/wx\/my\/ed\/wxmyedfspqstx-ehtqzw-v4g8li.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/wx\/my\/ed\/wxmyedfspqstx-ehtqzw-v4g8li.jpeg\" data-blurred=\"true\"\/><\/p>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c? \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0434\u0443\u043c\u0430\u0435\u043c. \u0422\u0435\u043a\u0441\u0442 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f \u2014 \u044d\u0442\u043e \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0437 query \u043f\u043b\u044e\u0441 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0448\u0430\u0431\u043b\u043e\u043d. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043f\u0440\u0438\u0432\u0435\u0434\u0443 Jora-\u0437\u0430\u043f\u0440\u043e\u0441 \u2014 \u043d\u0435 \u0442\u0430\u043a\u043e\u0439 \u0434\u043b\u0438\u043d\u043d\u044b\u0439, \u043a\u0430\u043a \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/fo\/1v\/jg\/fo1vjg9ezp1unuonkz8fyl0s7iq.png\" data-src=\"https:\/\/habrastorage.org\/webt\/fo\/1v\/jg\/fo1vjg9ezp1unuonkz8fyl0s7iq.png\"\/><\/p>\n<p>  <\/p>\n<p>\u041e\u043d \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u0438\u0437 \u0434\u0432\u0443\u0445 \u0441\u0442\u0430\u0442\u043e\u0432 (reference \u0438 input), \u043e\u0442\u043d\u0438\u043c\u0430\u0435\u0442 \u043e\u0434\u043d\u043e \u043e\u0442 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0440\u0430\u0437\u043d\u0438\u0446\u0443: \u0443\u0445\u0443\u0434\u0448\u0438\u043b\u0438 \u0438\u043b\u0438 \u0443\u043b\u0443\u0447\u0448\u0438\u043b\u0438. \u0414\u0435\u043b\u0430\u0435\u0442 \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u0441 initial size: \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0445\u0443\u0434\u0435\u043b\u0430 \u0438\u043b\u0438 \u043f\u043e\u043f\u0440\u0430\u0432\u0438\u043b\u0430\u0441\u044c \u043d\u0430\u0448\u0430 \u0441\u0431\u043e\u0440\u043a\u0430. \u0410 \u0435\u0449\u0451 \u0441\u043c\u043e\u0442\u0440\u0438\u0442 \u043d\u0430 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0448\u0438\u0431\u043e\u043a \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0438 \u044d\u0442\u043e \u0442\u043e\u0436\u0435 \u0434\u0430\u043c\u043f\u0438\u0442 \u0432 JSON. <\/p>\n<p>  <\/p>\n<p>\u0410 \u0432\u043e\u0442 \u043d\u0430\u0448 \u043d\u0430\u0448 \u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f. \u042f \u0432\u044b\u0431\u0440\u0430\u043b \u0434\u0432\u0438\u0436\u043e\u043a \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u0438 <a href=\"http:\/\/mustache.github.io\/\">mustache<\/a>, \u043d\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043b\u044e\u0431\u044b\u043c.<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/gw\/qu\/th\/gwquthmo-bsy76ykn7azpgbw9ks.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/gw\/qu\/th\/gwquthmo-bsy76ykn7azpgbw9ks.jpeg\" data-blurred=\"true\"\/><\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u0433\u043e\u0432\u043e\u0440\u0438\u043c: \u0432\u0440\u0435\u043c\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u0442\u0430\u043a-\u0442\u043e, initial size \u2014 \u0442\u0430\u043a-\u0442\u043e, \u043e\u0448\u0438\u0431\u043e\u043a \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0441\u0442\u043e\u043b\u044c\u043a\u043e-\u0442\u043e. \u0410 \u043f\u043e\u043b\u043d\u044b\u0439 \u043e\u0442\u0447\u0451\u0442 \u043c\u043e\u0436\u0435\u0448\u044c \u043d\u0430\u0439\u0442\u0438 \u0437\u0434\u0435\u0441\u044c \u2014 \u0438 \u0432\u0438\u0434\u0438\u0448\u044c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043f\u043e\u043b\u043d\u044b\u0439 \u043e\u0442\u0447\u0451\u0442.<\/p>\n<p>  <\/p>\n<p>\u0418 \u0432\u043e\u0442 \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u2014 \u043a pull request \u043f\u0440\u0438\u043a\u0440\u0435\u043f\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439 \u043e\u0442 \u043b\u0438\u0446\u0430 \u0431\u043e\u0442\u0430:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/cb\/2j\/ve\/cb2jveilpyd4l9-1_oobsi1bpja.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/cb\/2j\/ve\/cb2jveilpyd4l9-1_oobsi1bpja.jpeg\" data-blurred=\"true\"\/><\/p>\n<p>  <\/p>\n<p>\u0412\u0441\u0451 \u044d\u0442\u043e \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u043d\u0435 \u0432 \u0432\u043e\u0437\u0434\u0443\u0445\u0435, \u0430 \u043a\u0430\u043a \u0447\u0430\u0441\u0442\u044c \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430, \u0447\u0430\u0441\u0442\u044c \u043d\u0430\u0448\u0435\u0433\u043e CI. \u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0440\u044f\u0434 \u043f\u0440\u043e\u0432\u0435\u0440\u043e\u043a \u0432\u0440\u043e\u0434\u0435 \u043b\u0438\u043d\u0442\u0438\u043d\u0433\u0430 \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u0434\u0430, \u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c \u0448\u0430\u0433\u043e\u043c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 Statoscope: \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f, \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0435 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u0430, \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0437\u0430\u043f\u0440\u043e\u0441 \u0438 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f. \u042d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c \u0448\u0430\u0433\u043e\u043c. \u0412\u043e\u0442 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 Statoscope \u043e\u0442\u043c\u0435\u0447\u0435\u043d\u0430 \u043a\u0440\u0435\u0441\u0442\u0438\u043a\u043e\u043c, \u0442\u043e \u0435\u0441\u0442\u044c \u043d\u0430 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0447\u0442\u043e-\u0442\u043e \u0443\u043f\u0430\u043b\u043e:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/jg\/ty\/es\/jgtyesuwlj4unojqn-22bgvuxoy.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/jg\/ty\/es\/jgtyesuwlj4unojqn-22bgvuxoy.jpeg\" data-blurred=\"true\"\/><\/p>\n<p>  <\/p>\n<p>\u0425\u043e\u0447\u0435\u0448\u044c \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u0447\u0442\u043e \u2014 \u0438\u0434\u0438 \u0432 UI-\u043e\u0442\u0447\u0451\u0442 \u0438\u0437 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f \u0438 \u043d\u0430\u0441\u043b\u0430\u0436\u0434\u0430\u0439\u0441\u044f.<\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u043b\u043d\u044b\u0439 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 GitHub Action, \u0434\u0435\u043b\u0430\u044e\u0449\u0435\u0433\u043e \u0432\u0441\u0451, \u0447\u0442\u043e \u044f \u043f\u043e\u043a\u0430\u0437\u0430\u043b (\u0441 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u043c, Jora-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u043c), \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/github.com\/statoscope\/statoscope.tech\/blob\/main\/.github\/workflows\/ci.yml\">\u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c<\/a> \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 statoscope.tech. \u0422\u043e \u0435\u0441\u0442\u044c \u044d\u0442\u043e \u043d\u0435 \u044d\u0444\u0435\u043c\u0435\u0440\u043d\u0430\u044f \u0448\u0442\u0443\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u044f \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u043b \u2014 \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0432\u0441\u0451 \u0443\u0436\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c pull request \u0432 \u044d\u0442\u043e\u043c \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u0430\u043a\u043e\u0439 \u043e\u0442\u0447\u0435\u0442. \u041c\u043e\u0436\u0435\u0442\u0435 \u0437\u0430\u0432\u0435\u0441\u0442\u0438 \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0439 pull request \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442. \u041d\u0443, \u0438 \u0432 \u043f\u0430\u043f\u043a\u0435 workflows \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u0432\u0441\u0435\u0445 GitHub Actions, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a \u044d\u0442\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/p>\n<p>  <\/p>\n<h2 id=\"plany-anchorplansanchor\">\u041f\u043b\u0430\u043d\u044b <a name=\"plans\"><\/a><\/h2>\n<p>  <\/p>\n<p>\u041f\u043e\u0434\u0445\u043e\u0434\u044f \u043a \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044e \u0434\u043e\u043a\u043b\u0430\u0434\u0430, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043f\u0440\u043e \u043f\u043b\u0430\u043d\u044b, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0438\u0445 \u0433\u0440\u043e\u043c\u0430\u0434\u044c\u0451. <\/p>\n<p>  <\/p>\n<ul>\n<li>\n<p>\u0421\u0432\u043e\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u0441\u0442\u0430\u0442\u043e\u0432. \u041d\u0430\u043f\u043e\u043c\u043d\u044e, \u0447\u0442\u043e \u044f \u0432\u0435\u0434\u0443 Statoscope \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430. \u041d\u043e \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0433\u043e\u0440\u043e\u0434\u0438\u0442\u044c \u043e\u0433\u043e\u0440\u043e\u0434 \u0438\u0437 \u0440\u0430\u0437\u043d\u044b\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432 \u0441\u0442\u0430\u0442\u043e\u0432, \u0445\u043e\u0447\u0443 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u0432\u0441\u0435 \u0432 \u0435\u0434\u0438\u043d\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442.<\/p>\n<p>  <\/li>\n<li>\n<p>\u041e\u0447\u0435\u043d\u044c \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0434\u043e\u0431\u0438\u0442\u044c UI \u0434\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f. \u0412\u043e\u043e\u0431\u0449\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u043e\u0441\u0442\u044c \u2014 \u044d\u0442\u043e \u043a\u043b\u044e\u0447\u0435\u0432\u0430\u044f \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u043a \u044d\u0442\u043e\u043c\u0443 \u043e\u0447\u0435\u043d\u044c \u0441\u0442\u0440\u0435\u043c\u043b\u044e\u0441\u044c. \u041e\u0447\u0435\u043d\u044c \u0445\u043e\u0447\u0435\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b Statoscope \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u043b\u0441\u044f \u043f\u043b\u0430\u0433\u0438\u043d\u0430\u043c\u0438.<\/p>\n<p>  <\/li>\n<li>\n<p>\u0423\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u043e\u0432: \u044f \u0445\u043e\u0447\u0443 \u043e\u0442\u0432\u044f\u0437\u0430\u0442\u044c Statoscope \u043e\u0442 webpack, \u0447\u0442\u043e\u0431\u044b \u0432 \u0441\u0430\u043c\u043e\u043c Statoscope \u0434\u0430\u0436\u0435 \u043d\u0435 \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u0441\u044f webpack, \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u043b\u0430\u0433\u0438\u043d\u0430\u0445.<\/p>\n<p>  <\/li>\n<li>\n<p>\u041f\u0440\u043e\u0446\u0435\u0441\u0441 \u043f\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0432 CI \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u0432 \u0435\u0434\u0438\u043d\u044b\u0439 Github Action \u0438 \u043e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c \u043f\u0430\u043a\u0435\u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0432\u044b \u043d\u0435 \u043a\u043e\u043f\u0438\u043f\u0430\u0441\u0442\u0438\u043b\u0438 \u0441\u0435\u0431\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434, \u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438 Github Action \u0438 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438. <\/p>\n<p>  <\/li>\n<li>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u0432\u0441\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u0440\u0430\u0441\u043f\u0438\u0445\u0430\u043d\u0430 \u043f\u043e readme \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438. \u0415\u0441\u043b\u0438 \u0437\u0430\u0439\u0434\u0435\u0442\u0435 \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439, \u0442\u0430\u043c \u0435\u0441\u0442\u044c \u043f\u0430\u043f\u043a\u0430 packages, \u0438 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u043f\u0430\u043a\u0435\u0442\u0443 \u0435\u0441\u0442\u044c \u043a\u0430\u043a\u0430\u044f-\u0442\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f. \u041e\u0447\u0435\u043d\u044c \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0435\u0434\u0438\u043d\u044b\u0439 \u043f\u043e\u0440\u0442\u0430\u043b \u0441 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439 \u2014 \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u043d\u043e \u0443 <a href=\"https:\/\/jestjs.io\/\">Jest<\/a> (\u043c\u043d\u0435 \u0431\u0435\u0437\u0443\u043c\u043d\u043e \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f, \u043a\u0430\u043a \u0443 \u043d\u0438\u0445 \u0441\u0434\u0435\u043b\u0430\u043d\u043e).<\/p>\n<p>  <\/li>\n<li>\n<p>\u0425\u043e\u0447\u0435\u0442\u0441\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0430\u0442\u044c rempl (\u044d\u0442\u043e \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f, \u0434\u0435\u043c\u043a\u043e\u0439 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u044f\u0432\u043b\u044f\u043b\u0441\u044f Webpack Bundle Analyzer \u0432 2016 \u0433\u043e\u0434\u0443). \u041a\u0430\u043a\u0430\u044f \u0437\u0434\u0435\u0441\u044c \u0438\u0434\u0435\u044f: \u0435\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0441\u0431\u043e\u0440\u043a\u0443 \u0432 watch-\u0440\u0435\u0436\u0438\u043c\u0435 \u0432\u0440\u043e\u0434\u0435 HMR (Hot Module Replacement), \u0432\u044b \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0435 \u0441\u0432\u043e\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440, \u0438 \u0443 \u0432\u0430\u0441 \u0434\u043e\u0441\u0442\u0443\u043f \u043a Statoscope \u0435\u0441\u0442\u044c \u043f\u0440\u044f\u043c\u043e \u0438\u0437 \u0441\u0440\u0435\u0434\u0441\u0442\u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0412\u044b \u0447\u0442\u043e-\u0442\u043e \u043c\u0435\u043d\u044f\u0435\u0442\u0435 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c \u043a\u043e\u0434\u0435 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u0435\u0440\u0441\u0442\u0430\u0435\u0442\u0435 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e React-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442), \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0435, \u0443 \u0432\u0430\u0441 \u043e\u0442\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 HMR, \u0432 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u0445 \u0432\u0430\u0448\u0435\u0433\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a \u0436\u0435 \u0432\u0438\u0441\u0438\u0442 Statoscope, \u0438 \u0432\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0447\u0438\u0445 \u043f\u0435\u0440\u0435\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0442\u0447\u0451\u0442\u044b.<\/p>\n<p>  <\/li>\n<li>\n<p>\u0410\u043d\u0430\u043b\u0438\u0437 \u043a\u043e\u043d\u0444\u0438\u0433\u0430 \u0441\u0431\u043e\u0440\u0449\u0438\u043a\u0430. \u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f, \u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, webpack \u2014 \u044d\u0442\u043e, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0438\u0441\u0442\u043e\u0440\u0438\u044f \u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043d\u0430\u0432\u044b\u043a. \u0418 \u043e\u0447\u0435\u043d\u044c \u0441\u0438\u043b\u044c\u043d\u043e \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u043e\u043b\u043b\u0435\u0433\u0430\u043c \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0441\u043e\u0432\u0435\u0442\u044b, \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u0431\u044b\u043b \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u0435\u0435. \u041a\u043e\u0433\u0434\u0430 \u0443 Statoscope \u0431\u0443\u0434\u0435\u0442 \u0442\u0430\u043a\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u0441\u0442\u0430\u043d\u0435\u0442 \u043f\u0440\u043e\u0449\u0435 \u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0441\u0431\u043e\u0440\u043a\u0438.<\/p>\n<p>  <\/li>\n<li>\n<p>\u0420\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043f\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0431\u043e\u0440\u043a\u0438. \u0425\u043e\u0447\u0435\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c Statoscope, \u0430 \u043e\u043d \u0441\u043a\u0430\u0437\u0430\u043b: \u00ab\u0421\u043b\u0443\u0448\u0430\u0439, \u043a\u043e\u043b\u043b\u0435\u0433\u0430, \u0443 \u0442\u0435\u0431\u044f \u0432\u043e\u0442 \u0442\u0443\u0442 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u0432\u043e\u0442 \u0442\u0443\u0442 \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0441\u0434\u0435\u043b\u0430\u0439 \u2014 \u0438 \u0442\u044b \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0448\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0441\u0432\u043e\u0435\u0433\u043e \u0431\u0430\u043d\u0434\u043b\u0430 \u0432\u043e\u0442 \u043d\u0430 \u0441\u0442\u043e\u043b\u044c\u043a\u043e-\u0442\u043e \u043c\u0435\u0433\u0430\u0431\u0430\u0439\u0442\u00bb.<\/p>\n<p>  <\/li>\n<li>\n<p>\u0420\u0435\u0434\u0438\u0437\u0430\u0439\u043d. \u0425\u043e\u0447\u0443 \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u0441\u043f\u0430\u0441\u0438\u0431\u043e \u043c\u043e\u0435\u043c\u0443 \u043a\u043e\u043b\u043b\u0435\u0433\u0435 \u0414\u0430\u043d\u0438\u043b\u0435 \u0410\u0432\u0434\u043e\u0448\u0438\u043d\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0448\u0435\u043b \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0434\u043b\u044f \u0440\u0435\u0434\u0438\u0437\u0430\u0439\u043d\u0430. \u041f\u043e\u043a\u0430 \u044d\u0442\u043e \u0445\u0440\u0430\u043d\u0438\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0430\u0445 Figma, \u043d\u043e \u044f \u0443\u0432\u0435\u0440\u0435\u043d, \u0447\u0442\u043e \u0440\u0443\u043a\u0438 \u0434\u043e\u0439\u0434\u0443\u0442 \u0438 \u0434\u043e \u044d\u0442\u043e\u0433\u043e.<\/p>\n<p>  <\/li>\n<li>\n<p>\u0418 \u043c\u043e\u044f \u043b\u0438\u0447\u043d\u0430\u044f \u043c\u0435\u0447\u0442\u0430: \u0440\u0435\u0439\u0442\u0438\u043d\u0433 \u0441\u0431\u043e\u0440\u043e\u043a. \u042f \u0445\u043e\u0447\u0443, \u0447\u0442\u043e\u0431\u044b \u0441\u0431\u043e\u0440\u043a\u0430\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043c\u0435\u0440\u044f\u0442\u044c\u0441\u044f. \u041f\u043e\u043a\u0430 \u043f\u0440\u043e\u0434\u0443\u043c\u044b\u0432\u0430\u044e, \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u043d\u043e \u0445\u043e\u0447\u0435\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b \u0442\u043e\u043f \u0441\u0431\u043e\u0440\u043e\u043a \u043f\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438, \u043f\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 webpack \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435.<\/p>\n<p>  <\/li>\n<\/ul>\n<p>  <\/p>\n<p>\u0417\u0430\u0447\u0435\u043c \u044f \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u044e \u043e \u043f\u043b\u0430\u043d\u0430\u0445? Statoscope \u2014 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043e\u043f\u0435\u043d\u0441\u043e\u0440\u0441\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442, \u0442\u0430\u043a \u0447\u0442\u043e issues \u0438 pull requests \u043f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442\u0441\u044f. \u042f \u0431\u044b\u0441\u0442\u0440\u043e \u043e\u0442\u0432\u0435\u0447\u0430\u044e \u043d\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u044b, \u043c\u043d\u0435 \u044d\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e. \u0415\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u043f\u043e\u0443\u0447\u0430\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432 \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u2014 \u043f\u043e \u043b\u044e\u0431\u043e\u043c\u0443 \u0438\u0437 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0445 \u043f\u0443\u043d\u043a\u0442\u043e\u0432 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043c\u043e\u0447\u044c.<\/p>\n<p>  <\/p>\n<p>\u0410 \u0432\u043e\u0442 \u0447\u0442\u043e \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043b \u0414\u0430\u043d\u0438\u043b\u0430, \u043a\u0430\u043a \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c:<\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/fj\/1o\/zr\/fj1ozridfamo2rz3weo2pu3whzu.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/fj\/1o\/zr\/fj1ozridfamo2rz3weo2pu3whzu.jpeg\" data-blurred=\"true\"\/><\/p>\n<p>  <\/p>\n<p>\u0421\u043c\u044b\u0441\u043b \u0442\u0443\u0442 \u0432 \u0433\u0438\u0431\u043a\u043e\u043c UI: \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c, \u043a\u0430\u043a\u0438\u0435 \u0431\u043b\u043e\u043a\u0438 \u043d\u0443\u0436\u043d\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u0440\u0435\u0448\u0430\u0442\u044c, \u0447\u0442\u043e \u044f \u0432\u043e\u043e\u0431\u0449\u0435 \u0445\u043e\u0447\u0443 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u043d\u0435 \u043d\u0435 \u043d\u0443\u0436\u0435\u043d \u0441\u043f\u0438\u0441\u043e\u043a \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u043d\u043e \u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043d\u0438\u043c\u0430\u0442\u044c \u0433\u0440\u0430\u0444\u0438\u043a.<\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u043d\u0438\u043b\u0430 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u043b \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f \u0432 \u044d\u0442\u043e\u043c \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0438, \u0435\u0441\u0442\u044c \u0432 Figma, \u0442\u0443\u0442 \u0442\u043e\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043a\u043e\u043d\u0442\u0440\u0438\u0431\u044c\u044e\u0442\u0438\u0442\u044c. \u0423 \u043c\u0435\u043d\u044f \u0432 \u043b\u044e\u0431\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0440\u0443\u043a\u0438 \u0434\u043e \u044d\u0442\u043e\u0433\u043e \u043a\u043e\u0433\u0434\u0430-\u0442\u043e \u0434\u043e\u0439\u0434\u0443\u0442, \u043d\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043c\u043e\u0447\u044c.<\/p>\n<p>  <\/p>\n<h2 id=\"call-to-action-anchorconclusionanchor\">Call to action <a name=\"conclusion\"><\/a><\/h2>\n<p>  <\/p>\n<p>\u041d\u0443 \u0438, \u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u043a \u0447\u0435\u043c\u0443 \u044f \u043f\u0440\u0438\u0437\u044b\u0432\u0430\u044e \u044d\u0442\u0438\u043c \u0434\u043e\u043a\u043b\u0430\u0434\u043e\u043c:<\/p>\n<p>  <\/p>\n<ul>\n<li>\n<p>\u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 statoscope.tech. \u042d\u0442\u043e \u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430, \u0442\u0430\u043c \u0435\u0441\u0442\u044c \u0434\u0435\u043c\u043e\u0434\u0430\u043d\u043d\u044b\u0435, \u0438 \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0441\u0432\u043e\u0438.<\/p>\n<p>  <\/li>\n<li>\n<p>\u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 @statoscope\/webpack-plugin. \u041d\u0430\u043f\u043e\u043c\u043d\u044e, \u044d\u0442\u043e\u0442 \u043f\u043b\u0430\u0433\u0438\u043d \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438, \u0447\u0435\u043c \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u0430\u043c webpack.<\/p>\n<p>  <\/li>\n<li>\n<p>\u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 @statoscope\/cli \u0434\u043b\u044f \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438, \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432. \u041a\u0441\u0442\u0430\u0442\u0438, Statoscope \u0441\u0435\u0439\u0447\u0430\u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0432 \u043f\u0430\u043a\u0435\u0442\u0435 \u0410\u043d\u0434\u0440\u0435\u044f \u0421\u0438\u0442\u043d\u0438\u043a\u0430 <a href=\"https:\/\/github.com\/ai\/size-limit\">size-limit<\/a>. \u041d\u0435\u0434\u0430\u0432\u043d\u043e \u043c\u044b \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u0435\u0433\u043e \u0442\u0443\u0434\u0430, \u0437\u0430\u043c\u0435\u043d\u0438\u0432 Webpack Bundle Analyzer. \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 size-limit \u0441 \u0444\u043b\u0430\u0436\u043a\u043e\u043c &#8212;why (\u00ab\u043f\u043e\u0447\u0435\u043c\u0443 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u043b\u0441\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u00bb) \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f Statoscope.<\/p>\n<p>  <\/li>\n<li>\n<p>\u0414\u0435\u043b\u0438\u0442\u0435\u0441\u044c \u0444\u0438\u0434\u0431\u0435\u043a\u043e\u043c, \u0437\u0430\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b.<\/p>\n<p>  <\/li>\n<li>\n<p>\u041f\u043e\u0437\u043d\u0430\u043a\u043e\u043c\u044c\u0442\u0435\u0441\u044c \u0441 Jora. \u042d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043b\u0430\u043a\u043e\u043d\u0438\u0447\u043d\u044b\u0439 \u044f\u0437\u044b\u043a, \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0439 \u043d\u0435 \u0442\u0430\u043a \u043c\u043d\u043e\u0433\u043e. \u0418 \u0443 \u0432\u0430\u0441 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u043e\u0442\u0447\u0435\u0442\u044b, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u0440\u0430\u0432\u0438\u043b\u0430.<\/p>\n<p>  <\/li>\n<li>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 Discovery.js. <\/p>\n<p>  <\/li>\n<li>\n<p>\u041d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u0441\u0432\u043e\u0439 \u043e\u0442\u0447\u0451\u0442.<\/p>\n<p>  <\/li>\n<li>\n<p>\u041d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u0441\u0432\u043e\u0451 \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438.<\/p>\n<p>  <\/li>\n<li>\n<p>\u041d\u0430\u043f\u0438\u0448\u0438\u0442\u0435 \u0441\u0432\u043e\u0451 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435.<\/p>\n<p>  <\/li>\n<li>\n<p>\u041f\u0440\u0438\u043d\u043e\u0441\u0438\u0442\u0435 \u0441\u0432\u043e\u0438 PR\/Issue.<\/p>\n<p>  <\/li>\n<li>\n<p>\u041f\u043e\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0437\u0432\u0435\u0437\u0434\u043e\u0447\u043a\u0443 <a href=\"https:\/\/github.com\/statoscope\/statoscope\">\u043d\u0430 GitHub<\/a>. \u041c\u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u044f\u0442\u043d\u043e \ud83d\ude42<\/p>\n<p>  <\/li>\n<li>\n<p>\u0410 \u0435\u0441\u043b\u0438 \u0434\u043e\u043a\u043b\u0430\u0434\u0430 \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e, \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0435\u0449\u0451 \u0438 \u0432\u0438\u0434\u0435\u043e\u0437\u0430\u043f\u0438\u0441\u044c <a href=\"https:\/\/youtu.be\/-OUb1RmLhK0\">\u0432\u043e\u0440\u043a\u0448\u043e\u043f\u0430<\/a>.<\/p>\n<p>  <\/li>\n<\/ul>\n<p>  <\/p>\n<blockquote><p>\u042d\u0442\u043e \u0440\u0430\u0441\u0448\u0438\u0444\u0440\u043e\u0432\u043a\u0430 \u0434\u043e\u043a\u043b\u0430\u0434\u0430 \u0441 \u043f\u0440\u043e\u0448\u0435\u0434\u0448\u0435\u0439 \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0438 <strong>HolyJS<\/strong>. \u0415\u0441\u043b\u0438 \u043e\u043d \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0435\u043d \u0432\u0430\u043c, \u0442\u043e \u0432\u0430\u0441 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u0442\u044c \u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f HolyJS, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0441\u0442\u043e\u0438\u0442\u0441\u044f <strong>18-21 \u0430\u043f\u0440\u0435\u043b\u044f 2022<\/strong>. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u043e\u0441\u0442\u0438 \u043e \u043d\u0435\u0439 \u2014 <a href=\"https:\/\/holyjs.ru\/?utm_source=habr&amp;utm_medium=595595\">\u043d\u0430 \u0441\u0430\u0439\u0442\u0435<\/a>.<\/p><\/blockquote>\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\/595595\/\"> https:\/\/habr.com\/ru\/articles\/595595\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><img loading=\"lazy\" decoding=\"async\" height=\"1\" src=\"https:\/\/www.facebook.com\/tr?id=2610199939046212&amp;ev=PageView&amp;noscript=1\" style=\"display:none;\" width=\"1\"><img loading=\"lazy\" decoding=\"async\" height=\"1\" src=\"https:\/\/vk.com\/rtrg?p=VK-RTRG-400285-cLVDA\" style=\"display:none;\" width=\"1\"><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>Statoscope \u2014 \u044d\u0442\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0430\u043d\u0430\u043b\u0438\u0437\u0430 webpack-\u0431\u0430\u043d\u0434\u043b\u043e\u0432, \u0430 \u044f \u0435\u0433\u043e \u0430\u0432\u0442\u043e\u0440 \u0438 \u043c\u0435\u0439\u043d\u0442\u0435\u0439\u043d\u0435\u0440. \u041e\u043d \u0437\u0430\u0440\u043e\u0434\u0438\u043b\u0441\u044f \u0432 \u0434\u0430\u043b\u0435\u043a\u043e\u043c 2016 \u0433\u043e\u0434\u0443 \u043a\u0430\u043a \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442, \u0430 \u0442\u0435\u043f\u0435\u0440\u044c \u044d\u0442\u043e \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u0442\u0443\u043b\u043a\u0438\u0442 \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430, \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u0438 \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0441\u0431\u043e\u0440\u043a\u0438. <\/p>\n<p>  <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/webt\/wz\/xt\/pi\/wzxtpik-7jt0lplpsfsk4sggyok.jpeg\" data-src=\"https:\/\/habrastorage.org\/webt\/wz\/xt\/pi\/wzxtpik-7jt0lplpsfsk4sggyok.jpeg\" data-blurred=\"true\"\/><\/p>\n<p>  <\/p>\n<p>\u0412 \u043d\u043e\u044f\u0431\u0440\u0435 \u043d\u0430 \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0438 <strong><a href=\"https:\/\/holyjs.ru\/?utm_source=habr&amp;utm_medium=595595\">HolyJS<\/a><\/strong> \u044f \u0432\u044b\u0441\u0442\u0443\u043f\u0438\u043b \u0441 \u0434\u043e\u043a\u043b\u0430\u0434\u043e\u043c \u043e Statoscope \u0438 \u043f\u0440\u043e\u0432\u0451\u043b \u0432\u043e\u0440\u043a\u0448\u043e\u043f \u043f\u043e \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e. \u0417\u0440\u0438\u0442\u0435\u043b\u044f\u043c \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u043e\u0441\u044c, \u0442\u0430\u043a \u0447\u0442\u043e \u043c\u044b \u0441 \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0442\u043e\u0440\u0430\u043c\u0438 HolyJS \u0440\u0435\u0448\u0438\u043b\u0438, \u0447\u0442\u043e \u0434\u043e\u043a\u043b\u0430\u0434 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0433\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0438 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044f\u043c \u0425\u0430\u0431\u0440\u0430 \u2014\u00a0\u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u0434\u0435\u043b\u0430\u043b\u0438 \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e. \u0412\u0438\u0434\u0435\u043e\u0437\u0430\u043f\u0438\u0441\u044c \u0442\u043e\u0436\u0435 \u043f\u0440\u0438\u043b\u0430\u0433\u0430\u0435\u043c. <\/p>\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-389200","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/389200","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=389200"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/389200\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=389200"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=389200"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=389200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}