{"id":410158,"date":"2024-06-29T21:12:35","date_gmt":"2024-06-29T21:12:35","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=410158"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=410158","title":{"rendered":"<span>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 Webpack \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043d\u0430 CRA<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442! \u041e\u0434\u0438\u043d \u0438\u0437 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0435 \u0443 \u043d\u0430\u0441 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u043d \u043d\u0430  create-react-app \u0443\u0442\u0438\u043b\u0438\u0442\u0435 (\u043a\u0441\u0442\u0430\u0442\u0438 \u0443 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c <a href=\"https:\/\/habr.com\/ru\/articles\/723870\/\" rel=\"noopener noreferrer nofollow\">\u0441\u0442\u0430\u0442\u044c\u044f <\/a>\u043f\u043e \u043f\u043e\u0432\u043e\u0434\u0443 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441 CRA \u0438 \u0447\u0442\u043e \u0435\u0433\u043e \u0436\u0434\u0435\u0442 \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c). \u0412\u0441\u0442\u0430\u043b \u0432\u043e\u043f\u0440\u043e\u0441 \u043f\u043e \u043f\u043e\u0432\u043e\u0434\u0443 \u0442\u043e\u0433\u043e, \u043c\u043e\u0436\u043d\u043e \u043b\u0438 \u043a\u0430\u043a-\u0442\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0443 \u043f\u043e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0438 \u0432\u0435\u0441\u0443 \u0441\u0436\u0430\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0442\u0430\u043a \u043a\u0430\u043a \u0435\u0441\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043f\u043b\u0430\u043d\u044b \u043d\u0430 \u0440\u043e\u0441\u0442 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b, \u0447\u0442\u043e\u0431\u044b \u0447\u0442\u043e-\u0442\u043e \u043d\u0430\u0447\u0430\u043b\u043e \u0442\u043e\u0440\u043c\u043e\u0437\u0438\u0442\u044c, \u0438 \u044d\u0442\u0438\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u044f \u0438 \u0437\u0430\u043d\u044f\u043b\u0441\u044f. \u0425\u043e\u0447\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0432\u0441\u0435 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043b\u043e, \u043a\u0430\u043a\u0438\u0435 \u0448\u0430\u0433\u0438 \u0431\u044b\u043b\u0438 \u043f\u0440\u043e\u0439\u0434\u0435\u043d\u044b \u0438 \u0447\u0442\u043e \u0432 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c. \u0422\u0430\u043a\u0436\u0435 \u0432 \u043a\u043e\u043d\u0446\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0443 \u043a\u043e\u0434 \u0432\u0441\u0435\u0439 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438.<\/p>\n<p>\u0421\u0440\u0430\u0437\u0443 \u0445\u043e\u0442\u0435\u043b \u0431\u044b \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e \u0432\u0435\u0431\u043f\u0430\u043a\u0443 \u0441 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0439 \u0435\u0433\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u043e\u0439 \u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043d\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u043e\u0432\u043e\u0433\u043e, \u0442\u0430\u043a \u043a\u0430\u043a \u0442\u0443\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a. \u041f\u0440\u043e\u0448\u0443 \u043d\u0435 \u043a\u0438\u0434\u0430\u0442\u044c \u043a\u0430\u043c\u043d\u0438, \u0442\u0430\u043a \u043a\u0430\u043a \u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u043e\u043f\u044b\u0442\u043e\u043c, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0434\u0430\u0436\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0441\u043e\u0432\u0435\u0442\u044b \u043f\u043e \u043b\u0443\u0447\u0448\u0435\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u0438, \u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u043a\u043e\u043c\u0443-\u0442\u043e \u044d\u0442\u043e \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u043f\u043e\u043c\u043e\u0436\u0435\u0442.<\/p>\n<h2>\u041f\u043e\u0440\u0430 \u044d\u0434\u0436\u0435\u043a\u0442\u0438\u0442\u044c<\/h2>\n<p>\u041f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c, \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435, \u0431\u044b\u043b \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d eject \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u041f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u043a\u0443\u0447\u0443 \u043f\u0430\u043f\u043e\u0447\u0435\u043a \u0438 \u0444\u0430\u0439\u043b\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043b\u0435\u0436\u0430\u043b\u0438 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c CRA.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0438 \u0438 \u0441\u0436\u0430\u0442\u044b\u0439 \u0432\u0435\u0441 \u044f \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u043b Statoscope \u0432 \u043f\u0440\u043e\u0435\u043a\u0442. \u0421\u0442\u0430\u0432\u0438\u0442\u0441\u044f \u043e\u043d \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e. \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043b\u0430\u0433\u0438\u043d \u0432 \u043f\u0440\u043e\u0435\u043a\u0442, \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 \u0444\u0430\u0439\u043b \u0432\u0435\u0431\u043f\u0430\u043a\u0430 \u0438 \u0432\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u0432 \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432. \u0415\u0433\u043e \u0432\u0441\u044f\u0447\u0435\u0441\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c, \u043d\u043e \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u043d\u0435 \u043d\u0435 \u0431\u044b\u043b\u043e \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e.<\/p>\n<pre><code class=\"javascript\">npm i --save-dev @statoscope\/webpack-plugin ... const StatoscopeWebpackPlugin = require('@statoscope\/webpack-plugin').default;  module.exports = {   ...   plugins: [     ...     new StatoscopeWebpackPlugin()   ],   ... }<\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u0431\u0438\u043b\u0434\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0443 \u043d\u0430\u0441 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441\u043e \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0412\u043e\u0442 \u043a\u0430\u043a\u0430\u044f \u0441\u0442\u0430\u0442\u0430 \u0431\u044b\u043b\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0430 \u043f\u043e\u0441\u043b\u0435 eject \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/553\/3a8\/f86\/5533a8f8676362873e4c3dff964b1146.png\" alt=\"\u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u0431\u0435\u0437 \u0434\u043e\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\" title=\"\u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u0431\u0435\u0437 \u0434\u043e\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\" width=\"1280\" height=\"420\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/553\/3a8\/f86\/5533a8f8676362873e4c3dff964b1146.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u0431\u0435\u0437 \u0434\u043e\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u0412\u0435\u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 \u0441\u0436\u0430\u0442\u043e\u043c \u0432\u0438\u0434\u0435 371,35\u043a\u0431, \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0438 36,4 \u0441\u0435\u043a\u0443\u043d\u0434\u044b, 1 \u0447\u0430\u043d\u043a.<\/p>\n<h2>\u0423\u0434\u0430\u043b\u044f\u0435\u043c \u043b\u0438\u0448\u043d\u0435\u0435<\/h2>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0434\u0436\u0435\u043a\u0442\u0430 \u044f \u043d\u0430\u0447\u0430\u043b \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0438 \u043f\u0430\u043a\u0435\u0442\u044b.<\/p>\n<p>\u0412\u043e\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u044f \u043f\u043e\u0447\u0438\u0441\u0442\u0438\u043b:<\/p>\n<p>1) \u041f\u0430\u043a\u0435\u0442 camelcase (\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f \u0432 jest \u0444\u0430\u0439\u043b\u0435)<br \/>2) Case sensitive paths webpack plugin, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043b\u0435\u0434\u0438\u0442 \u0437\u0430 \u0447\u0443\u0432\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430 \u0432 \u0438\u043c\u043f\u043e\u0440\u0442\u0430\u0445<br \/>3) \u041f\u0430\u043a\u0435\u0442 prompts <br \/>4) Identity obj proxy (\u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f css \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u0442\u0430\u043a \u043a\u0430\u043a \u043d\u0430\u0434\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0438\u043c\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043a\u0430\u043a \u043a\u043b\u0430\u0441\u0441, \u0430 \u0443 \u043d\u0430\u0441 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 Styled-components)<br \/>5) Sass-loader <br \/>6) Tailwind<br \/>7) Semver (\u0434\u043b\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u0432\u0435\u0440\u0441\u0438\u0438 \u0440\u0435\u0430\u043a\u0442, \u043d\u0443\u0436\u0435\u043d \u0431\u044b\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0432\u044b\u0448\u0435 \u043b\u0438 16 \u0432\u0435\u0440\u0441\u0438\u0438, \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u044f \u043f\u043e\u0434\u043d\u0438\u043c\u0430\u043b \u0432\u0435\u0440\u0441\u0438\u044e \u0434\u043e 18 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0443\u0436\u0435 \u0442\u043e\u0447\u043d\u043e \u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f) <br \/>8) Sevents, \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u0434\u043b\u044f \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 \u043d\u0430 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u0432 MacOS<br \/>9) \u0423\u0434\u0430\u043b\u0438\u043b \u043a\u0443\u0447\u0443 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 react-dev-utils, \u043d\u043e \u043f\u0430\u043a\u0435\u0442 \u043e\u0441\u0442\u0430\u0432\u0438\u043b, \u0442\u0430\u043a \u043a\u0430\u043a \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0435\u0449\u0438, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 cmd \u043d\u0430\u0434\u043f\u0438\u0441\u0435\u0439 \u0440\u0430\u0437\u043d\u044b\u0445 \u0446\u0432\u0435\u0442\u043e\u0432 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 (\u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u0445\u043e\u0442 \u0440\u0435\u043b\u043e\u0430\u0434\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u044b \u0432 create react app \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438)  <\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0430 \u043c\u043d\u0435 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435 \u0441\u0436\u0430\u0442\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438 \u043d\u0430 0,02\u043a\u0431, \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0438 \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0430\u0441\u044c.<\/p>\n<p>\u0422\u043e\u0433\u0434\u0430 \u044f \u043f\u043e\u043b\u0435\u0437 \u0432 \u0444\u0430\u0439\u043b\u044b \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 webpack, \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0431\u0438\u043b\u0434\u0430 \u0438 \u0442.\u043f. \u0438 \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u0431\u0435\u0437 \u0431\u0443\u0442\u044b\u043b\u043a\u0438 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0432 \u044d\u0442\u0438\u0445 \u0444\u0430\u0439\u043b\u0430\u0445 \u0431\u044b\u0441\u0442\u0440\u043e \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0438 \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u0434\u0430\u0436\u0435 \u043d\u0435\u0442 \u0441\u043c\u044b\u0441\u043b\u0430.<\/p>\n<p>\u0418 \u044f \u043f\u0440\u0438\u043d\u044f\u043b \u0432\u043e\u043b\u0435\u0432\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u043d\u0435\u0441\u0442\u0438 \u044d\u0442\u0443 \u0441\u0431\u043e\u0440\u043a\u0443 \u0438 \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u044e..<\/p>\n<h2>\u041d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0441\u043d\u0430\u0447\u0430\u043b\u0430<\/h2>\n<p>\u041d\u0430 \u043c\u043e\u0435\u043c \u0433\u0438\u0442\u0445\u0430\u0431\u0435 \u0433\u0434\u0435-\u0442\u043e \u0433\u043e\u0434 \u043d\u0430\u0437\u0430\u0434 \u044f \u0441\u043e\u0437\u0434\u0430\u043b \u043f\u0440\u043e\u0435\u043a\u0442 \u0441\u043e \u0441\u0431\u043e\u0440\u043a\u043e\u0439 \u0432\u0435\u0431\u043f\u0430\u043a\u0430, \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u043b\u0438\u043d\u0442\u0430 \u0438 \u0442.\u043f. \u0421\u0431\u043e\u0440\u043a\u0430 \u0432\u0435\u0431\u043f\u0430\u043a\u0430 \u0442\u0430\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f, \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u043e\u0439 \u0434\u043b\u044f sass, css-modules \u0438 \u0442.\u043f., \u043d\u043e \u0431\u0435\u0437 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043e\u0434 React Router \u0438 \u0441\u0438\u043b\u044c\u043d\u043e\u0439 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438. \u0415\u0435 \u044f \u0432\u0437\u044f\u043b \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u043d\u043e\u0432\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438. \u0415\u0441\u043b\u0438 \u043a\u043e\u043c\u0443-\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430 \u044d\u0442\u0430 \u0441\u0431\u043e\u0440\u043a\u0430, \u0442\u043e \u043f\u043e <a href=\"https:\/\/github.com\/idmx\/start-project-settings\" rel=\"noopener noreferrer nofollow\">\u0441\u0441\u044b\u043b\u043a\u0435 <\/a>\u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c.<\/p>\n<p>\u0421\u0440\u0430\u0437\u0443 \u0441\u0442\u0430\u0432\u043b\u044e \u0441\u0442\u0430\u0442\u043e\u0441\u043a\u043e\u043f, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e \u0441\u0442\u0430\u0442\u0443, \u043d\u0435 \u0440\u0430\u0434\u0443\u044e\u0441\u044c)<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/a77\/026\/59b\/a7702659be4a9515cb0e786c132a967e.png\" alt=\"\u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u043d\u043e\u0432\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438\" title=\"\u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u043d\u043e\u0432\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438\" width=\"1280\" height=\"363\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/a77\/026\/59b\/a7702659be4a9515cb0e786c132a967e.png\"\/><\/p>\n<div><figcaption>\u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u043d\u043e\u0432\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438<\/figcaption><\/div>\n<\/figure>\n<p>\u042f \u043d\u0430\u0447\u0430\u043b \u043d\u0430\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0434\u043b\u044f \u0441\u0436\u0430\u0442\u0438\u044f \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0431\u043e\u0440\u043a\u0438.<\/p>\n<p>\u0412\u043e\u0442, \u0447\u0442\u043e \u044f \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u043b \u043f\u043e\u043c\u0438\u043c\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0443 \u043c\u0435\u043d\u044f \u0443\u0436\u0435 \u0441\u0442\u043e\u044f\u043b\u043e:<\/p>\n<p>1) Terser Plugin. \u042d\u0442\u043e\u0442 \u043f\u043b\u0430\u0433\u0438\u043d \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u0442 \u0438 \u0441\u0436\u0438\u043c\u0430\u0435\u0442 \u043a\u043e\u0434, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0445\u043e\u0440\u043e\u0448\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0441\u0431\u043e\u0440\u043a\u0438. (\u042f \u0434\u0430\u0436\u0435 \u0441\u0440\u0430\u0437\u0443 \u0437\u0430\u043c\u0435\u0440\u0438\u043b \u0441\u0442\u0430\u0442\u0443 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u0435\u043d\u044f \u043f\u043e\u0440\u0430\u0434\u043e\u0432\u0430\u043b)<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0430\u0442\u0430 \u0441 \u0442\u0435\u0440\u0441\u0435\u0440\u043e\u043c<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b01\/368\/ffc\/b01368ffc8afb8b5a074c0a498e20cd7.png\" width=\"1280\" height=\"256\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b01\/368\/ffc\/b01368ffc8afb8b5a074c0a498e20cd7.png\"\/><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<p>2) Css Minimizer Webpack Plugin \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 CSS \u0432 \u0441\u0431\u043e\u0440\u043a\u0435.<br \/>\u041f\u0435\u0440\u0432\u044b\u0435 \u0434\u0432\u0430 \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0441\u0442\u0430\u0432\u044f\u0442\u0441\u044f \u0432 \u0440\u0430\u0437\u0434\u0435\u043b minimizer \u0432\u0435\u0431\u043f\u0430\u043a\u0430<\/p>\n<pre><code class=\"json\">module.exports = {   ...   optimization: {     minimize: true,     minimizer: [       new TerserPlugin(),       new CssMinimizerWebpackPlugin()     ],     ...   }   ... }<\/code><\/pre>\n<p>3) React Refresh Webpack Plugin. \u041e\u043d \u043d\u0443\u0436\u0435\u043d \u0431\u043e\u043b\u044c\u0448\u0435 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 hot-reload \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u043b\u0430\u0441\u044c, \u0435\u0441\u043b\u0438 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0430\u044f. \u041f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0441\u0442\u0435\u0439\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<br \/>4) Hashed Module Ids Plugin. \u041e\u043d \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0445\u044d\u0448\u0438 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0432 \u0441\u0431\u043e\u0440\u043a\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0438\u0445 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0443\u0442\u0435\u0439. \u0411\u043e\u043b\u044c\u0448\u0435 \u043d\u0443\u0436\u0435\u043d \u0442\u0430\u043a\u0436\u0435 \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u044f:<\/p>\n<ul>\n<li>\n<p>\u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0441\u0431\u043e\u0440\u043a\u0443 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 Styled-Components;<\/p>\n<\/li>\n<li>\n<p>\u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0432 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 svg \u043b\u043e\u0430\u0434\u0435\u0440 <code>@svgr\/webpack <\/code>, \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0442\u044c svg;<\/p>\n<\/li>\n<li>\n<p>\u043f\u043e\u0441\u0442\u0430\u0432\u0438\u043b \u043d\u0443\u0436\u043d\u044b\u0435 \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 alias;<\/p>\n<\/li>\n<li>\n<p>\u0434\u043e\u0431\u0430\u0432\u0438\u043b <code>historyApiFallback: true<\/code>, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u043b React Router, \u0438\u043d\u0430\u0447\u0435 \u043f\u0443\u0442\u0438 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442\u0441\u044f \u043a\u0430\u043a \u0433\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440;<\/p>\n<\/li>\n<li>\n<p>\u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043b <code>client: { overlay: false }<\/code> , \u0447\u0442\u043e\u0431\u044b \u043e\u0448\u0438\u0431\u043a\u0438 \u043b\u0438\u043d\u0442\u0435\u0440\u043e\u0432 \u043d\u0435 \u043b\u0435\u0437\u043b\u0438 \u043f\u043e\u0432\u0435\u0440\u0445 \u044d\u043a\u0440\u0430\u043d\u0430, \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0431\u0435\u0441\u0438\u0442;<\/p>\n<\/li>\n<li>\n<p>\u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u043b tscoinfig.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0443:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e1f\/55b\/f93\/e1f55bf93f29ced7fc2f5a44e50f22ad.png\" width=\"1280\" height=\"215\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e1f\/55b\/f93\/e1f55bf93f29ced7fc2f5a44e50f22ad.png\"\/><\/figure>\n<p>312,01 \u043a\u0431 \u0432\u0435\u0441 \u0441\u0436\u0430\u0442\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438, 28,1 \u0441\u0435\u043a\u0443\u043d\u0434 \u0441\u0431\u043e\u0440\u043a\u0430 \u0438 \u0442\u0430\u043a\u0436\u0435 2 \u0447\u0430\u043d\u043a\u0430.<\/p>\n<p>\u0423\u0447\u0438\u0442\u044b\u0432\u0430\u044f, \u0447\u0442\u043e \u0441\u0430\u043c \u043f\u043e \u0441\u0435\u0431\u0435 \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439, \u0432 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430 \u0443\u0441\u043f\u0435\u0448\u043d\u043e. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435, \u0447\u0442\u043e \u044f \u0440\u0435\u0448\u0438\u043b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c &#8212; \u044d\u0442\u043e \u0440\u0430\u0437\u0431\u0438\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u043f\u0430\u043a\u0435\u0442\u043e\u0432 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0447\u0430\u043d\u043a\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0431\u043b\u043e\u043a optimization:<\/p>\n<pre><code class=\"javascript\">optimization: {     minimize: true,     minimizer: [       new TerserPlugin(),       new CssMinimizerWebpackPlugin()     ],     runtimeChunk: 'single',     splitChunks: {       chunks: 'all',       maxInitialRequests: Infinity,       minSize: 0,       cacheGroups: {         vendor: {           test: \/[\\\\\/]node_modules[\\\\\/]\/,           name(module) {             const packageName = module.context.match(\/[\\\\\/]node_modules[\\\\\/](.*?)([\\\\\/]|$)\/) ?? 'package';             return `npm.${packageName[1].replace('@', '')}`;           }         }       }     },   },<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/e8f\/842\/90d\/e8f84290ddb628de5c4a53dabff7c6ab.png\" width=\"1280\" height=\"199\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e8f\/842\/90d\/e8f84290ddb628de5c4a53dabff7c6ab.png\"\/><\/figure>\n<p>\u0412\u0435\u0441 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u043b\u0441\u044f \u0434\u043e 334,46 \u043a\u0431, \u0441\u0431\u043e\u0440\u043a\u0430 \u0441\u0442\u0430\u043b\u0430 \u0447\u0443\u0442\u044c \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0438 \u0432\u0441\u0435 \u043f\u0430\u043a\u0435\u0442\u044b \u043b\u0435\u0436\u0430\u0442 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0447\u0430\u043d\u043a\u0430\u0445.<\/p>\n<h2>\u0427\u0442\u043e \u0432 \u0438\u0442\u043e\u0433\u0435?<\/h2>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u043c\u043e\u0433\u0443 \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u0441\u0431\u043e\u0440\u043a\u0430 CRA \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u043c\u0435\u0435\u0442 \u043b\u0438\u0448\u043d\u0438\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u0439 \u043a\u043e\u0434 \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0432\u0435\u0431\u043f\u0430\u043a\u0430, \u043d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432\u0440\u043e\u0434\u0435 \u043a\u0430\u043a \u0438 \u043d\u0435 \u0442\u0430\u043a \u043f\u043b\u043e\u0445\u0430. <\/p>\n<p>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c, \u0445\u043e\u0442\u044c \u0438 \u043d\u0435 \u0441\u0443\u043f\u0435\u0440 \u043f\u0443\u043f\u0435\u0440 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0438\u0432\u043d\u0430\u044f, \u043d\u043e \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u043e\u043d\u0430 \u0435\u0441\u0442\u044c, \u043f\u0440\u043e\u0435\u043a\u0442 \u0441\u0442\u0430\u043b \u043c\u0435\u043d\u044c\u0448\u0435 \u0432\u0435\u0441\u0438\u0442\u044c \u0432 \u0441\u0436\u0430\u0442\u043e\u043c \u0432\u0438\u0434\u0435 (\u0445\u043e\u0442\u0435\u043b \u0431\u044b \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0432\u0435\u0441 \u0432 \u043d\u0435 \u0441\u0436\u0430\u0442\u043e\u043c \u0432\u0438\u0434\u0435 \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u0432\u044b\u0448\u0435, \u0447\u0435\u043c \u0432 CRA) \u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u0435 \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043a\u0443\u0447\u0443 \u0447\u0430\u043d\u043a\u043e\u0432. \u0421\u0435\u0439\u0447\u0430\u0441 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043d\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u0435, \u043d\u043e \u0434\u0443\u043c\u0430\u044e, \u0447\u0442\u043e \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0435\u043a\u0442 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0441\u0442\u0430\u0442\u044c\u0441\u044f, \u0434\u0430\u043d\u043d\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0435\u043a\u0442\u0443.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 webpack.config.js \u0438 tsconfig.json, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438.<\/p>\n<details class=\"spoiler\">\n<summary>webpack.config.js<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const ESLintPlugin = require('eslint-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const StatoscopeWebpackPlugin = require('@statoscope\/webpack-plugin').default; const ReactRefreshWebpackPlugin = require('@pmmmwh\/react-refresh-webpack-plugin'); const path = require('path'); const TerserPlugin = require('terser-webpack-plugin'); const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin'); const webpack = require('webpack') const Dotenv = require('dotenv-webpack'); require('dotenv').config({path: path.resolve(__dirname, '.env')})  const mode = process.env.NODE_ENV || \"development\"; const port = process.env.PORT || 3000; const devMode = mode === \"development\"; const target = devMode ? 'web' : 'browserslist'; const devtool = devMode &amp;&amp; 'source-map';  module.exports = {   mode,   target,   devtool,   devServer: {     port,     open: true,     hot: true,     historyApiFallback: true,     client: {       overlay: false     },     headers: {       'Access-Control-Allow-Origin': '*',       'Access-Control-Allow-Methods': '*',       'Access-Control-Allow-Headers': '*',     },     onBeforeSetupMiddleware(devServer) {       devMode &amp;&amp; require(path.resolve(__dirname, 'src\/setupProxy.js'))(devServer.app);     },   },   entry: path.resolve(__dirname, 'src', 'index.tsx'),   output: {     path: path.resolve(__dirname, 'build'),     filename: 'js\/[name].[contenthash].bundle.js',     chunkFilename: 'js\/[id].[contenthash].js',     assetModuleFilename: 'assets\/[hash][ext]',     publicPath: '\/'   },   optimization: {     minimize: true,     minimizer: [       new TerserPlugin(),       new CssMinimizerWebpackPlugin()     ],     runtimeChunk: 'single',     splitChunks: {       chunks: 'all',       maxInitialRequests: Infinity,       minSize: 0,       cacheGroups: {         vendor: {           test: \/[\\\\\/]node_modules[\\\\\/]\/,           name(module) {             const packageName = module.context.match(\/[\\\\\/]node_modules[\\\\\/](.*?)([\\\\\/]|$)\/) ?? 'package';             return `npm.${packageName[1].replace('@', '')}`;           }         }       }     },   },   resolve: {     extensions: ['.json', '.jsx', '.tsx', '.ts', '.js', '.mjs'],     alias: {       '~components': path.resolve(__dirname, 'src\/components'),       '~hooks': path.resolve(__dirname, 'src\/hooks'),       '~types': path.resolve(__dirname, 'src\/types'),       '~pages': path.resolve(__dirname, 'src\/pages'),       '~utils': path.resolve(__dirname, 'src\/utils'),       '~constants': path.resolve(__dirname, 'src\/constants'),       '~helpers': path.resolve(__dirname, 'src\/utils\/helpers'),       '~layouts': path.resolve(__dirname, 'src\/layouts'),       '~api': path.resolve(__dirname, 'src\/api'),     },   },   plugins: [     new Dotenv({ path: path.resolve(__dirname, '.env'), systemvars: true }),     new HtmlWebpackPlugin({       template: path.resolve(__dirname, 'public', 'index.html'),     }),     new MiniCssExtractPlugin({       filename: 'css\/[name].[contenthash].bundle.css',     }),     new CleanWebpackPlugin(),     new ESLintPlugin({       extensions: ['ts', 'tsx'],       exclude: ['\/node_modules\/', '\/.idea\/', '\/.vscode\/'],     }),     new ReactRefreshWebpackPlugin({       overlay: false,     }),     new webpack.ids.HashedModuleIdsPlugin(),     new StatoscopeWebpackPlugin()   ],   module: {     rules: [       {         test: \/\\.(c|sa|sc)ss$\/i,         use: [           devMode ? 'style-loader' : MiniCssExtractPlugin.loader,           {             loader: 'css-loader',             options: {               esModule: true,               importLoaders: 1,               modules: {                 mode: 'icss'               },             },           },           {             loader: 'postcss-loader',             options: {               postcssOptions: {                 plugins: [require('postcss-preset-env')],               },             },           },         ],       },       {         test: \/\\.woff2?$\/i,         type: 'asset\/resource',         generator: {           filename: 'fonts\/[name].[ext]',         },       },       {         test: [\/\\.bmp$\/, \/\\.gif$\/, \/\\.jpe?g$\/, \/\\.png$\/],         type: 'asset',         parser: {           dataUrlCondition: {             maxSize: 10000,           },         },       },       {         test: \/\\.svg$\/,         use: [           {             loader: require.resolve('@svgr\/webpack'),             options: {               prettier: false,               svgo: false,               svgoConfig: {                 plugins: [{ removeViewBox: false }],               },               titleProp: true,               ref: true,             },           },           {             loader: require.resolve('file-loader'),             options: {               name: 'static\/media\/[name].[hash].[ext]',             },           },         ],         issuer: {           and: [\/\\.(ts|tsx|js|jsx|md|mdx)$\/],         },       },       {         test: \/\\.tsx?$\/,         use: {           loader: 'ts-loader',           options: {             transpileOnly: true           }         },         exclude: \/node_modules\/,       },       {         test: \/\\.m?jsx?$\/i,         exclude: \/(node_modules|bower_components)\/,         use: {           loader: 'babel-loader',           options: {             presets: ['@babel\/preset-env', '@babel\/preset-react'],           },         },       },     ],   }, }; <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<details class=\"spoiler\">\n<summary>tsconfig.json<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"json\">{   \"compilerOptions\": {     \"target\": \"esnext\",     \"lib\": [       \"dom\",       \"dom.iterable\",       \"es2016\"     ],     \"allowJs\": true,     \"skipLibCheck\": true,     \"esModuleInterop\": true,     \"allowSyntheticDefaultImports\": true,     \"strict\": true,     \"forceConsistentCasingInFileNames\": true,     \"noFallthroughCasesInSwitch\": true,     \"module\": \"esnext\",     \"moduleResolution\": \"node\",     \"resolveJsonModule\": true,     \"isolatedModules\": true,     \"jsx\": \"react-jsx\",     \"downlevelIteration\": true,     \"emitDeclarationOnly\": false   },   \"include\": [     \"src\"   ],   \"exclude\": [\"node_modules\", \"build\"],   \"extends\": \".\/tsconfig.paths.json\" \/\/\u041b\u0435\u0436\u0430\u0442 \u043f\u0443\u0442\u0438 \u0434\u043b\u044f alias } <\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u043a\u043e\u043c\u0443-\u0442\u043e \u044d\u0442\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043e\u043c\u043e\u0433\u0443\u0442, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b.<\/p>\n<p>\u0411\u0443\u0434\u0443 \u0440\u0430\u0434 \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u044e \u0441\u0431\u043e\u0440\u043a\u0438 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u0441\u043e\u0432\u0435\u0442\u044b \u043f\u043e \u043f\u043e\u0432\u043e\u0434\u0443 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0443\u0431\u0440\u0430\u0442\u044c \u0438\u043b\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u0441\u0431\u043e\u0440\u043a\u0430 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u043b\u0443\u0447\u0448\u0435.<\/p>\n<p>\u0412\u0441\u0435\u043c \u0434\u043e\u0431\u0440\u0430)<\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u044b.\u0421\u044b. \u0422\u0435\u043b\u0435\u0433\u0430<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0423 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439 <a href=\"https:\/\/t.me\/everydayfrontend\" rel=\"noopener noreferrer nofollow\">telegram-\u043a\u0430\u043d\u0430\u043b<\/a>, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u044f \u0432\u044b\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u0442\u0430\u0442\u0435\u0439\u043a\u0438, \u043f\u043e\u0441\u0442\u044b \u0438 \u043f\u0440\u043e\u0432\u043e\u0436\u0443 \u043c\u0438\u043d\u0438 \u043a\u0432\u0438\u0437\u044b \u043f\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e. \u041f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u044f\u0439\u0442\u0435\u0441\u044c)<\/p>\n<\/div>\n<\/details>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><\/p>\n<div class=\"tm-article-poll-container\"><!--[--><\/p>\n<div class=\"tm-article-poll tm-article-poll_variant-bordered\">\n<div class=\"tm-notice tm-notice_positive tm-article-poll__notice\"><!----><\/p>\n<div class=\"tm-notice__inner\"><!----><\/p>\n<div class=\"tm-notice__content\" data-test-id=\"notice-content\"><!--[--><span>\u0422\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u0443\u0447\u0430\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432 \u043e\u043f\u0440\u043e\u0441\u0435. <a rel=\"nofollow\" href=\"\/kek\/v1\/auth\/habrahabr\/?back=\/ru\/articles\/729714\/&#038;hl=ru\">\u0412\u043e\u0439\u0434\u0438\u0442\u0435<\/a>, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430.<\/span><!--]--><\/div>\n<\/div>\n<\/div>\n<p><!--[--><\/p>\n<div class=\"tm-article-poll__header\">\u041a\u0430\u043a \u0432\u0430\u043c \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u0430\u044f \u0441\u0431\u043e\u0440\u043a\u0430?<\/div>\n<div class=\"tm-article-poll__answers\"><!--[--><\/p>\n<div class=\"tm-article-poll__answer\">\n<div class=\"tm-article-poll__answer-data\"><span class=\"tm-article-poll__answer-percent\">33.33% <\/span><span class=\"tm-article-poll__answer-label\">\u0425\u043e\u0440\u043e\u0448\u0430\u044f, \u043c\u043e\u0436\u043d\u043e \u0431\u0440\u0430\u0442\u044c<\/span><span class=\"tm-article-poll__answer-votes\">5<\/span><\/div>\n<div class=\"tm-article-poll__answer-bar\">\n<div class=\"tm-article-poll__answer-progress\" style=\"width: 33.33%\"><\/div>\n<\/div>\n<\/div>\n<div class=\"tm-article-poll__answer\">\n<div class=\"tm-article-poll__answer-data\"><span class=\"tm-article-poll__answer-percent\">33.33% <\/span><span class=\"tm-article-poll__answer-label\">\u041d\u043e\u0440\u043c, \u043d\u043e \u043c\u043e\u0436\u043d\u043e \u043b\u0443\u0447\u0448\u0435<\/span><span class=\"tm-article-poll__answer-votes\">5<\/span><\/div>\n<div class=\"tm-article-poll__answer-bar\">\n<div class=\"tm-article-poll__answer-progress\" style=\"width: 33.33%\"><\/div>\n<\/div>\n<\/div>\n<div class=\"tm-article-poll__answer\">\n<div class=\"tm-article-poll__answer-data\"><span class=\"tm-article-poll__answer-percent tm-article-poll__answer-percent_winning\">33.33% <\/span><span class=\"tm-article-poll__answer-label\">\u0422\u0430\u043a \u0441\u0435\u0431\u0435<\/span><span class=\"tm-article-poll__answer-votes\">5<\/span><\/div>\n<div class=\"tm-article-poll__answer-bar\">\n<div class=\"tm-article-poll__answer-progress tm-article-poll__answer-progress_winning\" style=\"width: 33.33%\"><\/div>\n<\/div>\n<\/div>\n<p><!--]--><\/div>\n<div class=\"tm-article-poll__stats\"> \u041f\u0440\u043e\u0433\u043e\u043b\u043e\u0441\u043e\u0432\u0430\u043b\u0438 15 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439.   \u0412\u043e\u0437\u0434\u0435\u0440\u0436\u0430\u043b\u0438\u0441\u044c 3 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. <\/div>\n<p><!--]--><\/div>\n<p><!--]--><\/div>\n<p> \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\/729714\/\"> https:\/\/habr.com\/ru\/articles\/729714\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442! \u041e\u0434\u0438\u043d \u0438\u0437 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0435 \u0443 \u043d\u0430\u0441 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u043d \u043d\u0430  create-react-app \u0443\u0442\u0438\u043b\u0438\u0442\u0435 (\u043a\u0441\u0442\u0430\u0442\u0438 \u0443 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c <a href=\"https:\/\/habr.com\/ru\/articles\/723870\/\" rel=\"noopener noreferrer nofollow\">\u0441\u0442\u0430\u0442\u044c\u044f <\/a>\u043f\u043e \u043f\u043e\u0432\u043e\u0434\u0443 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441 CRA \u0438 \u0447\u0442\u043e \u0435\u0433\u043e \u0436\u0434\u0435\u0442 \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c). \u0412\u0441\u0442\u0430\u043b \u0432\u043e\u043f\u0440\u043e\u0441 \u043f\u043e \u043f\u043e\u0432\u043e\u0434\u0443 \u0442\u043e\u0433\u043e, \u043c\u043e\u0436\u043d\u043e \u043b\u0438 \u043a\u0430\u043a-\u0442\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0443 \u043f\u043e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0438 \u0432\u0435\u0441\u0443 \u0441\u0436\u0430\u0442\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0442\u0430\u043a \u043a\u0430\u043a \u0435\u0441\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043f\u043b\u0430\u043d\u044b \u043d\u0430 \u0440\u043e\u0441\u0442 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0438 \u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b, \u0447\u0442\u043e\u0431\u044b \u0447\u0442\u043e-\u0442\u043e \u043d\u0430\u0447\u0430\u043b\u043e \u0442\u043e\u0440\u043c\u043e\u0437\u0438\u0442\u044c, \u0438 \u044d\u0442\u0438\u043c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u044f \u0438 \u0437\u0430\u043d\u044f\u043b\u0441\u044f. \u0425\u043e\u0447\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0432\u0441\u0435 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043b\u043e, \u043a\u0430\u043a\u0438\u0435 \u0448\u0430\u0433\u0438 \u0431\u044b\u043b\u0438 \u043f\u0440\u043e\u0439\u0434\u0435\u043d\u044b \u0438 \u0447\u0442\u043e \u0432 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c. \u0422\u0430\u043a\u0436\u0435 \u0432 \u043a\u043e\u043d\u0446\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0443 \u043a\u043e\u0434 \u0432\u0441\u0435\u0439 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438.<\/p>\n<p>\u0421\u0440\u0430\u0437\u0443 \u0445\u043e\u0442\u0435\u043b \u0431\u044b \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u043f\u043e \u0432\u0435\u0431\u043f\u0430\u043a\u0443 \u0441 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u043e\u0439 \u0435\u0433\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u043e\u0439 \u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u043d\u0435 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u043e\u0432\u043e\u0433\u043e, \u0442\u0430\u043a \u043a\u0430\u043a \u0442\u0443\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u043d\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a. \u041f\u0440\u043e\u0448\u0443 \u043d\u0435 \u043a\u0438\u0434\u0430\u0442\u044c \u043a\u0430\u043c\u043d\u0438, \u0442\u0430\u043a \u043a\u0430\u043a \u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0445\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u043e\u043f\u044b\u0442\u043e\u043c, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0434\u0430\u0436\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0441\u043e\u0432\u0435\u0442\u044b \u043f\u043e \u043b\u0443\u0447\u0448\u0435\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 \u0438, \u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u043a\u043e\u043c\u0443-\u0442\u043e \u044d\u0442\u043e \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u043f\u043e\u043c\u043e\u0436\u0435\u0442.<\/p>\n<h2>\u041f\u043e\u0440\u0430 \u044d\u0434\u0436\u0435\u043a\u0442\u0438\u0442\u044c<\/h2>\n<p>\u041f\u0435\u0440\u0432\u044b\u043c \u0434\u0435\u043b\u043e\u043c, \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435, \u0431\u044b\u043b \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d eject \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u041f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u043a\u0443\u0447\u0443 \u043f\u0430\u043f\u043e\u0447\u0435\u043a \u0438 \u0444\u0430\u0439\u043b\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043b\u0435\u0436\u0430\u043b\u0438 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c CRA.<\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0438 \u0438 \u0441\u0436\u0430\u0442\u044b\u0439 \u0432\u0435\u0441 \u044f \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u043b Statoscope \u0432 \u043f\u0440\u043e\u0435\u043a\u0442. \u0421\u0442\u0430\u0432\u0438\u0442\u0441\u044f \u043e\u043d \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e. \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043b\u0430\u0433\u0438\u043d \u0432 \u043f\u0440\u043e\u0435\u043a\u0442, \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 \u0444\u0430\u0439\u043b \u0432\u0435\u0431\u043f\u0430\u043a\u0430 \u0438 \u0432\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u0432 \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432. \u0415\u0433\u043e \u0432\u0441\u044f\u0447\u0435\u0441\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c, \u043d\u043e \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u043d\u0435 \u043d\u0435 \u0431\u044b\u043b\u043e \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e.<\/p>\n<pre><code class=\"javascript\">npm i --save-dev @statoscope\/webpack-plugin ... const StatoscopeWebpackPlugin = require('@statoscope\/webpack-plugin').default;  module.exports = {   ...   plugins: [     ...     new StatoscopeWebpackPlugin()   ],   ... }<\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043f\u0440\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0435 \u0431\u0438\u043b\u0434\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0443 \u043d\u0430\u0441 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441\u043e \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0412\u043e\u0442 \u043a\u0430\u043a\u0430\u044f \u0441\u0442\u0430\u0442\u0430 \u0431\u044b\u043b\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0430 \u043f\u043e\u0441\u043b\u0435 eject \u043f\u0440\u043e\u0435\u043a\u0442\u0430.<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u0431\u0435\u0437 \u0434\u043e\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0430<\/figcaption><\/div>\n<\/figure>\n<p>\u0412\u0435\u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u0432 \u0441\u0436\u0430\u0442\u043e\u043c \u0432\u0438\u0434\u0435 371,35\u043a\u0431, \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0438 36,4 \u0441\u0435\u043a\u0443\u043d\u0434\u044b, 1 \u0447\u0430\u043d\u043a.<\/p>\n<h2>\u0423\u0434\u0430\u043b\u044f\u0435\u043c \u043b\u0438\u0448\u043d\u0435\u0435<\/h2>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0434\u0436\u0435\u043a\u0442\u0430 \u044f \u043d\u0430\u0447\u0430\u043b \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0438 \u043f\u0430\u043a\u0435\u0442\u044b.<\/p>\n<p>\u0412\u043e\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u044f \u043f\u043e\u0447\u0438\u0441\u0442\u0438\u043b:<\/p>\n<p>1) \u041f\u0430\u043a\u0435\u0442 camelcase (\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0441\u044f \u0432 jest \u0444\u0430\u0439\u043b\u0435)<br \/>2) Case sensitive paths webpack plugin, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043b\u0435\u0434\u0438\u0442 \u0437\u0430 \u0447\u0443\u0432\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430 \u0432 \u0438\u043c\u043f\u043e\u0440\u0442\u0430\u0445<br \/>3) \u041f\u0430\u043a\u0435\u0442 prompts <br \/>4) Identity obj proxy (\u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u043d\u0443\u0436\u0435\u043d \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f css \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u0442\u0430\u043a \u043a\u0430\u043a \u043d\u0430\u0434\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0438\u043c\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043a\u0430\u043a \u043a\u043b\u0430\u0441\u0441, \u0430 \u0443 \u043d\u0430\u0441 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 Styled-components)<br \/>5) Sass-loader <br \/>6) Tailwind<br \/>7) Semver (\u0434\u043b\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u0432\u0435\u0440\u0441\u0438\u0438 \u0440\u0435\u0430\u043a\u0442, \u043d\u0443\u0436\u0435\u043d \u0431\u044b\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0432\u044b\u0448\u0435 \u043b\u0438 16 \u0432\u0435\u0440\u0441\u0438\u0438, \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u044f \u043f\u043e\u0434\u043d\u0438\u043c\u0430\u043b \u0432\u0435\u0440\u0441\u0438\u044e \u0434\u043e 18 \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0443\u0436\u0435 \u0442\u043e\u0447\u043d\u043e \u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f) <br \/>8) Sevents, \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u0434\u043b\u044f \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0438 \u043d\u0430 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f \u0432 MacOS<br \/>9) \u0423\u0434\u0430\u043b\u0438\u043b \u043a\u0443\u0447\u0443 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 react-dev-utils, \u043d\u043e \u043f\u0430\u043a\u0435\u0442 \u043e\u0441\u0442\u0430\u0432\u0438\u043b, \u0442\u0430\u043a \u043a\u0430\u043a \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0435\u0449\u0438, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 cmd \u043d\u0430\u0434\u043f\u0438\u0441\u0435\u0439 \u0440\u0430\u0437\u043d\u044b\u0445 \u0446\u0432\u0435\u0442\u043e\u0432 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 (\u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u0445\u043e\u0442 \u0440\u0435\u043b\u043e\u0430\u0434\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u044b \u0432 create react app \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438)  <\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0430 \u043c\u043d\u0435 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435 \u0441\u0436\u0430\u0442\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438 \u043d\u0430 0,02\u043a\u0431, \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0438 \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0430\u0441\u044c.<\/p>\n<p>\u0422\u043e\u0433\u0434\u0430 \u044f \u043f\u043e\u043b\u0435\u0437 \u0432 \u0444\u0430\u0439\u043b\u044b \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 webpack, \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430, \u0431\u0438\u043b\u0434\u0430 \u0438 \u0442.\u043f. \u0438 \u043f\u043e\u043d\u044f\u043b, \u0447\u0442\u043e \u0431\u0435\u0437 \u0431\u0443\u0442\u044b\u043b\u043a\u0438 \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0432 \u044d\u0442\u0438\u0445 \u0444\u0430\u0439\u043b\u0430\u0445 \u0431\u044b\u0441\u0442\u0440\u043e \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0438 \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e \u0434\u0430\u0436\u0435 \u043d\u0435\u0442 \u0441\u043c\u044b\u0441\u043b\u0430.<\/p>\n<p>\u0418 \u044f \u043f\u0440\u0438\u043d\u044f\u043b \u0432\u043e\u043b\u0435\u0432\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0441\u043d\u0435\u0441\u0442\u0438 \u044d\u0442\u0443 \u0441\u0431\u043e\u0440\u043a\u0443 \u0438 \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u044e..<\/p>\n<h2>\u041d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0441\u043d\u0430\u0447\u0430\u043b\u0430<\/h2>\n<p>\u041d\u0430 \u043c\u043e\u0435\u043c \u0433\u0438\u0442\u0445\u0430\u0431\u0435 \u0433\u0434\u0435-\u0442\u043e \u0433\u043e\u0434 \u043d\u0430\u0437\u0430\u0434 \u044f \u0441\u043e\u0437\u0434\u0430\u043b \u043f\u0440\u043e\u0435\u043a\u0442 \u0441\u043e \u0441\u0431\u043e\u0440\u043a\u043e\u0439 \u0432\u0435\u0431\u043f\u0430\u043a\u0430, \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 \u043b\u0438\u043d\u0442\u0430 \u0438 \u0442.\u043f. \u0421\u0431\u043e\u0440\u043a\u0430 \u0432\u0435\u0431\u043f\u0430\u043a\u0430 \u0442\u0430\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f, \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u043e\u0439 \u0434\u043b\u044f sass, css-modules \u0438 \u0442.\u043f., \u043d\u043e \u0431\u0435\u0437 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043e\u0434 React Router \u0438 \u0441\u0438\u043b\u044c\u043d\u043e\u0439 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438. \u0415\u0435 \u044f \u0432\u0437\u044f\u043b \u0437\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u043d\u043e\u0432\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438. \u0415\u0441\u043b\u0438 \u043a\u043e\u043c\u0443-\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430 \u044d\u0442\u0430 \u0441\u0431\u043e\u0440\u043a\u0430, \u0442\u043e \u043f\u043e <a href=\"https:\/\/github.com\/idmx\/start-project-settings\" rel=\"noopener noreferrer nofollow\">\u0441\u0441\u044b\u043b\u043a\u0435 <\/a>\u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c.<\/p>\n<p>\u0421\u0440\u0430\u0437\u0443 \u0441\u0442\u0430\u0432\u043b\u044e \u0441\u0442\u0430\u0442\u043e\u0441\u043a\u043e\u043f, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044e \u0441\u0442\u0430\u0442\u0443, \u043d\u0435 \u0440\u0430\u0434\u0443\u044e\u0441\u044c)<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0421\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0430 \u043d\u043e\u0432\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438<\/figcaption><\/div>\n<\/figure>\n<p>\u042f \u043d\u0430\u0447\u0430\u043b \u043d\u0430\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0434\u043b\u044f \u0441\u0436\u0430\u0442\u0438\u044f \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0431\u043e\u0440\u043a\u0438.<\/p>\n<p>\u0412\u043e\u0442, \u0447\u0442\u043e \u044f \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u043b \u043f\u043e\u043c\u0438\u043c\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0443 \u043c\u0435\u043d\u044f \u0443\u0436\u0435 \u0441\u0442\u043e\u044f\u043b\u043e:<\/p>\n<p>1) Terser Plugin. \u042d\u0442\u043e\u0442 \u043f\u043b\u0430\u0433\u0438\u043d \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0435\u0442 \u0438 \u0441\u0436\u0438\u043c\u0430\u0435\u0442 \u043a\u043e\u0434, \u0447\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0445\u043e\u0440\u043e\u0448\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0441\u0431\u043e\u0440\u043a\u0438. (\u042f \u0434\u0430\u0436\u0435 \u0441\u0440\u0430\u0437\u0443 \u0437\u0430\u043c\u0435\u0440\u0438\u043b \u0441\u0442\u0430\u0442\u0443 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u0435\u043d\u044f \u043f\u043e\u0440\u0430\u0434\u043e\u0432\u0430\u043b)<\/p>\n<details class=\"spoiler\">\n<summary>\u0421\u0442\u0430\u0442\u0430 \u0441 \u0442\u0435\u0440\u0441\u0435\u0440\u043e\u043c<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<p>2) Css Minimizer Webpack Plugin \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 CSS \u0432 \u0441\u0431\u043e\u0440\u043a\u0435.<br \/>\u041f\u0435\u0440\u0432\u044b\u0435 \u0434\u0432\u0430 \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0441\u0442\u0430\u0432\u044f\u0442\u0441\u044f \u0432 \u0440\u0430\u0437\u0434\u0435\u043b minimizer \u0432\u0435\u0431\u043f\u0430\u043a\u0430<\/p>\n<pre><code class=\"json\">module.exports = {   ...   optimization: {     minimize: true,     minimizer: [       new TerserPlugin(),       new CssMinimizerWebpackPlugin()     ],     ...   }   ... }<\/code><\/pre>\n<p>3) React Refresh Webpack Plugin. \u041e\u043d \u043d\u0443\u0436\u0435\u043d \u0431\u043e\u043b\u044c\u0448\u0435 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 hot-reload \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043d\u0435 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u043b\u0430\u0441\u044c, \u0435\u0441\u043b\u0438 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u0430\u044f \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0430\u044f. \u041f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0441\u0442\u0435\u0439\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<br \/>4) Hashed Module Ids Plugin. \u041e\u043d \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0445\u044d\u0448\u0438 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0432 \u0441\u0431\u043e\u0440\u043a\u0435 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0438\u0445 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0443\u0442\u0435\u0439. \u0411\u043e\u043b\u044c\u0448\u0435 \u043d\u0443\u0436\u0435\u043d \u0442\u0430\u043a\u0436\u0435 \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430.<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u044f:<\/p>\n<ul>\n<li>\n<p>\u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0441\u0431\u043e\u0440\u043a\u0443 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 Styled-Components;<\/p>\n<\/li>\n<li>\n<p>\u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0432 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 svg \u043b\u043e\u0430\u0434\u0435\u0440 <code>@svgr\/webpack <\/code>, \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0442\u044c svg;<\/p>\n<\/li>\n<li>\n<p>\u043f\u043e\u0441\u0442\u0430\u0432\u0438\u043b \u043d\u0443\u0436\u043d\u044b\u0435 \u0434\u043b\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430 alias;<\/p>\n<\/li>\n<li>\n<p>\u0434\u043e\u0431\u0430\u0432\u0438\u043b <code>historyApiFallback: true<\/code>, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u043b React Router, \u0438\u043d\u0430\u0447\u0435 \u043f\u0443\u0442\u0438 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442\u0441\u044f \u043a\u0430\u043a \u0433\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440;<\/p>\n<\/li>\n<li>\n<p>\u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043b <code>client: { overlay: false }<\/code> , \u0447\u0442\u043e\u0431\u044b \u043e\u0448\u0438\u0431\u043a\u0438 \u043b\u0438\u043d\u0442\u0435\u0440\u043e\u0432 \u043d\u0435 \u043b\u0435\u0437\u043b\u0438 \u043f\u043e\u0432\u0435\u0440\u0445 \u044d\u043a\u0440\u0430\u043d\u0430, \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u0431\u0435\u0441\u0438\u0442;<\/p>\n<\/li>\n<li>\n<p>\u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u043b tscoinfig.<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0443:<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>312,01 \u043a\u0431 \u0432\u0435\u0441 \u0441\u0436\u0430\u0442\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438, 28,1 \u0441\u0435\u043a\u0443\u043d\u0434 \u0441\u0431\u043e\u0440\u043a\u0430 \u0438 \u0442\u0430\u043a\u0436\u0435 2 \u0447\u0430\u043d\u043a\u0430.<\/p>\n<p>\u0423\u0447\u0438\u0442\u044b\u0432\u0430\u044f, \u0447\u0442\u043e \u0441\u0430\u043c \u043f\u043e \u0441\u0435\u0431\u0435 \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439, \u0432 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430 \u0443\u0441\u043f\u0435\u0448\u043d\u043e. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435, \u0447\u0442\u043e \u044f \u0440\u0435\u0448\u0438\u043b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c &#8212; \u044d\u0442\u043e \u0440\u0430\u0437\u0431\u0438\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u043f\u0430\u043a\u0435\u0442\u043e\u0432 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0447\u0430\u043d\u043a\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0431\u043b\u043e\u043a optimization:<\/p>\n<pre><code class=\"javascript\">optimization: {     minimize: true,     minimizer: [       new TerserPlugin(),       new CssMinimizerWebpackPlugin()     ],     runtimeChunk: 'single',     splitChunks: {       chunks: 'all',       maxInitialRequests: Infinity,       minSize: 0,       cacheGroups: {         vendor: {           test: \/[\\\\\/]node_modules[\\\\\/]\/,           name(module) {             const packageName = module.context.match(\/[\\\\\/]node_modules[\\\\\/](.*?)([\\\\\/]|$)\/) ?? 'package';             return `npm.${packageName[1].replace('@', '')}`;           }         }       }     },   },<\/code><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0412\u0435\u0441 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u043b\u0441\u044f \u0434\u043e 334,46 \u043a\u0431, \u0441\u0431\u043e\u0440\u043a\u0430 \u0441\u0442\u0430\u043b\u0430 \u0447\u0443\u0442\u044c \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0438 \u0432\u0441\u0435 \u043f\u0430\u043a\u0435\u0442\u044b \u043b\u0435\u0436\u0430\u0442 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0447\u0430\u043d\u043a\u0430\u0445.<\/p>\n<h2>\u0427\u0442\u043e \u0432 \u0438\u0442\u043e\u0433\u0435?<\/h2>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u043c\u043e\u0433\u0443 \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u0441\u0431\u043e\u0440\u043a\u0430 CRA \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u043c\u0435\u0435\u0442 \u043b\u0438\u0448\u043d\u0438\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u0439 \u043a\u043e\u0434 \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0432\u0435\u0431\u043f\u0430\u043a\u0430, \u043d\u043e \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0432\u0440\u043e\u0434\u0435 \u043a\u0430\u043a \u0438 \u043d\u0435 \u0442\u0430\u043a \u043f\u043b\u043e\u0445\u0430. <\/p>\n<p>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430\u0441\u044c, \u0445\u043e\u0442\u044c \u0438 \u043d\u0435 \u0441\u0443\u043f\u0435\u0440 \u043f\u0443\u043f\u0435\u0440 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0438\u0432\u043d\u0430\u044f, \u043d\u043e \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u043e\u043d\u0430 \u0435\u0441\u0442\u044c, \u043f\u0440\u043e\u0435\u043a\u0442 \u0441\u0442\u0430\u043b \u043c\u0435\u043d\u044c\u0448\u0435 \u0432\u0435\u0441\u0438\u0442\u044c \u0432 \u0441\u0436\u0430\u0442\u043e\u043c \u0432\u0438\u0434\u0435 (\u0445\u043e\u0442\u0435\u043b \u0431\u044b \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0432\u0435\u0441 \u0432 \u043d\u0435 \u0441\u0436\u0430\u0442\u043e\u043c \u0432\u0438\u0434\u0435 \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u0432\u044b\u0448\u0435, \u0447\u0435\u043c \u0432 CRA) \u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u0435 \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043a\u0443\u0447\u0443 \u0447\u0430\u043d\u043a\u043e\u0432. \u0421\u0435\u0439\u0447\u0430\u0441 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043d\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u0435, \u043d\u043e \u0434\u0443\u043c\u0430\u044e, \u0447\u0442\u043e \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u043e\u0435\u043a\u0442 \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0441\u0442\u0430\u0442\u044c\u0441\u044f, \u0434\u0430\u043d\u043d\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0435\u043a\u0442\u0443.<\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 webpack.config.js \u0438 tsconfig.json, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438.<\/p>\n<details class=\"spoiler\">\n<summary>webpack.config.js<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"javascript\">const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const ESLintPlugin = require('eslint-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const StatoscopeWebpackPlugin = require('@statoscope\/webpack-plugin').default; const ReactRefreshWebpackPlugin = require('@pmmmwh\/react-refresh-webpack-plugin'); const path = require('path'); const TerserPlugin = require('terser-webpack-plugin'); const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin'); const webpack = require('webpack') const Dotenv = require('dotenv-webpack'); require('dotenv').config({path: path.resolve(__dirname, '.env')})  const mode = process.env.NODE_ENV || \"development\"; const port = process.env.PORT || 3000; const devMode = mode === \"development\"; const target = devMode ? 'web' : 'browserslist'; const devtool = devMode &amp;&amp; 'source-map';  module.exports = {   mode,   target,   devtool,   devServer: {     port,     open: true,     hot: true,     historyApiFallback: true,     client: {       overlay: false     },     headers: {       'Access-Control-Allow-Origin': '*',       'Access-Control-Allow-Methods': '*',       'Access-Control-Allow-Headers': '*',     },     onBeforeSetupMiddleware(devServer) {       devMode &amp;&amp; require(path.resolve(__dirname, 'src\/setupProxy.js'))(devServer.app);     },   },   entry: path.resolve(__dirname, 'src', 'index.tsx'),   output: {     path: path.resolve(__dirname, 'build'),     filename: 'js\/[name].[contenthash].bundle.js',     chunkFilename: 'js\/[id].[contenthash].js',     assetModuleFilename: 'assets\/[hash][ext]',     publicPath: '\/'   },   optimization: {     minimize: true,     minimizer: [       new TerserPlugin(),       new CssMinimizerWebpackPlugin()     ],     runtimeChunk: 'single',     splitChunks: {       chunks: 'all',       maxInitialRequests: Infinity,       minSize: 0,       cacheGroups: {         vendor: {           test: \/[\\\\\/]node_modules[\\\\\/]\/,           name(module) {             const packageName = module.context.match(\/[\\\\\/]node_modules[\\\\\/](.*?)([\\\\\/]|$)\/) ?? 'package';             return `npm.${packageName[1].replace('@', '')}`;           }         }       }     },   },   resolve: {     extensions: ['.json', '.jsx', '.tsx', '.ts', '.js', '.mjs'],     alias: {       '~components': path.resolve(__dirname, 'src\/components'),       '~hooks': path.resolve(__dirname, 'src\/hooks'),       '~types': path.resolve(__dirname, 'src\/types'),       '~pages': path.resolve(__dirname, 'src\/pages'),       '~utils': path.resolve(__dirname, 'src\/utils'),       '~constants': path.resolve(__dirname, 'src\/constants'),       '~helpers': path.resolve(__dirname, 'src\/utils\/helpers'),       '~layouts': path.resolve(__dirname, 'src\/layouts'),       '~api': path.resolve(__dirname, 'src\/api'),     },   },   plugins: [     new Dotenv({ path: path.resolve(__dirname, '.env'), systemvars: true }),     new HtmlWebpackPlugin({       template: path.resolve(__dirname, 'public', 'index.html'),     }),     new MiniCssExtractPlugin({       filename: 'css\/[name].[contenthash].bundle.css',     }),     new CleanWebpackPlugin(),     new ESLintPlugin({       extensions: ['ts', 'tsx'],       exclude: ['\/node_modules\/', '\/.idea\/', '\/.vscode\/'],     }),     new ReactRefreshWebpackPlugin({       overlay: false,     }),     new webpack.ids.HashedModuleIdsPlugin(),     new StatoscopeWebpackPlugin()   ],   module: {     rules: [       {   <\/code><\/pre>\n<\/div>\n<\/details>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-410158","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/410158","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=410158"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/410158\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=410158"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=410158"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=410158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}