{"id":476234,"date":"2026-04-16T22:12:43","date_gmt":"2026-04-16T22:12:43","guid":{"rendered":"https:\/\/savepearlharbor.com\/?p=476234"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=476234","title":{"rendered":"\u041f\u043e\u0447\u0435\u043c\u0443 \u0432\u0430\u0448 \u0431\u0430\u043d\u0434\u043b \u0442\u044f\u0436\u0435\u043b\u0435\u0435 \u0447\u0435\u043c \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u2014 \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u044e tree shaking \u043d\u0430 7 \u0431\u0430\u043d\u0434\u043b\u0435\u0440\u0430\u0445"},"content":{"rendered":"<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<h3>\u041a\u0430\u043a \u0432\u0441\u0451 \u043d\u0430\u0447\u0430\u043b\u043e\u0441\u044c<\/h3>\n<p>\u041f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435, \u0442\u0430\u043a \u0434\u043e\u043b\u0436\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u041d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0431\u0430\u043d\u0434\u043b\u0435\u0440\u0430 \u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u2014 \u0438 \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e \u044f \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u043b.<\/p>\n<p>\u0412 \u0430\u0432\u0433\u0443\u0441\u0442\u0435 2024 \u044f \u043d\u0430\u0442\u043a\u043d\u0443\u043b\u0441\u044f \u043d\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0432 \u0440\u0430\u0431\u043e\u0447\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043d\u0430 Next.js. \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b \u0438\u0437 \u043e\u0431\u0449\u0435\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u0447\u0435\u0440\u0435\u0437 barrel (index.ts \u0441 \u0440\u0435\u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430\u043c\u0438). \u041a\u0430\u0436\u0434\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0430 2-3 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043d\u043e \u0432 \u0431\u0430\u043d\u0434\u043b \u043f\u043e\u043f\u0430\u0434\u0430\u043b\u043e \u0432\u0441\u0451 \u2014 \u0434\u0435\u0441\u044f\u0442\u043a\u0438 \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u043e\u0432. \u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u043a\u043e\u043b\u043e\u0441\u0441\u0430\u043b\u044c\u043d\u043e\u0439: \u043a\u043e\u0433\u0434\u0430 \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b <code>sideEffects: false<\/code> \u0438 \u043f\u0435\u0440\u0435\u0448\u0451\u043b \u043d\u0430 direct export \u2014 \u0431\u0430\u043d\u0434\u043b \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u043b\u0441\u044f \u0432 \u0434\u0432\u0430 \u0440\u0430\u0437\u0430.<\/p>\n<p>\u042f \u0437\u0430\u0432\u0451\u043b <a href=\"https:\/\/github.com\/vercel\/next.js\/issues\/69532\" rel=\"noopener noreferrer nofollow\">issue \u043d\u0430 GitHub<\/a>, \u043f\u043e\u043a\u043e\u043f\u0430\u043b\u0441\u044f, \u043d\u0430\u0448\u0451\u043b \u043e\u0431\u0445\u043e\u0434\u043d\u043e\u0439 \u043f\u0443\u0442\u044c \u0438 \u0437\u0430\u043a\u0440\u044b\u043b. \u041d\u043e \u0432\u043e\u043f\u0440\u043e\u0441 \u043d\u0435 \u043e\u0442\u043f\u0443\u0441\u043a\u0430\u043b: \u044d\u0442\u043e Next.js \u0432\u0438\u043d\u043e\u0432\u0430\u0442? Webpack? \u0418\u043b\u0438 barrel \u0444\u0430\u0439\u043b\u044b \u0441\u0430\u043c\u0438 \u043f\u043e \u0441\u0435\u0431\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430? \u0421\u043f\u0443\u0441\u0442\u044f \u043f\u043e\u043b\u0442\u043e\u0440\u0430 \u0433\u043e\u0434\u0430 \u0440\u0435\u0448\u0438\u043b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u043e\u0441\u043d\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u2014 \u0441\u043e\u0431\u0440\u0430\u043b \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435, \u043f\u0440\u043e\u0433\u043d\u0430\u043b \u043e\u0434\u043d\u0438 \u0438 \u0442\u0435 \u0436\u0435 \u0442\u0435\u0441\u0442\u044b \u043d\u0430 7 \u0431\u0430\u043d\u0434\u043b\u0435\u0440\u0430\u0445 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043b \u0447\u0442\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u0432 \u0432\u044b\u0445\u043e\u0434\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b.<\/p>\n<p><strong>\u0421\u0440\u0430\u0437\u0443 \u043e\u0433\u043e\u0432\u043e\u0440\u044e\u0441\u044c:<\/strong> \u044f \u043d\u0435 \u043f\u0440\u0435\u0442\u0435\u043d\u0434\u0443\u044e \u043d\u0430 \u0438\u0441\u0442\u0438\u043d\u0443. \u042d\u0442\u043e \u043b\u0438\u0447\u043d\u043e\u0435 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u044f \u043f\u0440\u043e\u0432\u0451\u043b \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u0442\u0435\u043c\u0435 \u0434\u043b\u044f \u0441\u0435\u0431\u044f. \u0414\u0435\u043b\u044e\u0441\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u043c\u0438 \u0432 \u043d\u0430\u0434\u0435\u0436\u0434\u0435 \u0443\u0437\u043d\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043d\u043e\u0432\u043e\u0435 \u043e\u0442 \u043b\u044e\u0434\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0441 \u0431\u0430\u043d\u0434\u043b\u0435\u0440\u0430\u043c\u0438 \u0433\u043b\u0443\u0431\u0436\u0435. \u0415\u0441\u043b\u0438 \u0433\u0434\u0435-\u0442\u043e \u043e\u0448\u0438\u0431\u0441\u044f \u0438\u043b\u0438 \u0443\u043f\u0443\u0441\u0442\u0438\u043b \u0432\u0430\u0436\u043d\u043e\u0435 \u2014 \u0431\u0443\u0434\u0443 \u0440\u0430\u0434, \u0435\u0441\u043b\u0438 \u043f\u043e\u043f\u0440\u0430\u0432\u0438\u0442\u0435 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445.<\/p>\n<p>\u0427\u0442\u043e \u0431\u044b \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0442\u044c \u0440\u0430\u0441\u0441\u0443\u0436\u0434\u0430\u0442\u044c \u043e \u0442\u0435\u043c\u0435, \u043d\u0443\u0436\u043d\u043e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043e \u0447\u0451\u043c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c, \u0438 \u0447\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0442 \u0442\u0435 \u0438\u043b\u0438 \u0438\u043d\u044b\u0435 \u0442\u0435\u0440\u043c\u0438\u043d\u044b \u0432 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435, \u043f\u043e \u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0447\u043d\u0451\u043c \u0441 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0431\u0430\u0437\u044b, \u0438 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u044e, \u0447\u0442\u043e \u0431\u044b \u043a\u0430\u0436\u0434\u044b\u0439 \u0447\u0438\u0442\u0430\u044e\u0449\u0438\u0439 \u043c\u043e\u0433 \u0443\u043b\u043e\u0432\u0438\u0442\u044c \u0441\u0443\u0442\u044c.<\/p>\n<h3>\u041c\u0451\u0440\u0442\u0432\u044b\u0439 \u043a\u043e\u0434 \u0438 tree shaking<\/h3>\n<p>\u041c\u0451\u0440\u0442\u0432\u044b\u0439 \u043a\u043e\u0434 \u2014 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0435\u0441\u0442\u044c \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u0445, \u043d\u043e \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f. Tree shaking \u2014 \u043a\u043e\u0433\u0434\u0430 \u0431\u0430\u043d\u0434\u043b\u0435\u0440 \u0432\u044b\u0440\u0435\u0437\u0430\u0435\u0442 \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u0434 \u0438\u0437 \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438. \u041f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"javascript\">\/\/ utils.ts \u2014 4 \u0444\u0443\u043d\u043a\u0446\u0438\u0438export function formatDate() { \/* ... *\/ }export function formatCurrency() { \/* ... *\/ }export function parseQuery() { \/* ... *\/ }export function debounce() { \/* ... *\/ }<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:87px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<pre><code class=\"javascript\">\/\/ app.ts \u2014 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u0443import { formatDate } from '.\/utils'<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0421 tree shaking \u0432 \u0431\u0430\u043d\u0434\u043b \u043f\u043e\u043f\u0430\u0434\u0451\u0442 \u0442\u043e\u043b\u044c\u043a\u043e <code>formatDate<\/code>. \u0411\u0435\u0437 \u043d\u0435\u0433\u043e \u2014 \u0432\u0441\u0435 \u0447\u0435\u0442\u044b\u0440\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u043d\u0438\u0433\u0434\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f.<\/p>\n<p>\u0422\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u0432 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0435: \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0448\u044c \u043e\u0434\u043d\u0443 \u0438\u043a\u043e\u043d\u043a\u0443 \u0438\u0437 <code>@mui\/icons-material<\/code> (3000+ \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u043e\u0432) \u0438\u043b\u0438 <code>pick<\/code> \u0438\u0437 <code>lodash-es<\/code> (300+ \u0444\u0443\u043d\u043a\u0446\u0438\u0439) \u2014 tree shaking \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e, \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f, \u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u044b\u043a\u0438\u043d\u0443\u0442\u044c.<\/p>\n<h3>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 barrel file \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u0441 \u043d\u0438\u043c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/h3>\n<p>Barrel file \u2014 \u044d\u0442\u043e <code>index.ts<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0435\u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u0432\u0441\u0451 \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435:<\/p>\n<pre><code class=\"typescript\">\/\/ shared\/constants\/index.ts \u2014 barrel fileexport { CONSTANT_A, CONFIG_A } from '.\/a'export { CONSTANT_B, CONFIG_B } from '.\/b'export { CONSTANT_C, CONFIG_C } from '.\/c'<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0423\u0434\u043e\u0431\u043d\u043e \u2014 \u0432\u043c\u0435\u0441\u0442\u043e \u0442\u0440\u0451\u0445 \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u0432 \u043f\u0438\u0448\u0435\u0448\u044c \u043e\u0434\u0438\u043d:<\/p>\n<pre><code class=\"typescript\">import { CONSTANT_A, CONFIG_A } from '..\/shared\/constants'<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0431\u0430\u043d\u0434\u043b\u0435\u0440 \u0432\u0438\u0434\u0438\u0442 \u0438\u043c\u043f\u043e\u0440\u0442 \u0438\u0437 <code>index.ts<\/code> \u0438 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0442\u044f\u043d\u0443\u0442\u044c \u0432\u0435\u0441\u044c \u0433\u0440\u0430\u0444 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u2014 \u0432\u043a\u043b\u044e\u0447\u0430\u044f <code>b.ts<\/code> \u0438 <code>c.ts<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u044b. \u041d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0430\u043d\u0434\u043b\u0435\u0440 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u043b \u0432\u044b\u0440\u0435\u0437\u0430\u0442\u044c (\u044d\u0442\u043e \u0438 \u0435\u0441\u0442\u044c tree shaking \u2014 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u043c\u0451\u0440\u0442\u0432\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435), \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0432 \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u0438 \u0435\u0434\u0435\u0442 \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d.<\/p>\n<h3>\u0418\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435: 7 \u0431\u0430\u043d\u0434\u043b\u0435\u0440\u043e\u0432, 3 \u043a\u0435\u0439\u0441\u0430<\/h3>\n<p>\u0417\u0430\u0434\u0443\u043c\u043a\u0430 \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u2014 \u0432\u0437\u044f\u0442\u044c \u043e\u0434\u043d\u0438 \u0438 \u0442\u0435 \u0436\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043e\u0434\u043d\u0443 \u0438 \u0442\u0443 \u0436\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u0432, \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043a\u0430\u043a \u043a\u0430\u0436\u0434\u044b\u0439 \u0431\u0430\u043d\u0434\u043b\u0435\u0440 \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435\u043c \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0433\u043e \u043a\u043e\u0434\u0430. \u0411\u0435\u0437 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u0431\u0435\u0437 \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438, \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u043c\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440.<\/p>\n<p>6 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u043e\u0432 \u2014 3 \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0438 3 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438. \u0422\u0440\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043a\u0430\u0436\u0434\u0430\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e 2 \u0438\u0437 6. \u0415\u0441\u043b\u0438 tree shaking \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u2014 \u0432 \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0431\u0443\u0434\u0443\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0451 2 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 \u043d\u0435\u0442 \u2014 \u043f\u043e\u0442\u0430\u0449\u0438\u0442 \u0432\u0441\u0435 6.<\/p>\n<p>\u041e\u0434\u043d\u0438 \u0438 \u0442\u0435 \u0436\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u0442\u0440\u0438 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0438\u043c\u043f\u043e\u0440\u0442\u0430:<\/p>\n<p><strong>Single file<\/strong> \u2014 \u0432\u0441\u0435 6 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u043e\u0432 \u0432 \u043e\u0434\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435:<\/p>\n<pre><code class=\"typescript\">\/\/ shared\/constants-single-file.tsexport const CONSTANT_A = 'value_a_from_single_file'export const CONFIG_A = { name: 'config_a', value: 1, nested: { deep: true } }\/\/ ... \u0438 \u0435\u0449\u0451 B, C<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p><strong>Barrel<\/strong> \u2014 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u044b \u0440\u0430\u0437\u043d\u0435\u0441\u0435\u043d\u044b \u043f\u043e \u0444\u0430\u0439\u043b\u0430\u043c, \u0438\u043c\u043f\u043e\u0440\u0442 \u0447\u0435\u0440\u0435\u0437 <code>index.ts<\/code>:<\/p>\n<pre><code class=\"typescript\">\/\/ shared\/constants-separate\/index.tsexport { CONSTANT_A, CONFIG_A } from '.\/a'export { CONSTANT_B, CONFIG_B } from '.\/b'export { CONSTANT_C, CONFIG_C } from '.\/c'<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p><strong>Direct<\/strong> \u2014 \u0442\u0435 \u0436\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b, \u043d\u043e \u0438\u043c\u043f\u043e\u0440\u0442 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u0431\u0435\u0437 barrel:<\/p>\n<pre><code class=\"typescript\">import { CONSTANT_A, CONFIG_A } from '..\/shared\/constants-separate\/a'<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041f\u0440\u043e\u0433\u043d\u0430\u043b \u043d\u0430:<\/p>\n<ul>\n<li>\n<p><strong>webpack 5<\/strong> \u2014 scope hoisting + terser<\/p>\n<\/li>\n<li>\n<p><strong>rspack 1<\/strong> \u2014 webpack \u043d\u0430 Rust, \u0442\u043e\u0442 \u0436\u0435 API<\/p>\n<\/li>\n<li>\n<p><strong>rollup 4<\/strong> \u2014 \u0437\u0430\u0442\u043e\u0447\u0435\u043d \u043f\u043e\u0434 ES-\u043c\u043e\u0434\u0443\u043b\u0438 \u0438 tree shaking<\/p>\n<\/li>\n<li>\n<p><strong>vite 8<\/strong> \u2014 rolldown \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0434\u043b\u044f production-\u0441\u0431\u043e\u0440\u043a\u0438<\/p>\n<\/li>\n<li>\n<p><strong>esbuild 0.28<\/strong> \u2014 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 Go, \u0441\u0430\u043c\u044b\u0439 \u0431\u044b\u0441\u0442\u0440\u044b\u0439<\/p>\n<\/li>\n<li>\n<p><strong>Next.js 15 (webpack)<\/strong> \u2014 Next.js \u0441 webpack \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c<\/p>\n<\/li>\n<li>\n<p><strong>Next.js 16 (Turbopack)<\/strong> \u2014 Next.js \u0441 Turbopack \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e<\/p>\n<\/li>\n<\/ul>\n<p>\u0412\u0441\u0451 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u2014 <code>node analyze.js<\/code> \u0441\u0442\u0430\u0432\u0438\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u043a\u0430\u0436\u0434\u044b\u0439 \u0431\u0430\u043d\u0434\u043b\u0435\u0440 \u0438 \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0432\u044b\u0445\u043e\u0434\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044f \u043a\u0430\u043a\u0438\u0435 \u043c\u0430\u0440\u043a\u0435\u0440\u044b \u043f\u043e\u043f\u0430\u043b\u0438 \u0432 \u0431\u0430\u043d\u0434\u043b.<\/p>\n<p>\u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0441 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435\u043c: <a href=\"https:\/\/github.com\/lykianovsky\/tree-shaking-barrel-test\" rel=\"noopener noreferrer nofollow\">github.com\/lykianovsky\/tree-shaking-barrel-test<\/a><\/p>\n<h3>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b<\/h3>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<th>\n<p align=\"left\">\u041a\u0435\u0439\u0441<\/p>\n<\/th>\n<th>\n<p align=\"left\">webpack<\/p>\n<\/th>\n<th>\n<p align=\"left\">rspack<\/p>\n<\/th>\n<th>\n<p align=\"left\">rollup<\/p>\n<\/th>\n<th>\n<p align=\"left\">vite<\/p>\n<\/th>\n<th>\n<p align=\"left\">esbuild<\/p>\n<\/th>\n<th>\n<p align=\"left\">next-webpack<\/p>\n<\/th>\n<th>\n<p align=\"left\">next-turbopack<\/p>\n<\/th>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">Single file<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u2705<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u2705<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u274c<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u274c<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u274c<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u274c<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u274c<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">Barrel<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u2705<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u2705<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u2705<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u2705<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u274c<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u274c<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u2705<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">Direct<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u2705<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u2705<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u2705<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u2705<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u2705<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u2705<\/p>\n<\/td>\n<td>\n<p align=\"left\">\u2705<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p><strong>\u0413\u043b\u0430\u0432\u043d\u044b\u0439 \u0432\u044b\u0432\u043e\u0434: direct import (<\/strong><code><strong>import { X } from '.\/constants\/a'<\/strong><\/code><strong>) \u2014 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442 tree shaking \u0443 \u0432\u0441\u0435\u0445 7 \u0431\u0430\u043d\u0434\u043b\u0435\u0440\u043e\u0432.<\/strong> \u0422\u043e\u043b\u044c\u043a\u043e webpack \u0438 rspack \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u0442\u0440\u0435\u043c\u044f \u043a\u0435\u0439\u0441\u0430\u043c\u0438. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043b\u043e\u043c\u0430\u044e\u0442\u0441\u044f \u043d\u0430 single file, barrel, \u0438\u043b\u0438 \u043d\u0430 \u043e\u0431\u043e\u0438\u0445.<\/p>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u2014 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u044e \u043f\u043e\u0447\u0435\u043c\u0443 \u043a\u0430\u0436\u0434\u044b\u0439 \u0431\u0430\u043d\u0434\u043b\u0435\u0440 \u0432\u0435\u0434\u0451\u0442 \u0441\u0435\u0431\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a, \u0438 \u0447\u0442\u043e \u0441 \u044d\u0442\u0438\u043c \u0434\u0435\u043b\u0430\u0442\u044c.<\/p>\n<hr\/>\n<h3>\u041a\u0430\u043a webpack \u0434\u0435\u043b\u0430\u0435\u0442 tree shaking \u2014 \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u0434\u0432\u0430 \u0448\u0430\u0433\u0430, \u0430 \u043d\u0435 \u043e\u0434\u0438\u043d<\/h3>\n<p>Webpack \u043d\u0435 \u0432\u044b\u0440\u0435\u0437\u0430\u0435\u0442 \u043c\u0451\u0440\u0442\u0432\u044b\u0439 \u043a\u043e\u0434 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e. \u041e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u0434\u0432\u0430 \u044d\u0442\u0430\u043f\u0430:<\/p>\n<pre><code class=\"bash\">webpack:  [\u043c\u043e\u0434\u0443\u043b\u0438] \u2192 scope hoisting (concat) \u2192 \u0432\u0441\u0451 \u0432 \u043e\u0434\u043d\u043e\u043c \u0441\u043a\u043e\u0443\u043f\u0435 \u2192 terser \u2192 \u043c\u0451\u0440\u0442\u0432\u044b\u0439 \u043a\u043e\u0434 \u0443\u0434\u0430\u043b\u0451\u043d \u2705rollup:   [\u043c\u043e\u0434\u0443\u043b\u0438] \u2192 \u0430\u043d\u0430\u043b\u0438\u0437 \u0433\u0440\u0430\u0444\u0430 \u2192 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0435 \u2192 \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f (\u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e) \u2705Next.js:  [\u043c\u043e\u0434\u0443\u043b\u0438] \u2192 shared chunks (multi-entry) \u2192 concat \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u0435\u043d \u2192 terser \u043d\u0435 \u0432\u0438\u0434\u0438\u0442 \u043c\u0451\u0440\u0442\u0432\u043e\u0435 \u274c<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p><strong>\u0428\u0430\u0433 1 \u2014 scope hoisting.<\/strong> <code>ModuleConcatenationPlugin<\/code> \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u0442 \u0432\u0441\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u0432 \u043e\u0434\u0438\u043d \u0441\u043a\u043e\u0443\u043f. \u0412\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0444\u0430\u0439\u043b \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e, webpack \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442 \u0432\u0435\u0441\u044c \u043a\u043e\u0434 \u0432 \u043e\u0434\u043d\u043e \u043c\u0435\u0441\u0442\u043e. \u041d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043c\u0451\u0440\u0442\u0432\u044b\u0439 \u043a\u043e\u0434 \u0435\u0449\u0451 \u043d\u0438\u043a\u0443\u0434\u0430 \u043d\u0435 \u0434\u0435\u043b\u0441\u044f \u2014 \u0432\u0441\u0435 6 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u043e\u0432 \u043d\u0430 \u043c\u0435\u0441\u0442\u0435:<\/p>\n<pre><code class=\"javascript\">\/\/ webpack dist\/separate\/page1.js \u2014 minimize: false(() =&gt; {  \"use strict\";  \/\/ ..\/shared\/constants-separate\/a.ts  const CONSTANT_A = 'value_a_from_separate_file';  const CONFIG_A = { name: 'config_a', value: 1, nested: { deep: true } };  \/\/ ..\/shared\/constants-separate\/b.ts        \u2190 \u043c\u0451\u0440\u0442\u0432\u044b\u0439 \u043a\u043e\u0434  const CONSTANT_B = 'value_b_from_separate_file';  const CONFIG_B = { name: 'config_b', value: 2, nested: { deep: false } };  \/\/ ..\/shared\/constants-separate\/c.ts        \u2190 \u043c\u0451\u0440\u0442\u0432\u044b\u0439 \u043a\u043e\u0434  const CONSTANT_C = 'value_c_from_separate_file';  const CONFIG_C = { name: 'config_c', value: 3, nested: { deep: true } };  \/\/ .\/src\/separate-files\/page1.ts  console.log('Page 1:', CONSTANT_A, CONFIG_A);})();<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p><strong>\u0428\u0430\u0433 2 \u2014 terser.<\/strong> \u041c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u0432\u0438\u0434\u0438\u0442 \u0447\u0442\u043e <code>CONSTANT_B<\/code>, <code>CONFIG_B<\/code>, <code>CONSTANT_C<\/code>, <code>CONFIG_C<\/code> \u043d\u0438\u0433\u0434\u0435 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u2014 \u0438 \u0432\u044b\u0440\u0435\u0437\u0430\u0435\u0442:<\/p>\n<pre><code class=\"javascript\">\/\/ webpack dist\/separate\/page1.js \u2014 minimize: true (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e)(()=&gt;{\"use strict\";console.log(\"Page 1:\",\"value_a_from_separate_file\",{name:\"config_a\",value:1,nested:{deep:!0}})})();<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0427\u0438\u0441\u0442\u043e. \u0422\u043e\u043b\u044c\u043a\u043e \u043d\u0443\u0436\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435.<\/p>\n<p><strong>\u0412\u0430\u0436\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442: \u043e\u0442\u043a\u043b\u044e\u0447\u0438 <\/strong><code><strong>minimize: false<\/strong><\/code><strong> \u2014 \u0438 tree shaking \u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f.<\/strong> Terser \u043d\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f, \u0432\u0441\u0435 6 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u043e\u0432 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f. Scope hoisting \u0441\u0430\u043c \u043f\u043e \u0441\u0435\u0431\u0435 \u043d\u0435 \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u043a\u043e\u0434 \u2014 \u043e\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0443\u0441\u043b\u043e\u0432\u0438\u044f, \u0447\u0442\u043e\u0431\u044b terser \u043c\u043e\u0433 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435. \u0411\u0435\u0437 \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 webpack \u043d\u0435 \u043b\u0443\u0447\u0448\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445.<\/p>\n<p>\u0412 rollup \u0438 vite \u0442\u0430\u043a\u043e\u0439 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043d\u0435\u0442 \u2014 tree shaking \u0443 \u043d\u0438\u0445 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0433\u0440\u0430\u0444\u0430 \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u0435\u0449\u0451 \u0434\u043e \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438. Rollup \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u043a\u0430\u043a\u0438\u0435 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u044b \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0432 \u0432\u044b\u0445\u043e\u0434\u043d\u043e\u0439 \u0444\u0430\u0439\u043b.<\/p>\n<h4>\u041f\u043e\u0431\u043e\u0447\u043d\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 scope hoisting \u2014 \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u0434\u0430<\/h4>\n<p>Scope hoisting \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u0435\u0442 \u043c\u043e\u0434\u0443\u043b\u0438 \u0432 \u043a\u0430\u0436\u0434\u044b\u0439 entry. \u042d\u0442\u043e \u0434\u0430\u0451\u0442 \u0447\u0438\u0441\u0442\u044b\u0439 tree shaking, \u043d\u043e \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u043a\u043e\u0434 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0444\u0430\u0439\u043b\u0430\u0445. \u0412\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0432\u043e\u043f\u0440\u043e\u0441: \u0430 \u043d\u0435 \u043b\u043e\u043c\u0430\u0435\u0442 \u043b\u0438 \u044d\u0442\u043e \u0441\u0438\u043d\u0433\u043b\u0442\u043e\u043d\u044b \u0438 \u043e\u0431\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435?<\/p>\n<details class=\"spoiler\">\n<summary>\u0420\u0430\u0437\u0431\u043e\u0440: \u043a\u0430\u043a webpack \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0441\u0438\u043d\u0433\u043b\u0442\u043e\u043d\u044b \u043f\u0440\u0438 \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438<\/summary>\n<div class=\"spoiler__content\">\n<p>\u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0442\u0440\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043e\u0431\u0449\u0438\u0439 <code>shared-state.ts<\/code>:<\/p>\n<pre><code class=\"typescript\">\/\/ shared-state.ts                          \u2014 \u043e\u0431\u0449\u0438\u0439 \u043c\u043e\u0434\u0443\u043b\u044cexport const testMap = new Map&lt;string, string&gt;()\/\/ page1.ts \u2014 \u043f\u0438\u0448\u0435\u0442 \u0432 Mapimport { testMap } from '.\/shared-state'testMap.set('page', 'page1')\/\/ page2.ts \u2014 \u0447\u0438\u0442\u0430\u0435\u0442 \u0438\u0437 Mapimport { testMap } from '.\/shared-state'console.log('Page 2:', testMap.get('page'))  \/\/ 'page1' \u2014 \u0435\u0441\u043b\u0438 \u0441\u0438\u043d\u0433\u043b\u0442\u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0441\u0431\u043e\u0440\u043a\u0438 <code>new Map()<\/code> \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0447\u0430\u043d\u043a\u0430 \u2014 \u0432 <code>503.chunk.js<\/code> \u0438 \u0432 <code>570.chunk.js<\/code>. \u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u0430\u043a \u0434\u0432\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 <code>new Map()<\/code>.<\/p>\n<p>\u041d\u043e webpack \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0432\u044b\u0437\u043e\u0432\u0435 <code>require(564)<\/code> \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0444\u0430\u0431\u0440\u0438\u043a\u0443 \u043c\u043e\u0434\u0443\u043b\u044f \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 <code>__webpack_module_cache__<\/code>. \u041a\u043e\u0433\u0434\u0430 page2 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u0442\u043e\u0442 \u0436\u0435 \u043c\u043e\u0434\u0443\u043b\u044c 564 \u2014 webpack \u0431\u0435\u0440\u0451\u0442 \u0435\u0433\u043e \u0438\u0437 \u043a\u044d\u0448\u0430, <code>new Map<\/code> \u0432\u0442\u043e\u0440\u043e\u0439 \u0440\u0430\u0437 \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f. <strong>\u041a\u043e\u0434 \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438, \u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043e\u0434\u0438\u043d \u0440\u0430\u0437. \u0421\u0438\u043d\u0433\u043b\u0442\u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.<\/strong><\/p>\n<\/div>\n<\/details>\n<p>\u0415\u0441\u043b\u0438 \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0435 \u0443\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442 \u2014 <code>splitChunks<\/code> \u0441 <code>minSize: 0<\/code> \u0432\u044b\u043d\u043e\u0441\u0438\u0442 \u043e\u0431\u0449\u0438\u0439 \u043a\u043e\u0434 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0447\u0430\u043d\u043a, \u043e\u0434\u0438\u043d \u043d\u0430 \u0432\u0441\u0435\u0445. \u041d\u043e \u0442\u043e\u0433\u0434\u0430 \u044d\u0442\u043e\u0442 \u0447\u0430\u043d\u043a \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u0441\u0435 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u044b \u0438 tree shaking \u043d\u0430 \u043d\u0451\u043c \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u2014 \u0442\u043e\u0442 \u0436\u0435 \u043a\u043e\u043c\u043f\u0440\u043e\u043c\u0438\u0441\u0441 \u0447\u0442\u043e \u0443 rollup.<\/p>\n<h3>\u041f\u043e\u0447\u0435\u043c\u0443 rollup \u0438 vite \u043b\u043e\u043c\u0430\u044e\u0442\u0441\u044f \u043d\u0430 single file<\/h3>\n<p>\u0415\u0441\u043b\u0438 tree shaking \u0443 rollup \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0433\u0440\u0430\u0444\u0430 \u2014 \u043f\u043e\u0447\u0435\u043c\u0443 single file \u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f?<\/p>\n<p>\u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043a\u043e\u0433\u0434\u0430 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b (<code>constants-single-file.ts<\/code>) \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 entry (page1, page2, page3), rollup \u0432\u044b\u043d\u043e\u0441\u0438\u0442 \u0435\u0433\u043e \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 shared chunk. \u042d\u0442\u043e\u0442 shared chunk \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u0441\u0435 6 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u043e\u0432, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0440\u0430\u0437\u043d\u044b\u0435:<\/p>\n<pre><code class=\"javascript\">\/\/ rollup dist\/single\/shared-constants-single-file.js \u2014 shared chunkconst e = \"value_a...\", a = { name: \"config_a\", ... };const n = \"value_b...\", o = { name: \"config_b\", ... };  \/\/ page1 \u044d\u0442\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u043econst s = \"value_c...\", t = { name: \"config_c\", ... };  \/\/ \u0438 \u044d\u0442\u043e \u0442\u043e\u0436\u0435export { e as C, a, n as b, o as c, s as d, t as e };   \/\/ \u043d\u043e \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432\u0441\u0451<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>Shared chunk \u2014 \u044d\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 JS-\u0444\u0430\u0439\u043b, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0430\u043d\u0434\u043b\u0435\u0440 \u0432\u044b\u043d\u043e\u0441\u0438\u0442 \u043a\u043e\u0434, \u043e\u0431\u0449\u0438\u0439 \u0434\u043b\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446. \u041a\u0430\u0436\u0434\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0435\u0433\u043e \u0438 \u0431\u0435\u0440\u0451\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u043e\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043d\u043e \u0441\u0430\u043c \u0444\u0430\u0439\u043b \u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f \u0446\u0435\u043b\u0438\u043a\u043e\u043c \u2014 \u043c\u0451\u0440\u0442\u0432\u044b\u0439 \u043a\u043e\u0434 \u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440.<\/p>\n<p>Webpack \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u0438\u043d\u0430\u0447\u0435 \u2014 \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u0435\u0442 \u043a\u043e\u0434 \u0432 \u043a\u0430\u0436\u0434\u044b\u0439 entry \u0447\u0435\u0440\u0435\u0437 scope hoisting, \u0430 terser \u0432\u044b\u0447\u0438\u0449\u0430\u0435\u0442 \u043b\u0438\u0448\u043d\u0435\u0435 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e. \u041a\u0430\u0436\u0434\u044b\u0439 entry \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0443\u0436\u043d\u043e\u0435.<\/p>\n<p>\u0412 barrel-\u043a\u0435\u0439\u0441\u0435 rollup \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u2014 \u0442\u0440\u0435\u0439\u0441\u0438\u0442 \u0447\u0435\u0440\u0435\u0437 <code>index.ts<\/code> \u0434\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0443\u0436\u043d\u044b\u0435. Shared chunk \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0444\u0430\u0439\u043b\u044b \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u0438 \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0442\u044f\u043d\u0443\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043f\u0435\u0440\u0435\u0441\u0435\u043a\u0430\u044e\u0442\u0441\u044f.<\/p>\n<h3>\u041f\u043e\u0447\u0435\u043c\u0443 esbuild \u043b\u043e\u043c\u0430\u0435\u0442 \u0438 barrel \u0442\u043e\u0436\u0435<\/h3>\n<p>esbuild \u2014 \u0441\u0430\u043c\u044b\u0439 \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0438\u0437 \u0432\u0441\u0435\u0445, \u043d\u043e \u0430\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0451\u0442 shared chunks. \u0418 \u0434\u043b\u044f single file, \u0438 \u0434\u043b\u044f barrel \u0432\u0435\u0441\u044c \u043e\u0431\u0449\u0438\u0439 \u043a\u043e\u0434 \u0443\u0435\u0437\u0436\u0430\u0435\u0442 \u0432 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b:<\/p>\n<pre><code class=\"javascript\">\/\/ esbuild dist\/separate\/shared-chunk-X3DOSE65.js \u2014 \u0412\u0421\u0415 6 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u043e\u0432 \u0432 \u043e\u0434\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435var e=\"value_a...\",_={name:\"config_a\",...};var o=\"value_b...\",t={name:\"config_b\",...};  \/\/ \u2190 \u043d\u0435 \u043d\u0443\u0436\u0435\u043d page1, \u043d\u043e \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u0437\u0434\u0435\u0441\u044cvar r=\"value_c...\",a={name:\"config_c\",...};  \/\/ \u2190 \u0438 \u044d\u0442\u043e \u0442\u043e\u0436\u0435export{e as a,_ as b,o as c,t as d,r as e,a as f};<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0421 direct-\u0438\u043c\u043f\u043e\u0440\u0442\u0430\u043c\u0438 shared chunk \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u2014 \u043a\u0430\u0436\u0434\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0432\u0438\u0434\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u043e\u0439 \u0444\u0430\u0439\u043b.<\/p>\n<h3>\u041f\u043e\u0447\u0435\u043c\u0443 Next.js (webpack) \u043b\u043e\u043c\u0430\u0435\u0442 tree shaking \u2014 \u0438 \u044d\u0442\u043e \u043d\u0435 &#8216;use client&#8217;<\/h3>\n<p>\u042d\u0442\u043e \u0431\u044b\u043b\u043e \u0441\u0430\u043c\u043e\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435 \u0432 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0438. \u041f\u0435\u0440\u0432\u0430\u044f \u043c\u044b\u0441\u043b\u044c \u2014 \u0432\u0438\u043d\u043e\u0432\u0430\u0442 <code>'use client'<\/code>, \u0433\u0440\u0430\u043d\u0438\u0446\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043c\u0435\u0448\u0430\u0435\u0442 scope hoisting. \u041d\u043e \u043d\u0435\u0442 \u2014 <strong>\u043d\u0430 Pages Router, \u0433\u0434\u0435 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e <\/strong><code><strong>'use client'<\/strong><\/code><strong> \u043d\u0435\u0442, \u043a\u0430\u0440\u0442\u0438\u043d\u0430 \u0440\u043e\u0432\u043d\u043e \u0442\u0430\u043a\u0430\u044f \u0436\u0435<\/strong>.<\/p>\n<p>\u042f \u043f\u043e\u043b\u0435\u0437 \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 Next.js \u0438 \u043f\u043e\u0432\u0435\u0441\u0438\u043b \u043e\u0442\u043b\u0430\u0434\u043e\u0447\u043d\u044b\u0435 \u0445\u0443\u043a\u0438 \u043d\u0430 webpack-\u043a\u043e\u043d\u0444\u0438\u0433. \u0412\u043e\u0442 \u0447\u0442\u043e \u0432\u044b\u044f\u0441\u043d\u0438\u043b\u043e\u0441\u044c:<\/p>\n<p><strong>Next.js \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 <\/strong><code><strong>ModuleConcatenationPlugin<\/strong><\/code><strong>.<\/strong> \u0412 \u0444\u0430\u0439\u043b\u0435 <a href=\"https:\/\/github.com\/vercel\/next.js\/blob\/canary\/packages\/next\/src\/build\/webpack-config.ts\" rel=\"noopener noreferrer nofollow\">webpack-config.js<\/a> \u043d\u0435\u0442 \u043d\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043d\u0438\u044f <code>concatenateModules<\/code> \u0438\u043b\u0438 <code>ModuleConcatenationPlugin<\/code>. \u041d\u043e\u043b\u044c.<\/p>\n<p>\u041e\u043a\u0435\u0439, \u043c\u043e\u0436\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0440\u0443\u043a\u0430\u043c\u0438? \u0414\u043e\u0431\u0430\u0432\u0438\u043b \u0447\u0435\u0440\u0435\u0437 <code>next.config.js<\/code>:<\/p>\n<pre><code class=\"typescript\">webpack(config) {  config.optimization.concatenateModules = true  return config}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u2014 0 \u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u0441\u043a\u043e\u043d\u043a\u0430\u0442\u0435\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u043e. Bailout \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c. Webpack \u043f\u0440\u044f\u043c\u043e \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043f\u043e\u0447\u0435\u043c\u0443:<\/p>\n<pre><code class=\"bash\">ModuleConcatenation bailout: Cannot concat with shared\/constants-single-file.ts:  Module is referenced from different chunks by these modules:  app\/single\/page2\/page.tsx, app\/single\/page3\/page.tsx<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p><strong>\u041a\u043e\u0440\u043d\u0435\u0432\u0430\u044f \u043f\u0440\u0438\u0447\u0438\u043d\u0430: Next.js \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 chunk entry \u043d\u0430 \u043a\u0430\u0436\u0434\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.<\/strong> \u0412 Pages Router \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 <code>next-client-pages-loader<\/code>, \u0432 App Router \u2014 <code>next-flight-client-entry-loader<\/code>. \u041a\u043e\u0433\u0434\u0430 <code>constants-single-file.ts<\/code> \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438\u0437 page1, page2, page3 \u2014 \u043c\u043e\u0434\u0443\u043b\u044c \u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f referenced \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0447\u0430\u043d\u043a\u043e\u0432.<\/p>\n<p><code>ModuleConcatenationPlugin<\/code> \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0438\u043d\u043b\u0430\u0439\u043d\u0438\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0441\u044b\u043b\u0430\u044e\u0442\u0441\u044f \u0438\u0437 \u0440\u0430\u0437\u043d\u044b\u0445 \u0447\u0430\u043d\u043a\u043e\u0432 \u2014 \u0435\u043c\u0443 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0431\u044b \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434, \u0430 \u043e\u043d \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0434\u0435\u043b\u0430\u0435\u0442. \u0411\u0435\u0437 \u043a\u043e\u043d\u043a\u0430\u0442\u0435\u043d\u0430\u0446\u0438\u0438 \u043c\u043e\u0434\u0443\u043b\u0438 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u043e\u0431\u0451\u0440\u0442\u043a\u0430\u0445, terser \u043d\u0435 \u0432\u0438\u0434\u0438\u0442 \u0447\u0442\u043e \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u044b \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f, \u043c\u0451\u0440\u0442\u0432\u044b\u0439 \u043a\u043e\u0434 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f.<\/p>\n<p>\u0412 \u0447\u0438\u0441\u0442\u043e\u043c webpack \u0442\u0435 \u0436\u0435 3 entry, \u0442\u043e\u0442 \u0436\u0435 \u0444\u0430\u0439\u043b. \u041d\u043e \u0442\u0430\u043c <code>splitChunks.minSize = 20000<\/code> (\u043f\u043e\u0440\u043e\u0433 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e) \u2014 \u0444\u0430\u0439\u043b \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439, \u043d\u0435 \u0434\u043e\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u0442, webpack \u043d\u0435 \u0432\u044b\u043d\u043e\u0441\u0438\u0442 \u0435\u0433\u043e \u0432 shared chunk, \u0430 \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u0435\u0442 \u0432 \u043a\u0430\u0436\u0434\u044b\u0439 entry. \u0414\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u043a\u043e\u043d\u043a\u0430\u0442\u0435\u043d\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u2192 terser \u0432\u044b\u0447\u0438\u0449\u0430\u0435\u0442. Next.js \u0442\u0430\u043a \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u2014 \u0435\u0433\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u0438 \u0441\u0440\u0430\u0437\u0443 \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 chunk entries \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0438 \u043c\u043e\u0434\u0443\u043b\u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0448\u0430\u0440\u044f\u0442\u0441\u044f \u043c\u0435\u0436\u0434\u0443 \u043d\u0438\u043c\u0438.<\/p>\n<p>Turbopack (Next.js 16) \u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e \u0440\u0435\u0448\u0430\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u2014 barrel \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442, \u0442\u0440\u0435\u0439\u0441\u0438\u0442 \u0447\u0435\u0440\u0435\u0437 <code>index.ts<\/code> \u0434\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432, \u043a\u0430\u043a rollup. \u041d\u043e single file \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u043b\u043e\u043c\u0430\u0435\u0442 \u2014 \u0442\u0430 \u0436\u0435 \u0438\u0441\u0442\u043e\u0440\u0438\u044f \u0441 shared \u043c\u043e\u0434\u0443\u043b\u0435\u043c.<\/p>\n<h3>\u041c\u043e\u0436\u043d\u043e \u043b\u0438 \u043f\u043e\u0447\u0438\u043d\u0438\u0442\u044c tree shaking \u0432 Next.js?<\/h3>\n<p>\u0422\u0435\u043e\u0440\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0435\u0441\u0442\u044c \u0442\u0440\u0438 \u043f\u0443\u0442\u0438:<\/p>\n<p><strong>\u0414\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u0438 \u0432 \u043a\u0430\u0436\u0434\u044b\u0439 entry<\/strong> \u2014 \u043a\u0430\u043a \u0434\u0435\u043b\u0430\u0435\u0442 \u0447\u0438\u0441\u0442\u044b\u0439 webpack \u0441 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u043c\u0438 \u0444\u0430\u0439\u043b\u0430\u043c\u0438. \u041a\u043e\u043d\u043a\u0430\u0442\u0435\u043d\u0430\u0446\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, terser \u0432\u044b\u0447\u0438\u0449\u0430\u0435\u0442. \u041d\u043e Next.js \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u0448\u0430\u0440\u0438\u0442 \u043c\u043e\u0434\u0443\u043b\u0438 \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438 \u2014 \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 page1 \u2192 page2 shared chunk \u0443\u0436\u0435 \u0432 \u043a\u0435\u0448\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u0414\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442: \u043a\u0430\u0436\u0434\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0442\u044f\u0436\u0435\u043b\u0435\u0435, \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0442\u043e\u0442 \u0436\u0435 \u043a\u043e\u0434 \u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f \u0437\u0430\u043d\u043e\u0432\u043e.<\/p>\n<p><strong>Tree shaking \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0433\u0440\u0430\u0444\u0430<\/strong> \u2014 \u0440\u0435\u0437\u0430\u0442\u044c \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u044b \u043f\u0440\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0438 \u0433\u0440\u0430\u0444\u0430, \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u043e\u0442 concat + terser. Turbopack \u0442\u0430\u043a \u0438 \u0434\u0435\u043b\u0430\u0435\u0442, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 barrel \u0443 \u043d\u0435\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u041d\u043e \u044d\u0442\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u044b\u0432\u0430\u043d\u0438\u0435 core-\u043b\u043e\u0433\u0438\u043a\u0438 webpack, \u0438 single file \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u043d\u0435 \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f.<\/p>\n<p><strong>Per-entry \u043a\u043e\u043f\u0438\u0438 \u043c\u043e\u0434\u0443\u043b\u044f<\/strong> \u2014 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u043c\u043e\u0434\u0443\u043b\u044f \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e entry \u0441 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0443\u0436\u043d\u044b\u043c\u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430\u043c\u0438. \u0424\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0432 webpack \u043d\u0435\u0442 \u0438 \u0432\u0440\u044f\u0434 \u043b\u0438 \u043f\u043e\u044f\u0432\u0438\u0442\u0441\u044f.<\/p>\n<p>\u041d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435:<\/p>\n<ul>\n<li>\n<p><strong>\u0411\u043e\u043b\u044c\u0448\u0438\u0435 barrel-\u044b \u0438\u0437 npm<\/strong> (<code>@mui\/icons-material<\/code>, <code>lodash-es<\/code>) \u2014 Next.js \u0440\u0435\u0448\u0430\u0435\u0442 \u0447\u0435\u0440\u0435\u0437 <a href=\"https:\/\/nextjs.org\/docs\/app\/api-reference\/config\/next-config-js\/optimizePackageImports\" rel=\"noopener noreferrer nofollow\">optimizePackageImports<\/a>:<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"javascript\">\/\/ next.config.jsmodule.exports = {  experimental: {    optimizePackageImports: ['@mui\/icons-material', 'lodash-es']  }}\/\/ \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442: import { Add } from '@mui\/icons-material'\/\/         \u2192 import Add from '@mui\/icons-material\/Add'<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<ul>\n<li>\n<p><strong>\u0421\u0432\u043e\u0438 barrel-\u044b<\/strong> \u2014 direct import \u0438\u043b\u0438 \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u0439 \u043d\u0430 \u043c\u0435\u043b\u043a\u0438\u0435 \u0433\u0440\u0443\u043f\u043f\u044b \u043f\u043e \u0444\u0438\u0447\u0430\u043c<\/p>\n<\/li>\n<li>\n<p><strong>\u041c\u0430\u0441\u0448\u0442\u0430\u0431 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/strong> \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 barrel-\u0430. 6 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442 \u2014 \u043d\u0435\u0437\u0430\u043c\u0435\u0442\u043d\u043e. \u041d\u043e \u0435\u0441\u043b\u0438 \u0432 \u043e\u0434\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 100 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u043e\u0432 \u0441 \u0442\u044f\u0436\u0451\u043b\u044b\u043c\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438 \u2014 \u043a\u0430\u0436\u0434\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0442\u0430\u0449\u0438\u0442 \u0432\u0441\u0451, \u0438 \u044d\u0442\u043e \u0443\u0436\u0435 \u043e\u0449\u0443\u0442\u0438\u043c\u043e<\/p>\n<\/li>\n<\/ul>\n<h3>\u0422\u0440\u0435\u0439\u0434\u043e\u0444\u0444\u044b \u2014 \u043d\u0435\u0442 \u0435\u0434\u0438\u043d\u043e\u0433\u043e \u043b\u0443\u0447\u0448\u0435\u0433\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u044f<\/h3>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0431\u0430\u043d\u0434\u043b\u0435\u0440 \u0434\u0435\u043b\u0430\u0435\u0442 \u0441\u0432\u043e\u0439 \u0432\u044b\u0431\u043e\u0440, \u0438 \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0432\u044b\u0431\u043e\u0440\u0430 \u0435\u0441\u0442\u044c \u0446\u0435\u043d\u0430:<\/p>\n<p><strong>webpack \/ rspack<\/strong> \u2014 \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u0435\u0442 \u043a\u043e\u0434 \u0432 \u043a\u0430\u0436\u0434\u044b\u0439 entry, concat + terser \u0432\u044b\u0447\u0438\u0449\u0430\u0435\u0442 \u043c\u0451\u0440\u0442\u0432\u043e\u0435. Tree shaking \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 \u0432\u0441\u0435\u0445 \u043a\u0435\u0439\u0441\u0430\u0445. \u041d\u043e \u0435\u0441\u0442\u044c \u043f\u043e\u0440\u043e\u0433 <code>splitChunks.minSize<\/code> (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e 20kb) \u2014 \u0435\u0441\u043b\u0438 \u043e\u0431\u0449\u0438\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0432\u044b\u0440\u0430\u0441\u0442\u0430\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u0440\u043e\u0433\u0430, webpack \u0432\u044b\u043d\u043e\u0441\u0438\u0442 \u0435\u0433\u043e \u0432 shared chunk \u0438 tree shaking \u043d\u0430 \u043d\u0451\u043c \u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f. \u041f\u043b\u044e\u0441 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0442 <code>minimize<\/code> \u2014 \u0431\u0435\u0437 \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0432\u044b\u0440\u0435\u0437\u0430\u0435\u0442\u0441\u044f.<\/p>\n<p><strong>rollup \/ vite<\/strong> \u2014 tree shaking \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0433\u0440\u0430\u0444\u0430, \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438. \u041d\u043e \u0441\u043e\u0437\u0434\u0430\u044e\u0442 shared chunks \u0434\u043b\u044f \u0444\u0430\u0439\u043b\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 entry. Shared chunk \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u0441\u0435 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u044b \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043f\u043e\u0442\u0440\u0435\u0431\u0438\u0442\u0435\u043b\u0435\u0439 \u2014 \u043c\u0451\u0440\u0442\u0432\u044b\u0439 \u043a\u043e\u0434 \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p><strong>esbuild<\/strong> \u2014 \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0432\u0441\u0435\u0445, \u043d\u043e \u0430\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0435 shared chunks \u0438 \u0434\u043b\u044f single file, \u0438 \u0434\u043b\u044f barrel. Tree shaking \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441 direct imports.<\/p>\n<p><strong>Next.js (webpack)<\/strong> \u2014 multi-entry \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u0440\u0430\u0434\u0438 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u043c\u0438. Shared chunk \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u043b\u0441\u044f \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u2014 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u043d\u0430 \u0434\u0440\u0443\u0433\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u0434. \u0426\u0435\u043d\u0430 \u2014 tree shaking \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 shared \u043c\u043e\u0434\u0443\u043b\u044f\u0445, \u043c\u0451\u0440\u0442\u0432\u044b\u0439 \u043a\u043e\u0434 \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u0432 \u0431\u0430\u043d\u0434\u043b.<\/p>\n<h3>\u0412\u044b\u0432\u043e\u0434<\/h3>\n<p><strong>\u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u043e\u0432\u0435\u0442:<\/strong> <code>import { X } from '.\/constants\/a'<\/code> \u0432\u043c\u0435\u0441\u0442\u043e <code>import { X } from '.\/constants'<\/code>. Direct import \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0443 \u0432\u0441\u0435\u0445 7 \u0431\u0430\u043d\u0434\u043b\u0435\u0440\u043e\u0432 \u2014 \u044d\u0442\u043e \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431, \u0433\u0434\u0435 tree shaking \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d.<\/p>\n<p>\u041d\u043e \u0443 \u043c\u0435\u043d\u044f \u043e\u0441\u0442\u0430\u043b\u0441\u044f \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u0439 \u0432\u043e\u043f\u0440\u043e\u0441. Webpack \u043f\u043e\u0448\u0451\u043b \u043f\u043e \u043f\u0443\u0442\u0438 scope hoisting + terser \u2014 \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u0435\u0442 \u043c\u043e\u0434\u0443\u043b\u0438, \u043f\u043e\u0442\u043e\u043c \u0432\u044b\u0447\u0438\u0449\u0430\u0435\u0442 \u043c\u0451\u0440\u0442\u0432\u043e\u0435. Rollup, vite, esbuild \u043f\u043e\u0448\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u043c \u043f\u0443\u0442\u0451\u043c \u2014 tree shaking \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0433\u0440\u0430\u0444\u0430, shared chunks \u0432\u043c\u0435\u0441\u0442\u043e \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u041f\u043e\u0447\u0435\u043c\u0443? \u0415\u0441\u0442\u044c \u043b\u0438 \u0444\u0443\u043d\u0434\u0430\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0440\u0438\u0447\u0438\u043d\u0430, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0434\u0440\u0443\u0433\u0438\u0435 \u0431\u0430\u043d\u0434\u043b\u0435\u0440\u044b \u043d\u0435 \u043f\u043e\u0448\u043b\u0438 \u043f\u043e \u043f\u0443\u0442\u0438 webpack? \u0418\u043b\u0438 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0430\u0437\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u0440\u043e\u043c\u0438\u0441\u0441\u044b? \u0418 \u043c\u043e\u0436\u043d\u043e \u043b\u0438 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043b\u0443\u0447\u0448\u0435\u0435 \u0438\u0437 \u043e\u0431\u043e\u0438\u0445 \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u0432 \u2014 tree shaking \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0433\u0440\u0430\u0444\u0430 \u0431\u0435\u0437 shared chunks \u0441 \u043c\u0451\u0440\u0442\u0432\u044b\u043c \u043a\u043e\u0434\u043e\u043c?<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0432\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u0435 \u043d\u0430\u0434 \u0431\u0430\u043d\u0434\u043b\u0435\u0440\u0430\u043c\u0438 \u0438\u043b\u0438 \u0433\u043b\u0443\u0431\u043e\u043a\u043e \u043a\u043e\u043f\u0430\u043b\u0438 \u044d\u0442\u0443 \u0442\u0435\u043c\u0443 \u2014 \u0431\u0443\u0434\u0443 \u0440\u0430\u0434 \u0443\u0441\u043b\u044b\u0448\u0430\u0442\u044c \u0432\u0430\u0448\u0435 \u043c\u043d\u0435\u043d\u0438\u0435 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445.<\/p>\n<\/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\/1024404\/\">https:\/\/habr.com\/ru\/articles\/1024404\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u041a\u0430\u043a \u0432\u0441\u0451 \u043d\u0430\u0447\u0430\u043b\u043e\u0441\u044c\u041f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435, \u0442\u0430\u043a \u0434\u043e\u043b\u0436\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u041d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0431\u0430\u043d\u0434\u043b\u0435\u0440\u0430 \u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0438\u043c\u043f\u043e\u0440\u0442\u0430 \u2014 \u0438 \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e \u044f \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u043b.\u0412 \u0430\u0432\u0433\u0443\u0441\u0442\u0435 2024 \u044f \u043d\u0430\u0442\u043a\u043d\u0443\u043b\u0441\u044f \u043d\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0432 \u0440\u0430\u0431\u043e\u0447\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043d\u0430 Next.js. \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0438 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b \u0438\u0437 \u043e\u0431\u0449\u0435\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u0447\u0435\u0440\u0435\u0437 barrel (index.ts \u0441 \u0440\u0435\u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430\u043c\u0438). \u041a\u0430\u0436\u0434\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0430 2-3 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043d\u043e \u0432 \u0431\u0430\u043d\u0434\u043b \u043f\u043e\u043f\u0430\u0434\u0430\u043b\u043e \u0432\u0441\u0451 \u2014 \u0434\u0435\u0441\u044f\u0442\u043a\u0438 \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u043e\u0432. \u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u043a\u043e\u043b\u043e\u0441\u0441\u0430\u043b\u044c\u043d\u043e\u0439: \u043a\u043e\u0433\u0434\u0430 \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b sideEffects: false \u0438 \u043f\u0435\u0440\u0435\u0448\u0451\u043b \u043d\u0430 direct export \u2014 \u0431\u0430\u043d\u0434\u043b \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u043b\u0441\u044f \u0432 \u0434\u0432\u0430 \u0440\u0430\u0437\u0430.\u042f \u0437\u0430\u0432\u0451\u043b issue \u043d\u0430 GitHub, \u043f\u043e\u043a\u043e\u043f\u0430\u043b\u0441\u044f, \u043d\u0430\u0448\u0451\u043b \u043e\u0431\u0445\u043e\u0434\u043d\u043e\u0439 \u043f\u0443\u0442\u044c \u0438 \u0437\u0430\u043a\u0440\u044b\u043b. \u041d\u043e \u0432\u043e\u043f\u0440\u043e\u0441 \u043d\u0435 \u043e\u0442\u043f\u0443\u0441\u043a\u0430\u043b: \u044d\u0442\u043e Next.js \u0432\u0438\u043d\u043e\u0432\u0430\u0442? Webpack? \u0418\u043b\u0438 barrel \u0444\u0430\u0439\u043b\u044b \u0441\u0430\u043c\u0438 \u043f\u043e \u0441\u0435\u0431\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430? \u0421\u043f\u0443\u0441\u0442\u044f \u043f\u043e\u043b\u0442\u043e\u0440\u0430 \u0433\u043e\u0434\u0430 \u0440\u0435\u0448\u0438\u043b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u043e\u0441\u043d\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u2014 \u0441\u043e\u0431\u0440\u0430\u043b \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435, \u043f\u0440\u043e\u0433\u043d\u0430\u043b \u043e\u0434\u043d\u0438 \u0438 \u0442\u0435 \u0436\u0435 \u0442\u0435\u0441\u0442\u044b \u043d\u0430 7 \u0431\u0430\u043d\u0434\u043b\u0435\u0440\u0430\u0445 \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u043b \u0447\u0442\u043e \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u0432 \u0432\u044b\u0445\u043e\u0434\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b.\u0421\u0440\u0430\u0437\u0443 \u043e\u0433\u043e\u0432\u043e\u0440\u044e\u0441\u044c: \u044f \u043d\u0435 \u043f\u0440\u0435\u0442\u0435\u043d\u0434\u0443\u044e \u043d\u0430 \u0438\u0441\u0442\u0438\u043d\u0443. \u042d\u0442\u043e \u043b\u0438\u0447\u043d\u043e\u0435 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u044f \u043f\u0440\u043e\u0432\u0451\u043b \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u0442\u0435\u043c\u0435 \u0434\u043b\u044f \u0441\u0435\u0431\u044f. \u0414\u0435\u043b\u044e\u0441\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430\u043c\u0438 \u0432 \u043d\u0430\u0434\u0435\u0436\u0434\u0435 \u0443\u0437\u043d\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043d\u043e\u0432\u043e\u0435 \u043e\u0442 \u043b\u044e\u0434\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0441 \u0431\u0430\u043d\u0434\u043b\u0435\u0440\u0430\u043c\u0438 \u0433\u043b\u0443\u0431\u0436\u0435. \u0415\u0441\u043b\u0438 \u0433\u0434\u0435-\u0442\u043e \u043e\u0448\u0438\u0431\u0441\u044f \u0438\u043b\u0438 \u0443\u043f\u0443\u0441\u0442\u0438\u043b \u0432\u0430\u0436\u043d\u043e\u0435 \u2014 \u0431\u0443\u0434\u0443 \u0440\u0430\u0434, \u0435\u0441\u043b\u0438 \u043f\u043e\u043f\u0440\u0430\u0432\u0438\u0442\u0435 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445.\u0427\u0442\u043e \u0431\u044b \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0442\u044c \u0440\u0430\u0441\u0441\u0443\u0436\u0434\u0430\u0442\u044c \u043e \u0442\u0435\u043c\u0435, \u043d\u0443\u0436\u043d\u043e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043e \u0447\u0451\u043c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c, \u0438 \u0447\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0442 \u0442\u0435 \u0438\u043b\u0438 \u0438\u043d\u044b\u0435 \u0442\u0435\u0440\u043c\u0438\u043d\u044b \u0432 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435, \u043f\u043e \u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u0447\u043d\u0451\u043c \u0441 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0431\u0430\u0437\u044b, \u0438 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u044e, \u0447\u0442\u043e \u0431\u044b \u043a\u0430\u0436\u0434\u044b\u0439 \u0447\u0438\u0442\u0430\u044e\u0449\u0438\u0439 \u043c\u043e\u0433 \u0443\u043b\u043e\u0432\u0438\u0442\u044c \u0441\u0443\u0442\u044c.\u041c\u0451\u0440\u0442\u0432\u044b\u0439 \u043a\u043e\u0434 \u0438 tree shaking\u041c\u0451\u0440\u0442\u0432\u044b\u0439 \u043a\u043e\u0434 \u2014 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0435\u0441\u0442\u044c \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430\u0445, \u043d\u043e \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f. Tree shaking \u2014 \u043a\u043e\u0433\u0434\u0430 \u0431\u0430\u043d\u0434\u043b\u0435\u0440 \u0432\u044b\u0440\u0435\u0437\u0430\u0435\u0442 \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u0434 \u0438\u0437 \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0438. \u041f\u0440\u0438\u043c\u0435\u0440:\/\/ utils.ts \u2014 4 \u0444\u0443\u043d\u043a\u0446\u0438\u0438export function formatDate() { \/* &#8230; *\/ }export function formatCurrency() { \/* &#8230; *\/ }export function parseQuery() { \/* &#8230; *\/ }export function debounce() { \/* &#8230; *\/ }\/\/ app.ts \u2014 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u0443import { formatDate } from &#8216;.\/utils&#8217;\u0421 tree shaking \u0432 \u0431\u0430\u043d\u0434\u043b \u043f\u043e\u043f\u0430\u0434\u0451\u0442 \u0442\u043e\u043b\u044c\u043a\u043e formatDate. \u0411\u0435\u0437 \u043d\u0435\u0433\u043e \u2014 \u0432\u0441\u0435 \u0447\u0435\u0442\u044b\u0440\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u043d\u0438\u0433\u0434\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f.\u0422\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u0432 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0435: \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0448\u044c \u043e\u0434\u043d\u0443 \u0438\u043a\u043e\u043d\u043a\u0443 \u0438\u0437 @mui\/icons-material (3000+ \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u043e\u0432) \u0438\u043b\u0438 pick \u0438\u0437 lodash-es (300+ \u0444\u0443\u043d\u043a\u0446\u0438\u0439) \u2014 tree shaking \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u043e, \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f, \u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u0432\u044b\u043a\u0438\u043d\u0443\u0442\u044c.\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 barrel file \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u0441 \u043d\u0438\u043c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044bBarrel file \u2014 \u044d\u0442\u043e index.ts, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0435\u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u0432\u0441\u0451 \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435:\/\/ shared\/constants\/index.ts \u2014 barrel fileexport { CONSTANT_A, CONFIG_A } from &#8216;.\/a&#8217;export { CONSTANT_B, CONFIG_B } from &#8216;.\/b&#8217;export { CONSTANT_C, CONFIG_C } from &#8216;.\/c&#8217;\u0423\u0434\u043e\u0431\u043d\u043e \u2014 \u0432\u043c\u0435\u0441\u0442\u043e \u0442\u0440\u0451\u0445 \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u0432 \u043f\u0438\u0448\u0435\u0448\u044c \u043e\u0434\u0438\u043d:import { CONSTANT_A, CONFIG_A } from &#8216;..\/shared\/constants&#8217;\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0431\u0430\u043d\u0434\u043b\u0435\u0440 \u0432\u0438\u0434\u0438\u0442 \u0438\u043c\u043f\u043e\u0440\u0442 \u0438\u0437 index.ts \u0438 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0442\u044f\u043d\u0443\u0442\u044c \u0432\u0435\u0441\u044c \u0433\u0440\u0430\u0444 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u2014 \u0432\u043a\u043b\u044e\u0447\u0430\u044f b.ts \u0438 c.ts, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u044b. \u041d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u043a\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0430\u043d\u0434\u043b\u0435\u0440 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u043b \u0432\u044b\u0440\u0435\u0437\u0430\u0442\u044c (\u044d\u0442\u043e \u0438 \u0435\u0441\u0442\u044c tree shaking \u2014 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u043c\u0451\u0440\u0442\u0432\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435), \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0432 \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u0438 \u0435\u0434\u0435\u0442 \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d.\u0418\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435: 7 \u0431\u0430\u043d\u0434\u043b\u0435\u0440\u043e\u0432, 3 \u043a\u0435\u0439\u0441\u0430\u0417\u0430\u0434\u0443\u043c\u043a\u0430 \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u2014 \u0432\u0437\u044f\u0442\u044c \u043e\u0434\u043d\u0438 \u0438 \u0442\u0435 \u0436\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u043e\u0434\u043d\u0443 \u0438 \u0442\u0443 \u0436\u0435 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u0432, \u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043a\u0430\u043a \u043a\u0430\u0436\u0434\u044b\u0439 \u0431\u0430\u043d\u0434\u043b\u0435\u0440 \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435\u043c \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0433\u043e \u043a\u043e\u0434\u0430. \u0411\u0435\u0437 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u0431\u0435\u0437 \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438, \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u043c\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440.6 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u043e\u0432 \u2014 3 \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u0441\u0442\u0440\u043e\u043a\u0438 \u0438 3 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438. \u0422\u0440\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043a\u0430\u0436\u0434\u0430\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e 2 \u0438\u0437 6. \u0415\u0441\u043b\u0438 tree shaking \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u2014 \u0432 \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0431\u0443\u0434\u0443\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0451 2 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 \u043d\u0435\u0442 \u2014 \u043f\u043e\u0442\u0430\u0449\u0438\u0442 \u0432\u0441\u0435 6.\u041e\u0434\u043d\u0438 \u0438 \u0442\u0435 \u0436\u0435 \u0434\u0430\u043d\u043d\u044b\u0435, \u0442\u0440\u0438 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0438\u043c\u043f\u043e\u0440\u0442\u0430:Single file \u2014 \u0432\u0441\u0435 6 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u043e\u0432 \u0432 \u043e\u0434\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435:\/\/ shared\/constants-single-file.tsexport const CONSTANT_A = &#8216;value_a_from_single_file&#8217;export const CONFIG_A = { name: &#8216;config_a&#8217;, value: 1, nested: { deep: true } }\/\/ &#8230; \u0438 \u0435\u0449\u0451 B, CBarrel \u2014 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u044b \u0440\u0430\u0437\u043d\u0435\u0441\u0435\u043d\u044b \u043f\u043e \u0444\u0430\u0439\u043b\u0430\u043c, \u0438\u043c\u043f\u043e\u0440\u0442 \u0447\u0435\u0440\u0435\u0437 index.ts:\/\/ shared\/constants-separate\/index.tsexport { CONSTANT_A, CONFIG_A } from &#8216;.\/a&#8217;export { CONSTANT_B, CONFIG_B } from &#8216;.\/b&#8217;export { CONSTANT_C, CONFIG_C } from &#8216;.\/c&#8217;Direct \u2014 \u0442\u0435 \u0436\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b, \u043d\u043e \u0438\u043c\u043f\u043e\u0440\u0442 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u0431\u0435\u0437 barrel:import { CONSTANT_A, CONFIG_A } from &#8216;..\/shared\/constants-separate\/a&#8217;\u041f\u0440\u043e\u0433\u043d\u0430\u043b \u043d\u0430:webpack 5 \u2014 scope hoisting + terserrspack 1 \u2014 webpack \u043d\u0430 Rust, \u0442\u043e\u0442 \u0436\u0435 APIrollup 4 \u2014 \u0437\u0430\u0442\u043e\u0447\u0435\u043d \u043f\u043e\u0434 ES-\u043c\u043e\u0434\u0443\u043b\u0438 \u0438 tree shakingvite 8 \u2014 rolldown \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0434\u043b\u044f production-\u0441\u0431\u043e\u0440\u043a\u0438esbuild 0.28 \u2014 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 Go, \u0441\u0430\u043c\u044b\u0439 \u0431\u044b\u0441\u0442\u0440\u044b\u0439Next.js 15 (webpack) \u2014 Next.js \u0441 webpack \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043cNext.js 16 (Turbopack) \u2014 Next.js \u0441 Turbopack \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e\u0412\u0441\u0451 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u2014 node analyze.js \u0441\u0442\u0430\u0432\u0438\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442 \u043a\u0430\u0436\u0434\u044b\u0439 \u0431\u0430\u043d\u0434\u043b\u0435\u0440 \u0438 \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0432\u044b\u0445\u043e\u0434\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b, \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u044f \u043a\u0430\u043a\u0438\u0435 \u043c\u0430\u0440\u043a\u0435\u0440\u044b \u043f\u043e\u043f\u0430\u043b\u0438 \u0432 \u0431\u0430\u043d\u0434\u043b.\u0420\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u0441 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435\u043c: github.com\/lykianovsky\/tree-shaking-barrel-test\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b\u041a\u0435\u0439\u0441webpackrspackrollupviteesbuildnext-webpacknext-turbopackSingle file\u2705\u2705\u274c\u274c\u274c\u274c\u274cBarrel\u2705\u2705\u2705\u2705\u274c\u274c\u2705Direct\u2705\u2705\u2705\u2705\u2705\u2705\u2705\u0413\u043b\u0430\u0432\u043d\u044b\u0439 \u0432\u044b\u0432\u043e\u0434: direct import (import { X } from &#8216;.\/constants\/a&#8217;) \u2014 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442 tree shaking \u0443 \u0432\u0441\u0435\u0445 7 \u0431\u0430\u043d\u0434\u043b\u0435\u0440\u043e\u0432. \u0422\u043e\u043b\u044c\u043a\u043e webpack \u0438 rspack \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u0442\u0440\u0435\u043c\u044f \u043a\u0435\u0439\u0441\u0430\u043c\u0438. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043b\u043e\u043c\u0430\u044e\u0442\u0441\u044f \u043d\u0430 single file, barrel, \u0438\u043b\u0438 \u043d\u0430 \u043e\u0431\u043e\u0438\u0445.\u0414\u0430\u043b\u044c\u0448\u0435 \u2014 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u044e \u043f\u043e\u0447\u0435\u043c\u0443 \u043a\u0430\u0436\u0434\u044b\u0439 \u0431\u0430\u043d\u0434\u043b\u0435\u0440 \u0432\u0435\u0434\u0451\u0442 \u0441\u0435\u0431\u044f \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a, \u0438 \u0447\u0442\u043e \u0441 \u044d\u0442\u0438\u043c \u0434\u0435\u043b\u0430\u0442\u044c.\u041a\u0430\u043a webpack \u0434\u0435\u043b\u0430\u0435\u0442 tree shaking \u2014 \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u0434\u0432\u0430 \u0448\u0430\u0433\u0430, \u0430 \u043d\u0435 \u043e\u0434\u0438\u043dWebpack \u043d\u0435 \u0432\u044b\u0440\u0435\u0437\u0430\u0435\u0442 \u043c\u0451\u0440\u0442\u0432\u044b\u0439 \u043a\u043e\u0434 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e. \u041e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u0434\u0432\u0430 \u044d\u0442\u0430\u043f\u0430:webpack:  [\u043c\u043e\u0434\u0443\u043b\u0438] \u2192 scope hoisting (concat) \u2192 \u0432\u0441\u0451 \u0432 \u043e\u0434\u043d\u043e\u043c \u0441\u043a\u043e\u0443\u043f\u0435 \u2192 terser \u2192 \u043c\u0451\u0440\u0442\u0432\u044b\u0439 \u043a\u043e\u0434 \u0443\u0434\u0430\u043b\u0451\u043d \u2705rollup:   [\u043c\u043e\u0434\u0443\u043b\u0438] \u2192 \u0430\u043d\u0430\u043b\u0438\u0437 \u0433\u0440\u0430\u0444\u0430 \u2192 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u043e\u0435 \u2192 \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f (\u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e) \u2705Next.js:  [\u043c\u043e\u0434\u0443\u043b\u0438] \u2192 shared chunks (multi-entry) \u2192 concat \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u0435\u043d \u2192 terser \u043d\u0435 \u0432\u0438\u0434\u0438\u0442 \u043c\u0451\u0440\u0442\u0432\u043e\u0435 \u274c\u0428\u0430\u0433 1 \u2014 scope hoisting. ModuleConcatenationPlugin \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u0442 \u0432\u0441\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u0432 \u043e\u0434\u0438\u043d \u0441\u043a\u043e\u0443\u043f. \u0412\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0444\u0430\u0439\u043b \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e, webpack \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442 \u0432\u0435\u0441\u044c \u043a\u043e\u0434 \u0432 \u043e\u0434\u043d\u043e \u043c\u0435\u0441\u0442\u043e. \u041d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043c\u0451\u0440\u0442\u0432\u044b\u0439 \u043a\u043e\u0434 \u0435\u0449\u0451 \u043d\u0438\u043a\u0443\u0434\u0430 \u043d\u0435 \u0434\u0435\u043b\u0441\u044f \u2014 \u0432\u0441\u0435 6 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u043e\u0432 \u043d\u0430 \u043c\u0435\u0441\u0442\u0435:\/\/ webpack dist\/separate\/page1.js \u2014 minimize: false(() =&gt; {  &#171;use strict&#187;;  \/\/ ..\/shared\/constants-separate\/a.ts  const CONSTANT_A = &#8216;value_a_from_separate_file&#8217;;  const CONFIG_A = { name: &#8216;config_a&#8217;, value: 1, nested: { deep: true } };  \/\/ ..\/shared\/constants-separate\/b.ts        \u2190 \u043c\u0451\u0440\u0442\u0432\u044b\u0439 \u043a\u043e\u0434  const CONSTANT_B = &#8216;value_b_from_separate_file&#8217;;  const CONFIG_B = { name: &#8216;config_b&#8217;, value: 2, nested: { deep: false } };  \/\/ ..\/shared\/constants-separate\/c.ts        \u2190 \u043c\u0451\u0440\u0442\u0432\u044b\u0439 \u043a\u043e\u0434  const CONSTANT_C = &#8216;value_c_from_separate_file&#8217;;  const CONFIG_C = { name: &#8216;config_c&#8217;, value: 3, nested: { deep: true } };  \/\/ .\/src\/separate-files\/page1.ts  console.log(&#8216;Page 1:&#8217;, CONSTANT_A, CONFIG_A);})();\u0428\u0430\u0433 2 \u2014 terser. \u041c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u0432\u0438\u0434\u0438\u0442 \u0447\u0442\u043e CONSTANT_B, CONFIG_B, CONSTANT_C, CONFIG_C \u043d\u0438\u0433\u0434\u0435 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u2014 \u0438 \u0432\u044b\u0440\u0435\u0437\u0430\u0435\u0442:\/\/ webpack dist\/separate\/page1.js \u2014 minimize: true (\u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e)(()=&gt;{&#171;use strict&#187;;console.log(&#171;Page 1:&#187;,&#187;value_a_from_separate_file&#187;,{name:&#187;config_a&#187;,value:1,nested:{deep:!0}})})();\u0427\u0438\u0441\u0442\u043e. \u0422\u043e\u043b\u044c\u043a\u043e \u043d\u0443\u0436\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435.\u0412\u0430\u0436\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442: \u043e\u0442\u043a\u043b\u044e\u0447\u0438 minimize: false \u2014 \u0438 tree shaking \u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f. Terser \u043d\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f, \u0432\u0441\u0435 6 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u043e\u0432 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f. Scope hoisting \u0441\u0430\u043c \u043f\u043e \u0441\u0435\u0431\u0435 \u043d\u0435 \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u043a\u043e\u0434 \u2014 \u043e\u043d \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u043e\u0437\u0434\u0430\u0451\u0442 \u0443\u0441\u043b\u043e\u0432\u0438\u044f, \u0447\u0442\u043e\u0431\u044b terser \u043c\u043e\u0433 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435. \u0411\u0435\u0437 \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 webpack \u043d\u0435 \u043b\u0443\u0447\u0448\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445.\u0412 rollup \u0438 vite \u0442\u0430\u043a\u043e\u0439 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043d\u0435\u0442 \u2014 tree shaking \u0443 \u043d\u0438\u0445 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u0433\u0440\u0430\u0444\u0430 \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u0435\u0449\u0451 \u0434\u043e \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438. Rollup \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u043a\u0430\u043a\u0438\u0435 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u044b \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0432 \u0432\u044b\u0445\u043e\u0434\u043d\u043e\u0439 \u0444\u0430\u0439\u043b.\u041f\u043e\u0431\u043e\u0447\u043d\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 scope hoisting \u2014 \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u0434\u0430Scope hoisting \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u0435\u0442 \u043c\u043e\u0434\u0443\u043b\u0438 \u0432 \u043a\u0430\u0436\u0434\u044b\u0439 entry. \u042d\u0442\u043e \u0434\u0430\u0451\u0442 \u0447\u0438\u0441\u0442\u044b\u0439 tree shaking, \u043d\u043e \u043e\u0434\u0438\u043d \u0438 \u0442\u043e\u0442 \u0436\u0435 \u043a\u043e\u0434 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0444\u0430\u0439\u043b\u0430\u0445. \u0412\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0432\u043e\u043f\u0440\u043e\u0441: \u0430 \u043d\u0435 \u043b\u043e\u043c\u0430\u0435\u0442 \u043b\u0438 \u044d\u0442\u043e \u0441\u0438\u043d\u0433\u043b\u0442\u043e\u043d\u044b \u0438 \u043e\u0431\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435?\u0420\u0430\u0437\u0431\u043e\u0440: \u043a\u0430\u043a webpack \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0441\u0438\u043d\u0433\u043b\u0442\u043e\u043d\u044b \u043f\u0440\u0438 \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438\u0414\u043e\u043f\u0443\u0441\u0442\u0438\u043c, \u0442\u0440\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043e\u0431\u0449\u0438\u0439 shared-state.ts:\/\/ shared-state.ts                          \u2014 \u043e\u0431\u0449\u0438\u0439 \u043c\u043e\u0434\u0443\u043b\u044cexport const testMap = new Map&lt;string, string&gt;()\/\/ page1.ts \u2014 \u043f\u0438\u0448\u0435\u0442 \u0432 Mapimport { testMap } from &#8216;.\/shared-state&#8217;testMap.set(&#8216;page&#8217;, &#8216;page1&#8217;)\/\/ page2.ts \u2014 \u0447\u0438\u0442\u0430\u0435\u0442 \u0438\u0437 Mapimport { testMap } from &#8216;.\/shared-state&#8217;console.log(&#8216;Page 2:&#8217;, testMap.get(&#8216;page&#8217;))  \/\/ &#8216;page1&#8217; \u2014 \u0435\u0441\u043b\u0438 \u0441\u0438\u043d\u0433\u043b\u0442\u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u041f\u043e\u0441\u043b\u0435 \u0441\u0431\u043e\u0440\u043a\u0438 new Map() \u043f\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0447\u0430\u043d\u043a\u0430 \u2014 \u0432 503.chunk.js \u0438 \u0432 570.chunk.js. \u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043a\u0430\u043a \u0434\u0432\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 new Map().\u041d\u043e webpack \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u043c \u0432\u044b\u0437\u043e\u0432\u0435 require(564) \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0444\u0430\u0431\u0440\u0438\u043a\u0443 \u043c\u043e\u0434\u0443\u043b\u044f \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432 __webpack_module_cache__. \u041a\u043e\u0433\u0434\u0430 page2 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u0442\u043e\u0442 \u0436\u0435 \u043c\u043e\u0434\u0443\u043b\u044c 564 \u2014 webpack \u0431\u0435\u0440\u0451\u0442 \u0435\u0433\u043e \u0438\u0437 \u043a\u044d\u0448\u0430, new Map \u0432\u0442\u043e\u0440\u043e\u0439 \u0440\u0430\u0437 \u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f. \u041a\u043e\u0434 \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438, \u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043e\u0434\u0438\u043d \u0440\u0430\u0437. \u0421\u0438\u043d\u0433\u043b\u0442\u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442.\u0415\u0441\u043b\u0438 \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0435 \u0443\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442 \u2014 splitChunks \u0441 minSize: 0 \u0432\u044b\u043d\u043e\u0441\u0438\u0442 \u043e\u0431\u0449\u0438\u0439 \u043a\u043e\u0434 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0447\u0430\u043d\u043a, \u043e\u0434\u0438\u043d \u043d\u0430 \u0432\u0441\u0435\u0445. \u041d\u043e \u0442\u043e\u0433\u0434\u0430 \u044d\u0442\u043e\u0442 \u0447\u0430\u043d\u043a \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u0441\u0435 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u044b \u0438 tree shaking \u043d\u0430 \u043d\u0451\u043c \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u2014 \u0442\u043e\u0442 \u0436\u0435 \u043a\u043e\u043c\u043f\u0440\u043e\u043c\u0438\u0441\u0441 \u0447\u0442\u043e \u0443 rollup.\u041f\u043e\u0447\u0435\u043c\u0443 rollup \u0438 vite \u043b\u043e\u043c\u0430\u044e\u0442\u0441\u044f \u043d\u0430 single file\u0415\u0441\u043b\u0438 tree shaking \u0443 rollup \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0433\u0440\u0430\u0444\u0430 \u2014 \u043f\u043e\u0447\u0435\u043c\u0443 single file \u043b\u043e\u043c\u0430\u0435\u0442\u0441\u044f?\u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043a\u043e\u0433\u0434\u0430 \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b (constants-single-file.ts) \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 entry (page1, page2, page3), rollup \u0432\u044b\u043d\u043e\u0441\u0438\u0442 \u0435\u0433\u043e \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 shared chunk. \u042d\u0442\u043e\u0442 shared chunk \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432\u0441\u0435 6 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u043e\u0432, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0440\u0430\u0437\u043d\u044b\u0435:\/\/ rollup dist\/single\/shared-constants-single-file.js \u2014 shared chunkconst e = &#171;value_a&#8230;&#187;, a = { name: &#171;config_a&#187;, &#8230; };const n = &#171;value_b&#8230;&#187;, o = { name: &#171;config_b&#187;, &#8230; };  \/\/ page1 \u044d\u0442\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u043econst s = &#171;value_c&#8230;&#187;, t = { name: &#171;config_c&#187;, &#8230; };  \/\/ \u0438 \u044d\u0442\u043e \u0442\u043e\u0436\u0435export { e as C, a, n as b, o as c, s as d, t as e };   \/\/ \u043d\u043e \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432\u0441\u0451Shared chunk \u2014 \u044d\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 JS-\u0444\u0430\u0439\u043b, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0430\u043d\u0434\u043b\u0435\u0440 \u0432\u044b\u043d\u043e\u0441\u0438\u0442 \u043a\u043e\u0434, \u043e\u0431\u0449\u0438\u0439 \u0434\u043b\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446. \u041a\u0430\u0436\u0434\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0435\u0433\u043e \u0438 \u0431\u0435\u0440\u0451\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u043e\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043d\u043e \u0441\u0430\u043c \u0444\u0430\u0439\u043b \u0433\u0440\u0443\u0437\u0438\u0442\u0441\u044f \u0446\u0435\u043b\u0438\u043a\u043e\u043c \u2014 \u043c\u0451\u0440\u0442\u0432\u044b\u0439 \u043a\u043e\u0434 \u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440.Webpack \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u0435\u0442 \u0438\u043d\u0430\u0447\u0435 \u2014 \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u0435\u0442 \u043a\u043e\u0434 \u0432 \u043a\u0430\u0436\u0434\u044b\u0439 entry \u0447\u0435\u0440\u0435\u0437 scope hoisting, \u0430 terser \u0432\u044b\u0447\u0438\u0449\u0430\u0435\u0442 \u043b\u0438\u0448\u043d\u0435\u0435 \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e. \u041a\u0430\u0436\u0434\u044b\u0439 entry \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0443\u0436\u043d\u043e\u0435.\u0412 barrel-\u043a\u0435\u0439\u0441\u0435 rollup \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u2014 \u0442\u0440\u0435\u0439\u0441\u0438\u0442 \u0447\u0435\u0440\u0435\u0437 index.ts \u0434\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0443\u0436\u043d\u044b\u0435. Shared chunk \u043d\u0435 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0444\u0430\u0439\u043b\u044b \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0435 \u0438 \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0442\u044f\u043d\u0443\u0442 \u0440\u0430\u0437\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043f\u0435\u0440\u0435\u0441\u0435\u043a\u0430\u044e\u0442\u0441\u044f.\u041f\u043e\u0447\u0435\u043c\u0443 esbuild \u043b\u043e\u043c\u0430\u0435\u0442 \u0438 barrel \u0442\u043e\u0436\u0435esbuild \u2014 \u0441\u0430\u043c\u044b\u0439 \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0438\u0437 \u0432\u0441\u0435\u0445, \u043d\u043e \u0430\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-476234","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/476234","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=476234"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/476234\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=476234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=476234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=476234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}