{"id":359875,"date":"2024-05-21T00:41:48","date_gmt":"2024-05-21T00:41:48","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=359875"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2024-05-21T00:41:48","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=359875","title":{"rendered":"Webpack vs esbuild \u2014 \u0443\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 production?<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

\u041f\u0435\u0440\u0438\u043e\u0434\u0438\u0447\u0435\u0441\u043a\u0438 \u044f \u043f\u0440\u043e\u0431\u0443\u044e \u0440\u0430\u0437\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u0438 \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u044e\u0442 \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438 — \u0432\u043a\u043b\u044e\u0447\u0430\u044e \u0432 \u0441\u0432\u043e\u044e \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0434\u043b\u044f \u043a\u043e\u043c\u043c\u0435\u0440\u0447\u0435\u0441\u043a\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432. \u0421 \u0442\u0440\u0435\u0442\u044c\u0435\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0437\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 3 \u0433\u043e\u0434\u0430 esbuild, \u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u043b\u0441\u044f \u043f\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0443 \u043a Webpack. \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u0440\u0438\u0432\u043e\u0436\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u044f \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u043f\u0440\u0438 \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438, \u0438 \u043f\u0443\u0442\u0438 \u0438\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u044f.<\/p>\n

\u0427\u0442\u043e \u044f \u043e\u0436\u0438\u0434\u0430\u044e \u043e\u0442 \u0431\u0430\u043d\u0434\u043b\u0435\u0440\u0430?<\/h3>\n

\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 ~6 \u043b\u0435\u0442 Webpack \u044f \u0441\u0438\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043b\u0441\u044f \u043a \u0435\u0433\u043e \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c. \u0412 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u044f \u043e\u0436\u0438\u0434\u0430\u044e \u043e\u0442 \u0431\u0430\u043d\u0434\u043b\u0435\u0440\u0430:<\/p>\n

\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u044b \u0447\u0435\u0440\u0435\u0437 CLI \u0438 Node \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b, \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c \u0438\u043c\u0435\u043d \u0432\u044b\u0445\u043e\u0434\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 (\u0432\u043a\u043b\u044e\u0447\u0430\u044f [contenthash]<\/code> \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c), tree-shaking, \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e source maps, \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e \u0438 \u0441\u0436\u0430\u0442\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 gzip \/ brotli \/ webp, \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 JS \u043a \u0446\u0435\u043b\u0435\u0432\u044b\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c \u0438\u0437 browserslist \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u043b\u0438\u043d\u0433 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u0438 css-\u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u0432, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 TS-\u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u043e\u0432, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0444\u0430\u0439\u043b \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438-\u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u0430, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 CSS Modules \u0438 Sass \u0438 \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0441\u0441\u044b\u043b\u043e\u043a \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0432 HTML, \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 \u0441\u0441\u044b\u043b\u043e\u043a \u0434\u043b\u044f \u043f\u0440\u0435\u043b\u043e\u0430\u0434\u0438\u043d\u0433\u0430 (\u0448\u0440\u0438\u0444\u0442\u043e\u0432, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440), \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u0438\u0445 \u0432\u043b\u0438\u044f\u043d\u0438\u044f \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u043d\u043e\u0439 \u0444\u0430\u0439\u043b, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044f \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0432 \u0444\u0430\u0439\u043b\u043e\u0432\u044b\u0435 \u0432\u043e\u0442\u0447\u0435\u0440\u044b (\u0442\u0430\u043a\u0438\u0445, \u043a\u0430\u043a \u0444\u0430\u0439\u043b\u043e\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u0438\u0437 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438<\/a>), \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0437\u0431\u0438\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u043d\u0430 \u0447\u0430\u043d\u043a\u0438 \u0434\u043b\u044f \u043b\u0435\u043d\u0438\u0432\u043e\u0439 \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u043a\u0438, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 SSR, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432 \u0432 \u0444\u0430\u0439\u043b\u044b, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e TS \u0438 JSX.<\/p>\n

\u0418, \u0440\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, \u0432\u044b\u0441\u043e\u043a\u0443\u044e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c.<\/p>\n

\u042d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430 Webpack \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u0441\u043e \u0432\u0441\u0435\u043c \u044d\u0442\u0438\u043c, \u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u0442\u0440\u0443\u0434\u043e\u043c — \u043a\u043e\u043d\u0444\u0438\u0433 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0437\u0430\u043f\u0443\u0442\u0430\u043d\u043d\u044b\u0439, \u0430 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0432 \u0432\u0438\u0434\u0435 loaders \u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0437\u0430\u0448\u043a\u0430\u043b\u0438\u0432\u0430\u0435\u0442, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043a\u043e\u043d\u0444\u0438\u0433<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0432 \u0440\u0430\u0431\u043e\u0442\u0435. \u0412 \u044d\u0442\u043e\u043c \u043f\u043b\u0430\u043d\u0435 esbuild, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0434\u0430\u043b\u044c\u0448\u0435 \u043f\u043e\u0439\u0434\u0435\u0442 \u0440\u0435\u0447\u044c, \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u0435\u0439.<\/p>\n

\u0427\u0442\u043e \u043c\u043e\u0436\u0435\u0442 esbuild \u0431\u0435\u0437 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432?<\/h3>\n

\u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0443. \u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u043a\u043e\u043d\u0444\u0438\u0433 \u0432\u0438\u0434\u0430<\/p>\n

import { BuildOptions } from 'esbuild'; import { env } from '..\/env';  const config: BuildOptions = {   entryPoints: ['src\/client.tsx'],   bundle: true,   logLevel: 'warning',   format: 'iife',   publicPath: '\/',   assetNames: env.FILENAME_HASH ? '[name]-[hash]' : '[name]',   outdir: paths.build,   metafile: true,   minify: true,   treeShaking: true,   sourcemap: 'linked',   banner: {     js: `\/* @env ${env.NODE_ENV} @commit ${env.GIT_COMMIT} *\/`,     css: `\/* @env ${env.NODE_ENV} @commit ${env.GIT_COMMIT} *\/`,   },   legalComments: 'external',   platform: 'browser',   target: 'chrome100',   define: {     IS_CLIENT: JSON.stringify(true),     process: JSON.stringify({       env: { NODE_ENV: env.NODE_ENV, GIT_COMMIT: env.GIT_COMMIT },     }),     'process.env.NODE_ENV': JSON.stringify(env.NODE_ENV),   },   resolveExtensions: ['.js', '.ts', '.tsx'],   loader: {     '.svg': 'text',     '.png': 'file',     '.woff': 'file',     '.ttf': 'file',   } }<\/code><\/pre>\n
\u0443\u0436\u0435 \u0434\u0430\u0441\u0442 \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0441 \u0445\u0435\u0448\u0430\u043c\u0438, source maps, \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0435\u0439, \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u043d\u044b\u043c\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u043e\u043c, \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c \u0446\u0435\u043b\u0435\u0432\u043e\u043c\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u043c\u0435\u0440 \u0432\u044b\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u0431\u0443\u0434\u0435\u0442 \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u043d\u044b\u043c \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0432\u044b\u0434\u0430\u0435\u0442 Webpack. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u043d\u0435\u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e\u043c \u0437\u0434\u0435\u0441\u044c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u044e\u0449\u0435\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 process.env.NODE_ENV,<\/code> \u0442\u0430\u043a \u043a\u0430\u043a define<\/code> \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u043e \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438 \u0438 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0431\u0435\u0437 \u044f\u0432\u043d\u043e\u0433\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f. \u0422\u043e \u0435\u0441\u0442\u044c \u0431\u0435\u0437 'process.env.NODE_ENV': JSON.stringify(env.NODE_ENV)<\/code> \u0432 \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u043a\u043e\u0434 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0434\u0432\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 React — production + development. \u041f\u043b\u0430\u0433\u0438\u043d\u044b esbuild-plugin-define<\/a>, esbuild-plugin-env<\/a> \u0438 esbuild-plugin-environment<\/a>, \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e \u043d\u0435 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442 — \u043f\u043e\u0441\u043b\u0435 \u0440\u044f\u0434\u0430 \u043f\u043e\u043f\u044b\u0442\u043e\u043a \u043c\u043d\u0435 \u043d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u043d\u0430\u0439\u0442\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0431\u0435\u0437 \u0434\u0443\u0431\u043b\u044f\u0436\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0441\u0442\u0430\u0432\u0438\u043b \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0431\u0435\u0437 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432.<\/p>\n
Browserslist<\/h3>\n
Esbuild \u043d\u0435 \u0447\u0438\u0442\u0430\u0435\u0442 browserslist, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0435\u0441\u044f \u0432 package.json<\/code>, \u0438 \u0438\u043c\u0435\u0435\u0442 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f target<\/code>. \u041d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u043f\u043b\u0430\u0433\u0438\u043d esbuild-plugin-browserslist<\/a>:<\/p>\n
import browserslist from 'browserslist'; import { resolveToEsbuildTarget } from 'esbuild-plugin-browserslist';  config.target = resolveToEsbuildTarget(   browserslist(),    { printUnknownTargets: true } )<\/code><\/pre>\n
\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 __dirname<\/h3>\n
\u0425\u043e\u0442\u044f \u0435\u0441\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d\u044b esbuild-plugin-fileloc<\/a> \u0438 esbuild-plugin-replace-regex<\/a>, \u043f\u0440\u0438 \u0438\u0445 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043e\u0434\u0438\u043d \u0438\u0437 \u043d\u0438\u0445 \u043d\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442. \u0412 \u0446\u0435\u043b\u043e\u043c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043c\u043d\u043e\u0433\u0438\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u043d\u0435 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u044b \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c. \u0425\u043e\u0442\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u0440\u0435\u0448\u0438\u0442\u044c \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0447\u0435\u0440\u0435\u0437 pipe-\u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b esbuild-plugin-transform<\/a> \u0438\u043b\u0438 esbuild-plugin-pipe<\/a>, \u0443 \u043c\u0435\u043d\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u043b\u0438\u0441\u044c \u043e\u0448\u0438\u0431\u043a\u0438 \u0438 \u043f\u0440\u0438 \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438. \u0422\u0430\u043a\u0436\u0435 \u0432 esbuild-plugin-fileloc \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0437\u0430\u043c\u0435\u043d\u044b __dirname<\/code> \u043d\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u043e \u0442\u043e\u043c\u0443, \u043a\u0430\u043a \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 Webpack \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u043e\u0439 { node: { __filename: true, __dirname: true } }<\/code> , \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043f\u043b\u0430\u0433\u0438\u043d \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 dk-esbuild-plugin-replace<\/a>.<\/p>\n
CSS Modules \u0438 Sass<\/h3>\n
\u041f\u043b\u0430\u0433\u0438\u043d esbuild-sass-plugin<\/a> \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e \u0441\u043f\u0440\u0430\u0432\u0438\u043b\u0441\u044f \u0441 \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043f\u0443\u0442\u0435\u0439 \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 loadPaths<\/code> (\u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0434\u0435\u043b\u0430\u0442\u044c  @import \"mixins\"<\/code>). \u0412\u0435\u043d\u0434\u043e\u0440\u043d\u044b\u0435 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f esbuild \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0441\u0445\u043e\u0434\u044f \u0438\u0437 target<\/code>, \u0430 \u0432\u044b\u0432\u043e\u0434 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 css \u0444\u0430\u0439\u043b\u044b \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u0447\u043a\u043e\u0439 \u0432\u043c\u0435\u0441\u0442\u043e \u0432\u043e\u0437\u043d\u0438 \u0441 MiniCssExtractPlugin<\/a> \u0438 \u043f\u043e\u0440\u044f\u0434\u043a\u043e\u043c \u043b\u043e\u0430\u0434\u0435\u0440\u043e\u0432, \u043a\u0430\u043a \u0432 Webpack.<\/p>\n
import { postcssModules, sassPlugin } from 'esbuild-sass-plugin';  \/\/ \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 config.plugins.push(sassPlugin({    filter: \/(global)\\.scss$\/,    type: 'css',    loadPaths: ['.\/src\/styles']  }));  \/\/ \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 config.plugins.push(sassPlugin({   filter: \/\\.scss$\/i,   type: 'css',   loadPaths: ['.\/src\/styles'],    \/\/ https:\/\/github.com\/madyankin\/postcss-modules   transform: postcssModules({ generateScopedName: '[path][local]' }), }));<\/code><\/pre>\n
\u0412\u0441\u0442\u0430\u0432\u043a\u0430 \u0441\u0441\u044b\u043b\u043e\u043a \u043d\u0430 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0432 html-\u0444\u0430\u0439\u043b<\/h3>\n
\u0410\u043d\u0430\u043b\u043e\u0433 html-webpack-plugin<\/a> \u0432 esbuild \u044d\u0442\u043e esbuild-plugin-html<\/a>.<\/p>\n
import { htmlPlugin } from '@craftamap\/esbuild-plugin-html';  config.plugins.push(htmlPlugin({   files: [{     entryPoints: ['src\/client.tsx'],     filename: 'template.html',     scriptLoading: 'defer',     htmlTemplate: fs.readFileSync(path.resolve('.\/src\/templates\/template.html'), 'utf-8'),   }], }));<\/code><\/pre>\n
\u041e\u043d \u0441\u043f\u0440\u0430\u0432\u0438\u043b\u0441\u044f \u0441 \u0437\u0430\u0434\u0430\u0447\u0435\u0439, \u043e\u0434\u043d\u0430\u043a\u043e \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0434\u043b\u044f \u0432\u0441\u0442\u0430\u0432\u043a\u0438 preload \u0441\u0441\u044b\u043b\u043e\u043a \u044f \u043d\u0435 \u043d\u0430\u0448\u0435\u043b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u043d\u043e\u0432\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u043f\u043b\u0430\u0433\u0438\u043d \u043f\u043e\u0434 \u044d\u0442\u0443 \u0437\u0430\u0434\u0430\u0447\u0443 esbuild-plugin-inject-preload<\/a>. \u042d\u0442\u043e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043a\u0440\u0438\u0442\u0438\u0447\u0435\u043d \u0434\u043b\u044f \u0440\u044f\u0434\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0448\u0438\u0440\u0438\u043d\u044b \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0431\u043b\u043e\u043a\u043e\u0432, \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c. \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0434\u043b\u044f \u0437\u0430\u0434\u0430\u0447\u0438 «\u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043c\u0435\u043d\u044e, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0448\u0438\u0440\u0438\u043d\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430» \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u0438\u0431\u043e \u0440\u0443\u0447\u043d\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0447\u0435\u0440\u0435\u0437 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 @media (max-width: 600px)<\/code> \u043b\u0438\u0431\u043e js-\u043a\u043e\u0434. \u041f\u0440\u0438 \u0432\u0442\u043e\u0440\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435, \u0435\u0441\u043b\u0438 \u0448\u0440\u0438\u0444\u0442\u044b \u043d\u0435 \u0443\u0441\u043f\u0435\u043b\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f, \u0442\u043e \u0448\u0438\u0440\u0438\u043d\u0430 \u0431\u043b\u043e\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u0441\u0445\u043e\u0434\u044f \u0438\u0437 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0441 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0448\u0440\u0438\u0444\u0442\u043e\u0432. \u0422\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u043b\u043e\u0430\u0434\u0438\u043d\u0433 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0448\u0440\u0438\u0444\u0442\u043e\u0432, \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043d\u0430 UX \u0438 \u043f\u0435\u0440\u0444\u043e\u043c\u0430\u043d\u0441\u0435 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 (\u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u044b\u0433\u0430\u044e\u0449\u0438\u0445 \u0441\u0442\u0440\u043e\u043a \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432).<\/p>\n
import { pluginInjectPreload } from 'esbuild-plugin-inject-preload';  config.plugins.push(pluginInjectPreload({   ext: '.woff',   linkType: 'font',   templatePath: path.resolve(paths.build, 'template.html'),   replaceString: '<!-- FONT_PRELOAD -->', }));<\/code><\/pre>\n
\u0421\u0436\u0430\u0442\u0438\u0435 \u0432 gzip \/ brotli<\/h3>\n
\u0421 \u0437\u0430\u0434\u0430\u0447\u0435\u0439 \u0445\u043e\u0440\u043e\u0448\u043e \u0441\u043f\u0440\u0430\u0432\u0438\u043b\u0441\u044f \u043f\u043b\u0430\u0433\u0438\u043d esbuild-plugin-compress<\/a>, \u043e\u0434\u043d\u0430\u043a\u043e \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043f\u043e\u0432\u043e\u0437\u0438\u0442\u044c\u0441\u044f \u0441 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u043c\u0438 \u0434\u043b\u044f micromatch<\/a>, \u0447\u0442\u043e\u0431\u044b \u0441\u0436\u0438\u043c\u0430\u043b\u0438\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e js \u0438 css \u0444\u0430\u0439\u043b\u044b. \u0422\u0430\u043a\u0436\u0435 \u043e\u043d \u043d\u0435 \u0443\u043c\u0435\u0435\u0442 \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u0441 \u0444\u0430\u0439\u043b\u0430\u043c\u0438, \u0440\u0430\u0437\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c\u0438 \u043f\u043e \u0440\u0430\u0437\u043d\u044b\u043c \u043f\u0430\u043f\u043a\u0430\u043c \u0443\u0441\u043b\u043e\u0432\u0438\u0435\u043c assetNames: '[ext]\/[name]-[hash]'<\/code>.<\/p>\n
import { compress } from 'esbuild-plugin-compress';  config.write = false; config.assetNames = '[ext]\/[name]-[hash]'; \/\/ \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 config.assetNames = '[name]-[hash]'; \/\/ \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442  config.plugins.push(compress({   gzip: true,   gzipOptions: { level: 9 },   brotli: true,   emitOrigin: true,   \/\/ https:\/\/github.com\/micromatch\/micromatch   exclude: ['!(**\/*.@(js|css))'], }));<\/code><\/pre>\n
\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u043b\u0438\u043d\u0433<\/h3>\n
\u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u044d\u0442\u043e\u0439 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441\u0435\u0439\u0447\u0430\u0441 \u0432 esbuild \u043d\u0435\u0442, \u043e\u0434\u043d\u0430\u043a\u043e \u0432\u0441\u0435\u0433\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d. \u0422\u0430\u043a, \u044f \u043f\u0440\u0438\u0432\u044b\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c SWC \u0432 \u0441\u0432\u044f\u0437\u043a\u0435 \u0441 Webpack, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d \u0431\u044b\u0441\u0442\u0440\u0435\u0435 Babel \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u043b\u0438\u043d\u0433. \u0414\u043b\u044f \u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0435\u0441\u0442\u044c \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0439 \u0438 \u043d\u0435\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0449\u0438\u0439 \u0430\u0432\u0442\u043e\u043f\u043e\u043b\u0438\u0444\u0438\u043b\u043b\u0438\u043d\u0433 \u043f\u043b\u0430\u0433\u0438\u043d esbuild-plugin-swc<\/a>, \u0442\u0430\u043a \u0447\u0442\u043e \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u0432\u0435\u0440\u0441\u0438\u044e esbuild-plugin-swc2<\/a>. \u0412 \u0438\u0442\u043e\u0433\u0435 \u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043f\u0440\u0438\u0432\u044b\u043a \u0437\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0433\u043e\u0434\u044b \u0438 \u0441 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0430\u043c\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0443\u043c\u0435\u044e \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u044c, \u0447\u0442\u043e \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e \u043d\u0435 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0438\u0442 \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 String.padStart is not a function<\/code>.<\/p>\n
import { pluginSwc } from 'esbuild-plugin-swc2';  config.plugins.push(pluginSwc({   jsc: {     parser: { tsx: true, syntax: 'typescript' },     transform: { react: { runtime: 'automatic', useBuiltins: false } },   },   env: {      mode: 'usage',      targets: JSON.parse(fs.readFileSync('package.json', 'utf-8')).browserslist,   }, }));<\/code><\/pre>\n
\u041e\u0434\u043d\u0430\u043a\u043e \u044f \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u0441\u0432\u044f\u0437\u043a\u0430 esbuild + SWC — \u044d\u0442\u043e es5. \u0422\u043e \u0435\u0441\u0442\u044c \u043f\u0440\u0438 \u043f\u043e\u043f\u044b\u0442\u043a\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0431\u0430\u043d\u0434\u043b, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0449\u0438\u0439 Firefox 50, \u043e\u043d \u0443\u043f\u0430\u0434\u0435\u0442 \u0441 \u043e\u0448\u0438\u0431\u043a\u0430\u043c\u0438<\/p>\n
ERROR: Transforming destructuring to the configured target environment  (\"firefox50\") is not supported yet  ERROR: Transforming const to the configured target environment  (\"firefox50\") is not supported yet<\/code><\/pre>\n
\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0445\u043e\u0442\u044f \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u043b\u0438\u043d\u0433 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0438 \u043a\u043e\u0434 \u0431\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0432 \u044d\u0442\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0441\u0430\u043c esbuild \u043f\u043e\u043a\u0430 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0432 \u0442\u0430\u043a\u043e\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 esbuild-plugin-babel<\/a>, \u0430 \u043d\u0435 SWC, \u043d\u043e \u0434\u043b\u044f \u0442\u0435\u043a\u0443\u0449\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u043c\u043d\u0435 \u043d\u0435 \u0431\u044b\u043b\u0430 \u043d\u0443\u0436\u043d\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044d\u0442\u043e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u044f \u043d\u0435 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043b.<\/p>\n
\u0410\u043d\u0430\u043b\u0438\u0437 \u0431\u0430\u043d\u0434\u043b\u0430<\/h3>\n
\u042f \u043f\u0440\u0438\u0432\u044b\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 webpack-bundle-analyzer<\/a>, \u043e\u0434\u043d\u0430\u043a\u043e \u0435\u0433\u043e \u043f\u043e\u0440\u0442\u0430 \u0434\u043b\u044f esbuild \u043d\u0435\u0442. \u0412 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u044b\u0432\u043e\u0434 \u043c\u0435\u0442\u0430-\u0444\u0430\u0439\u043b\u0430 \u0438 \u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0435\u0433\u043e \u0432 https:\/\/esbuild.github.io\/analyze\/<\/a> \u0438\u043b\u0438 https:\/\/bundle-buddy.com\/<\/a> , \u043a\u043e\u0442\u043e\u0440\u044b\u0435, \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0438 \u0431\u043b\u0438\u0437\u043a\u043e \u043d\u0435 \u0442\u0430\u043a\u0438\u0435 \u0443\u0434\u043e\u0431\u043d\u044b\u0435 + \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0440\u0443\u0447\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u043f\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0444\u0430\u0439\u043b\u0430 \u0432 \u043e\u043d\u043b\u0430\u0439\u043d-\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b. <\/p>\n
\"https:\/\/esbuild.github.io\/analyze\/\"<\/p>\n
https:\/\/esbuild.github.io\/analyze\/<\/a><\/figcaption><\/div>\n<\/figure>\n
\u0415\u0441\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d esbuild-visualizer<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u043e\u0436\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043c\u0435\u0442\u0430-\u0444\u0430\u0439\u043b, \u0437\u0430\u0442\u0435\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c html-\u0444\u0430\u0439\u043b \u0441 \u043e\u0442\u0447\u0435\u0442\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. <\/p>\n
\"esbuild-visualizer\"<\/p>\n
esbuild-visualizer<\/figcaption><\/div>\n<\/figure>\n
\u0418\u0437\u0431\u0430\u043b\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e\u043c webpack-bundle-analyzer, \u044f \u043d\u0430\u0431\u0440\u043e\u0441\u0430\u043b \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u043f\u043b\u0430\u0433\u0438\u043d \u0434\u043b\u044f \u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 esbuild-plugin-webpack-analyzer<\/a>. \u041f\u043e\u043a\u0430 \u0447\u0442\u043e \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0431\u0430\u0437\u043e\u0432\u043e\u043c \u0432\u0438\u0434\u0435 (\u0432\u044b\u0432\u043e\u0434\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e stats-\u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0442\u043e\u0447\u043a\u0443 \u0432\u0445\u043e\u0434\u0430), \u043d\u043e \u0432 \u043f\u0435\u0440\u0441\u043f\u0435\u043a\u0442\u0438\u0432\u0435 \u044f \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u044e \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0435\u0433\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043f\u043e\u0434 \u0432\u0441\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438.<\/p>\n
\"esbuild-plugin-webpack-analyzer\"<\/p>\n
esbuild-plugin-webpack-analyzer<\/figcaption><\/div>\n<\/figure>\n
\u0420\u0430\u0437\u0431\u0438\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u043d\u0430 \u0447\u0430\u043d\u043a\u0438 \u0447\u0435\u0440\u0435\u0437 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u044b<\/h3>\n
\u042d\u0442\u043e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0432 esbuild \u0435\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0437\u0430\u0447\u0430\u0442\u043e\u0447\u043d\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u0441 esm \u043c\u043e\u0434\u0443\u043b\u044f\u043c\u0438 \u0438 \u0431\u0430\u0433\u0430\u043c\u0438 https:\/\/esbuild.github.io\/api\/#splitting<\/a> , \u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u0440\u0435\u0436\u0438\u043c \u0443 \u043c\u0435\u043d\u044f \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c — \u043f\u043e\u0441\u043b\u0435 \u0440\u0430\u0437\u0431\u043e\u0440\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043e\u0448\u0438\u0431\u043e\u043a \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043e\u0442 esm-\u043c\u043e\u0434\u0443\u043b\u0435\u0439 \u044f \u0441\u0434\u0430\u043b\u0441\u044f (\u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0440\u0443\u0433\u0430\u043b\u043e\u0441\u044c \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438). \u0411\u0443\u0434\u0435\u043c \u0436\u0434\u0430\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0434\u043e\u0441\u0442\u0438\u0433\u043d\u0435\u0442 \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 Webpack  \u0438 @loadable\/component<\/a>.<\/p>\n
\u0418\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0441 \u0444\u0430\u0439\u043b\u043e\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u043c<\/h3>\n
\u0412 Webpack \u043c\u043d\u0435 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043d\u0435 \u043e\u0434\u0438\u043d \u043c\u0435\u0441\u044f\u0446 \u0432\u043e\u0437\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0444\u0430\u0439\u043b\u043e\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440. \u0423 Webpack \u0435\u0441\u0442\u044c \u043b\u0438\u0431\u043e \u0440\u0435\u0436\u0438\u043c «\u0445\u043e\u043b\u043e\u0434\u043d\u043e\u0439» \u0441\u0431\u043e\u0440\u043a\u0438, \u043b\u0438\u0431\u043e watch-\u0440\u0435\u0436\u0438\u043c. \u0412 \u043f\u0435\u0440\u0432\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0431\u0438\u043b\u0434\u0430 \u043d\u0438\u0437\u043a\u0430\u044f, \u0430 \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u043c \u043d\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043e\u0442\u043b\u043e\u0436\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u0431\u0438\u043b\u0434 \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u0444\u0430\u0439\u043b\u043e\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u043d\u0435 \u043e\u0431\u043d\u043e\u0432\u0438\u0442 \u0444\u0430\u0439\u043b\u044b (\u0435\u0441\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u0439 aggregation timeout, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u0446\u0435\u043b\u0438). \u041f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0432\u043d\u0435\u0434\u0440\u044f\u0442\u044c\u0441\u044f \u0432 \u0435\u0433\u043e \u0444\u0430\u0439\u043b\u043e\u0432\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e conditional-aggregate-webpack-plugin<\/a> \u0438 \u043f\u043e\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0438\u0433\u043d\u0430\u043b «\u0430\u0433\u0433\u0440\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0438 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0443». \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0439 \u0441\u0445\u0435\u043c\u044b \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043f\u0440\u043e\u0439\u0442\u0438 \u0441\u0435\u043c\u044c \u043a\u0440\u0443\u0433\u043e\u0432 \u0430\u0434\u0430.<\/p>\n
\u041e\u0434\u043d\u0430\u043a\u043e esbuild \u0438\u043c\u0435\u0435\u0442 \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0440\u0435\u0436\u0438\u043c — «\u0433\u043e\u0440\u044f\u0447\u0430\u044f» \u0441\u0431\u043e\u0440\u043a\u0430 \u0447\u0435\u0440\u0435\u0437 \u043c\u0435\u0442\u043e\u0434 rebuild()<\/code>. \u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u043f\u0435\u0440\u0435\u0441\u0431\u043e\u0440\u043a\u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u043c\u0430 \u0441 \u0440\u0435\u0436\u0438\u043c\u043e\u043c watch, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044f \u0444\u0430\u0439\u043b\u043e\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440\u0430 \u0441\u0442\u0430\u043b\u0430 \u0442\u0440\u0438\u0432\u0438\u0430\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439.<\/p>\n
import { generateFiles } from 'dk-file-generator';  const buildContext = await esbuild.context(config);  buildContext.rebuild(); \/\/ \"\u0445\u043e\u043b\u043e\u0434\u043d\u0430\u044f\" \u0441\u0431\u043e\u0440\u043a\u0430 0.8s  generateFiles({   configs: generatorConfigs,   watch: {     paths: [paths.source],     aggregationTimeout: 600,     onFinish: () => buildContext.rebuild() \/\/ \"\u0433\u043e\u0440\u044f\u0447\u0430\u044f\" \u0441\u0431\u043e\u0440\u043a\u0430 0.3s       .then(() => reloadBrowser()), \/\/ \u0441\u0438\u0433\u043d\u0430\u043b \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443   }, })<\/code><\/pre>\n
\u0417\u0430 \u044d\u0442\u043e\u0442 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u043c\u043e\u0439 \u043d\u0438\u0437\u043a\u0438\u0439 \u043f\u043e\u043a\u043b\u043e\u043d \u043a\u043e\u043c\u0430\u043d\u0434\u0435 esbuild. \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u043d\u043e \u043d\u0435 \u043e\u043f\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u043d\u0430 watch-\u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0431\u0430\u043d\u0434\u043b\u0435\u0440\u0430 \u0438 \u0438\u043d\u0442\u0435\u0433\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u043d\u0435\u0433\u043e, \u0430 \u043f\u0435\u0440\u0435\u0441\u043e\u0431\u0438\u0440\u0430\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u043d\u0443\u0436\u043d\u043e, \u0438\u0441\u0445\u043e\u0434\u044f \u0438\u0437 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u0430 \u0441\u043b\u0435\u0436\u0435\u043d\u0438\u044f \u0437\u0430 \u0444\u0430\u0439\u043b\u0430\u043c\u0438.<\/p>\n
\u0421\u0431\u043e\u0440\u043a\u0430 js-\u0441\u0435\u0440\u0432\u0435\u0440\u0430<\/h3>\n
\u041a\u043e\u043d\u0444\u0438\u0433 \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043c\u0430\u043b\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u043a\u043e\u043d\u0444\u0438\u0433\u0430 \u0434\u043b\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430. \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c<\/p>\n
config.packages = 'external'; config.target = 'node18'; config.platform = 'node';<\/code><\/pre>\n
\u0438 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043f\u0440\u0430\u0432\u043a\u0438 \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 CSS Modules.<\/p>\n
\u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0438<\/h3>\n
\u0425\u043e\u0442\u044f \u044f \u0441\u0447\u0438\u0442\u0430\u043b, \u0447\u0442\u043e \u0441\u0432\u044f\u0437\u043a\u0430 Webpack + SWC \u043e\u0447\u0435\u043d\u044c \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u0430 \u0432 \u043f\u043b\u0430\u043d\u0435 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0441\u0431\u043e\u0440\u043a\u0438, \u0432\u0441\u0435 \u043f\u043e\u0437\u043d\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0438. \u0412\u043e\u0442 \u0443\u0441\u0440\u0435\u0434\u043d\u0435\u043d\u043d\u044b\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043f\u043e\u0441\u043b\u0435 \u043f\u0440\u043e\u0433\u043e\u043d\u0430 \u043e\u0434\u043d\u043e\u0433\u043e \u0438 \u0442\u043e\u0433\u043e \u0436\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. Dev — \u0432\u0435\u0440\u0441\u0438\u044f \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u0431\u0435\u0437 \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u043b\u043e\u0432, \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, \u0441\u0436\u0430\u0442\u0438\u044f \u0432 gzip+brotli. Prod — \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u043e \u0432\u0441\u0435\u043c\u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f\u043c\u0438, \u0435\u0441\u043b\u0438 \u043d\u0435 \u043f\u043e\u043c\u0435\u0447\u0435\u043d\u043e \u0432 \u0441\u043a\u043e\u0431\u043a\u0430\u0445.<\/p>\n
Webpack + SWC dev 3.8s Webpack + SWC dev (watch rebuild) 0.2s Webpack + SWC prod 7.8s  Esbuild + SWC dev 1s Esbuild + SWC dev (watch rebuild) 0.35s Esbuild + SWC prod 2.6s  Esbuild dev 0.8s Esbuild dev (hot rebuild) 0.3s Esbuild prod (no polyfills) 2.3s<\/code><\/pre>\n
\u041f\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0443 \u0432\u044b\u0445\u043e\u0434\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0432\u043e \u0432\u0441\u0435\u0445 \u0440\u0435\u0436\u0438\u043c\u0430\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043e\u0434\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0440\u0435\u0436\u0438\u043c\u0430 Esbuild prod (no polyfills)<\/code> — \u043e\u043d, \u0440\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, \u043c\u0435\u043d\u044c\u0448\u0435. <\/p>\n
\u0412\u044b\u0432\u043e\u0434\u044b<\/h3>\n
\u041d\u0430\u043a\u043e\u043d\u0435\u0446, \u0432 \u044d\u0442\u043e\u043c \u0433\u043e\u0434\u0443 \u043c\u043d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u043d\u0430 95% \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u0435\u0441\u0442\u0438 \u043d\u0430 esbuild \u0432\u0441\u0435, \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u043e\u0442 \u0431\u0430\u043d\u0434\u043b\u0435\u0440\u0430 \u0432 \u043c\u043e\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445. \u042f \u043d\u0435 \u0437\u0430\u0442\u0440\u043e\u043d\u0443\u043b \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u043c\u0443 SSR \u0438 \u0441\u0436\u0430\u0442\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 webp, \u043d\u043e \u0441 \u044d\u0442\u0438\u043c \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043e\u0441\u043e\u0431\u044b\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c. \u0422\u0430\u043a\u0436\u0435 \u044f \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e css-in-js \u0438 \u043c\u0438\u043a\u0440\u043e\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u044b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044d\u0442\u0438 \u0442\u0435\u043c\u044b \u0442\u043e\u0436\u0435 \u0437\u0430 \u0440\u0430\u043c\u043a\u0430\u043c\u0438 \u0441\u0442\u0430\u0442\u044c\u0438. <\/p>\n
\u041c\u043d\u0435 \u043a\u0440\u0430\u0439\u043d\u0435 \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u0430\u0441\u044c \u043b\u0430\u043a\u043e\u043d\u0438\u0447\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433\u0430 (\u0432 \u0438\u0442\u043e\u0433\u0435 \u043e\u043d \u0432 \u0440\u0430\u0437\u044b \u043c\u0435\u043d\u044c\u0448\u0435, \u0447\u0435\u043c \u0432 Webpack), \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u0437\u0430 \u0441\u0447\u0435\u0442 \u0447\u0435\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0442\u043e\u0436\u0435 \u0441\u043e\u0440\u0430\u0442\u0438\u043b\u043e\u0441\u044c \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 (\u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0437\u0430 \u0441\u0447\u0435\u0442 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c loaders). API \u0434\u043b\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0438 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0441\u0431\u043e\u0440\u043a\u0438 \u043f\u0440\u0435\u0432\u043e\u0441\u0445\u043e\u0434\u043d\u044b\u0439. \u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0441\u0431\u043e\u0440\u043a\u0438 \u0432 \u0441\u0440\u0435\u0434\u043d\u0435\u043c \u0443\u0441\u043a\u043e\u0440\u0438\u043b\u0430\u0441\u044c \u0432 3 \u0440\u0430\u0437\u0430. \u041a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0431\u044b, \u0431\u043e\u0447\u043a\u0430 \u043c\u0435\u0434\u0430 — \u043d\u043e \u043d\u0435 \u043e\u0431\u043e\u0448\u043b\u043e\u0441\u044c \u0438 \u0431\u0435\u0437 \u043b\u043e\u0436\u043a\u0438 \u0434\u0435\u0433\u0442\u044f.<\/p>\n
\u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b, \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0437\u0434\u0435\u0441\u044c https:\/\/github.com\/esbuild\/community-plugins<\/a> , \u0447\u0430\u0441\u0442\u043e \u043d\u0435\u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u044b \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c, \u043d\u0435\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b \u0438\u043b\u0438 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e. \u0415\u0449\u0435 \u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u0430 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u0432 \u0441 \u0440\u0430\u0437\u0431\u0438\u0435\u043d\u0438\u0435\u043c \u043d\u0430 \u0447\u0430\u043d\u043a\u0438 \u0438 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0438 \u043a\u043e\u0434\u0430 \u043f\u043e\u0434 \u0441\u0442\u0430\u0440\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b.<\/p>\n
\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0432 \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u0432\u0438\u0434\u0435 esbuild \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442 \u0434\u043b\u044f \u0430\u0434\u043c\u0438\u043d\u043e\u043a \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0431\u0435\u0437 SWC, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043a \u0441\u0442\u0430\u0440\u043e\u043c\u0443 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0443, \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u043b\u0438\u043d\u0433 \u0438 \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0435 \u0447\u0430\u043d\u043a\u0438 \u0442\u0430\u043c \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c. \u0422\u0430\u043a\u0436\u0435, \u0434\u0443\u043c\u0430\u044e, \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442 \u0434\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u0441\u0430\u0439\u0442\u043e\u0432 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 esbuild + SWC, \u0435\u0441\u043b\u0438 \u043d\u0435 \u043d\u0443\u0436\u043d\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0441\u0442\u0430\u0440\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043d\u0435 \u043c\u043d\u043e\u0433\u043e, \u0442\u043e \u0435\u0441\u0442\u044c \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u0431\u0435\u0437 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u043d\u0430 \u0447\u0430\u043d\u043a\u0438. \u0414\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0445 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0448\u0438\u0440\u043e\u043a\u043e\u0439 \u043a\u0440\u043e\u0441\u0441\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0441\u0442\u0438 \u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0435\u0440\u0444\u043e\u043c\u0430\u043d\u0441\u0430 \u0441 \u0447\u0430\u043d\u043a\u0430\u043c\u0438 \u044d\u0442\u043e\u0442 \u0431\u0430\u043d\u0434\u043b\u0435\u0440 \u043f\u043e\u043a\u0430 \u043d\u0435 \u0433\u043e\u0434\u0438\u0442\u0441\u044f.<\/p>\n
\u041f\u0440\u0438\u0432\u0435\u0434\u0443 \u0432 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u043d\u0444\u0438\u0433, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443 \u043c\u0435\u043d\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f.<\/p>\n
\nconfig.ts<\/summary>\n
\n
import path from 'path'; import fs from 'fs';  import { postcssModules, sassPlugin } from 'esbuild-sass-plugin'; import { htmlPlugin } from '@craftamap\/esbuild-plugin-html'; import { compress } from 'esbuild-plugin-compress'; import { BuildOptions } from 'esbuild'; import browserslist from 'browserslist'; import { resolveToEsbuildTarget } from 'esbuild-plugin-browserslist'; import { pluginReplace } from 'dk-esbuild-plugin-replace'; import { pluginInjectPreload } from 'esbuild-plugin-inject-preload'; import { pluginWebpackAnalyzer } from 'esbuild-plugin-webpack-analyzer'; import { pluginSwc } from 'esbuild-plugin-swc2';  import { excludeFalsy } from '..\/src\/utils\/tsUtils\/excludeFalsy'; import { env } from '..\/env'; import { paths } from '..\/paths';  const list = JSON.parse(fs.readFileSync(paths.package, 'utf-8')).browserslist; const template = fs.readFileSync(path.resolve('.\/src\/templates\/templateEs.html'), 'utf-8');  export const configClient: BuildOptions = {   entryPoints: ['src\/client.tsx'],   bundle: true,   logLevel: 'warning',   format: 'iife',   publicPath: '\/',   \/\/ assetNames: '[ext]\/[name]-[hash]', \/\/ not working with compress plugin   assetNames: env.FILENAME_HASH ? '[name]-[hash]' : '[name]',   outdir: paths.build,   write: false,   metafile: true,   minify: env.MINIMIZE_CLIENT,   treeShaking: true,   sourcemap: 'linked',   banner: {     js: `\/* @env ${env.NODE_ENV} @commit ${env.GIT_COMMIT} *\/`,     css: `\/* @env ${env.NODE_ENV} @commit ${env.GIT_COMMIT} *\/`,   },   legalComments: 'external',   platform: 'browser',   \/\/ https:\/\/github.com\/nihalgonsalves\/esbuild-plugin-browserslist   target: resolveToEsbuildTarget(browserslist(), { printUnknownTargets: false }),   define: {     IS_CLIENT: JSON.stringify(true),     process: JSON.stringify({       env: {         NODE_ENV: env.NODE_ENV,         GIT_COMMIT: env.GIT_COMMIT,       },     }),     'process.env.NODE_ENV': JSON.stringify(env.NODE_ENV)   },   resolveExtensions: ['.js', '.ts', '.tsx'],   loader: {     '.svg': 'text',     '.png': 'file',     '.woff': 'file',     '.ttf': 'file',   },   plugins: [     pluginReplace({ filter: \/\\.(tsx?)$\/, rootDir: paths.root }),      env.SWC_ENABLED &&       pluginSwc({         jsc: {           parser: { tsx: true, syntax: 'typescript' },           transform: {             react: { runtime: 'automatic', useBuiltins: false },           },         },         env: env.POLYFILLING ? { mode: 'usage', targets: list } : undefined,       }),      \/\/ https:\/\/github.com\/glromeo\/esbuild-sass-plugin     sassPlugin({ filter: \/(global)\\.scss$\/, type: 'css', loadPaths: ['.\/src\/styles'] }),     sassPlugin({       filter: \/\\.scss$\/i,       type: 'css',       loadPaths: ['.\/src\/styles'],        \/\/ https:\/\/github.com\/madyankin\/postcss-modules       transform: postcssModules({ generateScopedName: '[path][local]' }),     }),      \/\/ https:\/\/github.com\/craftamap\/esbuild-plugin-html     htmlPlugin({       files: [         {           entryPoints: ['src\/client.tsx'],           filename: 'template.html',           scriptLoading: 'defer',           define: { env: env.NODE_ENV, commitHash: env.GIT_COMMIT },           htmlTemplate: template,         },       ],     }),     pluginInjectPreload({       ext: '.woff',       linkType: 'font',       templatePath: path.resolve(paths.build, 'template.html'),       replaceString: '<!-- FONT_PRELOAD -->',     }),      \/\/ https:\/\/github.com\/LinbuduLab\/esbuild-plugins\/tree\/main\/packages\/esbuild-plugin-compress     env.GENERATE_COMPRESSED &&       compress({         gzip: true,         gzipOptions: { level: 9 },         brotli: true,         emitOrigin: true,         \/\/ https:\/\/github.com\/micromatch\/micromatch         exclude: ['!(**\/*.@(js|css))'],       }),      env.BUNDLE_ANALYZER &&       pluginWebpackAnalyzer({         port: env.BUNDLE_ANALYZER_PORT,         open: false,       }),   ].filter(excludeFalsy), };<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n
Update 13.11.23<\/h3>\n
\u0420\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043d\u0430 \u0447\u0430\u043d\u043a\u0438 \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0447\u0435\u0433\u043e-\u0442\u043e \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u043b\u043e \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043b \u0440\u0430\u043d\u044c\u0448\u0435.<\/p>\n
config.splitting = true; config.format = 'esm';  htmlPlugin({ files: [{ scriptLoading: 'module', ...rest }] };<\/code><\/pre>\n
\u0412 \u0438\u0442\u043e\u0433\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f ESM \u0441\u0445\u0435\u043c\u0430 \u0434\u043b\u044f \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u0432 \u0438, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044f \u0441\u043c\u043e\u0433 \u043f\u0440\u043e\u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432 \u0442\u0435\u043a\u0443\u0449\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435, \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e. \u0422\u0430\u043a\u0436\u0435 \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u043b esbuild-plugin-webpack-analyzer<\/a>, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b \u0432\u044b\u0445\u043e\u0434\u043d\u044b\u0435 \u0447\u0430\u043d\u043a\u0438 \u0438 \u0438\u0445 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435.<\/p>\n
\"esbuild-plugin-webpack-analyzer<\/p>\n
esbuild-plugin-webpack-analyzer + code splitting<\/figcaption><\/div>\n<\/figure>\n
\u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0432\u044b\u0432\u043e\u0434 parsed+gzip \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u044d\u0442\u043e\u0433\u043e \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c — Webpack Bundle Analyzer \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u0445\u0438\u0442\u0440\u0443\u044e \u0441\u0445\u0435\u043c\u0443<\/a> \u0434\u043b\u044f \u0441\u0431\u043e\u0440\u0430 \u0441\u0442\u0440\u043e\u043a \u0438\u0437 \u0438\u0442\u043e\u0433\u043e\u0432\u043e\u0433\u043e \u0431\u0430\u043d\u0434\u043b\u0430 \u0438 \u0437\u0430\u0442\u043e\u0447\u0435\u043d \u0447\u0438\u0441\u0442\u043e \u043f\u043e\u0434 \u0442\u043e, \u043a\u0430\u043a \u0434\u0435\u043b\u0430\u0435\u0442 \u0432\u044b\u0432\u043e\u0434 Webpack. \u0411\u0435\u0437 \u0444\u043e\u0440\u043a\u0430 \u0441\u0430\u043c\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0438, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0432 esbuild, \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u0443\u044e \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u044e, \u0432\u0438\u0434\u0438\u043c\u043e, \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f.<\/p>\n
\u041e\u0434\u043d\u0430\u043a\u043e \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u044b\u0432\u043e\u0434\u044b \u0441\u0442\u0430\u0442\u044c\u0438 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0442\u0435\u043c\u0438 \u0436\u0435, \u043f\u043e\u043a\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043d\u0435 \u043f\u0440\u0438\u0437\u043d\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u043c \u0438 \u043d\u0435\u0442 \u0441\u0445\u0435\u043c\u044b \u0431\u0435\u0437 ESM, \u0434\u043b\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0445 \u0441\u0430\u0439\u0442\u043e\u0432 \u044f \u0431\u044b \u043d\u0435 \u0441\u0442\u0430\u043b \u043f\u043e\u043a\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u0431\u0430\u043d\u0434\u043b\u0435\u0440. <\/p>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n

 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/articles\/773236\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
<\/div>\n
\n
\n
\n
\n
\u041f\u0435\u0440\u0438\u043e\u0434\u0438\u0447\u0435\u0441\u043a\u0438 \u044f \u043f\u0440\u043e\u0431\u0443\u044e \u0440\u0430\u0437\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u0438 \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u044e\u0442 \u0432\u0441\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438 — \u0432\u043a\u043b\u044e\u0447\u0430\u044e \u0432 \u0441\u0432\u043e\u044e \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0434\u043b\u044f \u043a\u043e\u043c\u043c\u0435\u0440\u0447\u0435\u0441\u043a\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432. \u0421 \u0442\u0440\u0435\u0442\u044c\u0435\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u0437\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 3 \u0433\u043e\u0434\u0430 esbuild, \u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u043b\u0441\u044f \u043f\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u0443 \u043a Webpack. \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u043f\u0440\u0438\u0432\u043e\u0436\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u044f \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u043f\u0440\u0438 \u043c\u0438\u0433\u0440\u0430\u0446\u0438\u0438, \u0438 \u043f\u0443\u0442\u0438 \u0438\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u044f.<\/p>\n
\u0427\u0442\u043e \u044f \u043e\u0436\u0438\u0434\u0430\u044e \u043e\u0442 \u0431\u0430\u043d\u0434\u043b\u0435\u0440\u0430?<\/h3>\n
\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 ~6 \u043b\u0435\u0442 Webpack \u044f \u0441\u0438\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043b\u0441\u044f \u043a \u0435\u0433\u043e \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044f\u043c. \u0412 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u044f \u043e\u0436\u0438\u0434\u0430\u044e \u043e\u0442 \u0431\u0430\u043d\u0434\u043b\u0435\u0440\u0430:<\/p>\n
\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u044b \u0447\u0435\u0440\u0435\u0437 CLI \u0438 Node \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b, \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c \u0438\u043c\u0435\u043d \u0432\u044b\u0445\u043e\u0434\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 (\u0432\u043a\u043b\u044e\u0447\u0430\u044f [contenthash]<\/code> \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441 \u043a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c), tree-shaking, \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044e source maps, \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e \u0438 \u0441\u0436\u0430\u0442\u0438\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 gzip \/ brotli \/ webp, \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 JS \u043a \u0446\u0435\u043b\u0435\u0432\u044b\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c \u0438\u0437 browserslist \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u043b\u0438\u043d\u0433 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u0438 css-\u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u0432, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 TS-\u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u043a\u043e\u043d\u0444\u0438\u0433\u043e\u0432, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0444\u0430\u0439\u043b \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438-\u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a\u0430, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 CSS Modules \u0438 Sass \u0438 \u0432\u044b\u043d\u0435\u0441\u0435\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0441\u0441\u044b\u043b\u043e\u043a \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0432 HTML, \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 \u0441\u0441\u044b\u043b\u043e\u043a \u0434\u043b\u044f \u043f\u0440\u0435\u043b\u043e\u0430\u0434\u0438\u043d\u0433\u0430 (\u0448\u0440\u0438\u0444\u0442\u043e\u0432, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440), \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u0438\u0445 \u0432\u043b\u0438\u044f\u043d\u0438\u044f \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u043d\u043e\u0439 \u0444\u0430\u0439\u043b, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u044f \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0432 \u0444\u0430\u0439\u043b\u043e\u0432\u044b\u0435 \u0432\u043e\u0442\u0447\u0435\u0440\u044b (\u0442\u0430\u043a\u0438\u0445, \u043a\u0430\u043a \u0444\u0430\u0439\u043b\u043e\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u0438\u0437 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438<\/a>), \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0437\u0431\u0438\u0435\u043d\u0438\u0435 \u043a\u043e\u0434\u0430 \u043d\u0430 \u0447\u0430\u043d\u043a\u0438 \u0434\u043b\u044f \u043b\u0435\u043d\u0438\u0432\u043e\u0439 \u043f\u043e\u0434\u0433\u0440\u0443\u0437\u043a\u0438, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 SSR, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432 \u0432 \u0444\u0430\u0439\u043b\u044b, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445, \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e TS \u0438 JSX.<\/p>\n
\u0418, \u0440\u0430\u0437\u0443\u043c\u0435\u0435\u0442\u0441\u044f, \u0432\u044b\u0441\u043e\u043a\u0443\u044e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c.<\/p>\n
\u042d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0430 Webpack \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c\u0441\u044f \u0441\u043e \u0432\u0441\u0435\u043c \u044d\u0442\u0438\u043c, \u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u0442\u0440\u0443\u0434\u043e\u043c — \u043a\u043e\u043d\u0444\u0438\u0433 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0437\u0430\u043f\u0443\u0442\u0430\u043d\u043d\u044b\u0439, \u0430 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0432 \u0432\u0438\u0434\u0435 loaders \u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0437\u0430\u0448\u043a\u0430\u043b\u0438\u0432\u0430\u0435\u0442, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043a\u043e\u043d\u0444\u0438\u0433<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0432 \u0440\u0430\u0431\u043e\u0442\u0435. \u0412 \u044d\u0442\u043e\u043c \u043f\u043b\u0430\u043d\u0435 esbuild, \u043e \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0434\u0430\u043b\u044c\u0448\u0435 \u043f\u043e\u0439\u0434\u0435\u0442 \u0440\u0435\u0447\u044c, \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u0435\u0439.<\/p>\n
\u0427\u0442\u043e \u043c\u043e\u0436\u0435\u0442 esbuild \u0431\u0435\u0437 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432?<\/h3>\n
\u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u0443. \u0411\u0430\u0437\u043e\u0432\u044b\u0439 \u043a\u043e\u043d\u0444\u0438\u0433 \u0432\u0438\u0434\u0430<\/p>\n
import { BuildOptions } from 'esbuild'; import { env } from '..\/env';  const config: BuildOptions = {   entryPoints: ['src\/client.tsx'],   bundle: true,   logLevel: 'warning',   format: 'iife',   publicPath: '\/',   assetNames: env.FILENAME_HASH ? '[name]-[hash]' : '[name]',   outdir: paths.build,   metafile: true,   minify: true,   treeShaking: true,   sourcemap: 'linked',   banner: {     js: `\/* @env ${env.NODE_ENV} @commit ${env.GIT_COMMIT} *\/`,     css: `\/* @env ${env.NODE_ENV} @commit ${env.GIT_COMMIT} *\/`,   },   legalComments: 'external',   platform: 'browser',   target: 'chrome100',   define: {     IS_CLIENT: JSON.stringify(true),     process: JSON.stringify({       env: { NODE_ENV: env.NODE_ENV, GIT_COMMIT: env.GIT_COMMIT },     }),     'process.env.NODE_ENV': JSON.stringify(env.NODE_ENV),   },   resolveExtensions: ['.js', '.ts', '.tsx'],   loader: {     '.svg': 'text',     '.png': 'file',     '.woff': 'file',     '.ttf': 'file',   } }<\/code><\/pre>\n
\u0443\u0436\u0435 \u0434\u0430\u0441\u0442 \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435 \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0441 \u0445\u0435\u0448\u0430\u043c\u0438, source maps, \u043c\u0438\u043d\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0435\u0439, \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u043d\u044b\u043c\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u043e\u043c, \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c \u0446\u0435\u043b\u0435\u0432\u043e\u043c\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0440\u0430\u0437\u043c\u0435\u0440 \u0432\u044b\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 \u0431\u0443\u0434\u0435\u0442 \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u043d\u044b\u043c \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0432\u044b\u0434\u0430\u0435\u0442 Webpack. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u043d\u0435\u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e\u043c \u0437\u0434\u0435\u0441\u044c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u044e\u0449\u0435\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 process.env.NODE_ENV,<\/code> \u0442\u0430\u043a \u043a\u0430\u043a define<\/code> \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u043e \u0441\u0442\u0440\u043e\u043a\u0430\u043c\u0438 \u0438 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0431\u0435\u0437 \u044f\u0432\u043d\u043e\u0433\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f. \u0422\u043e \u0435\u0441\u0442\u044c \u0431\u0435\u0437 'process.env.NODE_ENV': JSON.stringify(env.NODE_ENV)<\/code> \u0432 \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u043a\u043e\u0434 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0434\u0432\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 React — production + development. \u041f\u043b\u0430\u0433\u0438\u043d\u044b esbuild-plugin-define<\/a>, esbuild-plugin-env<\/a> \u0438 esbuild-plugin-environment<\/a>, \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e \u043d\u0435 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442 — \u043f\u043e\u0441\u043b\u0435 \u0440\u044f\u0434\u0430 \u043f\u043e\u043f\u044b\u0442\u043e\u043a \u043c\u043d\u0435 \u043d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u043d\u0430\u0439\u0442\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0431\u0435\u0437 \u0434\u0443\u0431\u043b\u044f\u0436\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0441\u0442\u0430\u0432\u0438\u043b \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0431\u0435\u0437 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432.<\/p>\n
Browserslist<\/h3>\n
Esbuild \u043d\u0435 \u0447\u0438\u0442\u0430\u0435\u0442 browserslist, \u043d\u0430\u0445\u043e\u0434\u044f\u0449\u0438\u0435\u0441\u044f \u0432 package.json<\/code>, \u0438 \u0438\u043c\u0435\u0435\u0442 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f target<\/code>. \u041d\u0430 \u043f\u043e\u043c\u043e\u0449\u044c \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u043f\u043b\u0430\u0433\u0438\u043d esbuild-plugin-browserslist<\/a>:<\/p>\n
import browserslist from 'browserslist'; import { resolveToEsbuildTarget } from 'esbuild-plugin-browserslist';  config.target = resolveToEsbuildTarget(   browserslist(),    { printUnknownTargets: true } )<\/code><\/pre>\n
\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 __dirname<\/h3>\n
\u0425\u043e\u0442\u044f \u0435\u0441\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d\u044b esbuild-plugin-fileloc<\/a> \u0438 esbuild-plugin-replace-regex<\/a>, \u043f\u0440\u0438 \u0438\u0445 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043e\u0434\u0438\u043d \u0438\u0437 \u043d\u0438\u0445 \u043d\u0435 \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442. \u0412 \u0446\u0435\u043b\u043e\u043c \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043c\u043d\u043e\u0433\u0438\u0435 \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u043d\u0435 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u044b \u0434\u0440\u0443\u0433 \u0441 \u0434\u0440\u0443\u0433\u043e\u043c. \u0425\u043e\u0442\u044f \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u0440\u0435\u0448\u0438\u0442\u044c \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0447\u0435\u0440\u0435\u0437 pipe-\u043f\u0430\u0442\u0442\u0435\u0440\u043d\u044b esbuild-plugin-transform<\/a> \u0438\u043b\u0438 esbuild-plugin-pipe<\/a>, \u0443 \u043c\u0435\u043d\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u043b\u0438\u0441\u044c \u043e\u0448\u0438\u0431\u043a\u0438 \u0438 \u043f\u0440\u0438 \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438. \u0422\u0430\u043a\u0436\u0435 \u0432 esbuild-plugin-fileloc \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0437\u0430\u043c\u0435\u043d\u044b __dirname<\/code> \u043d\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u043e\u0432\u0430\u043b\u043e \u0442\u043e\u043c\u0443, \u043a\u0430\u043a \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 Webpack \u0441 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u043e\u0439 { node: { __filename: true, __dirname: true } }<\/code> , \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043f\u043b\u0430\u0433\u0438\u043d \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 dk-esbuild-plugin-replace<\/a>.<\/p>\n
CSS Modules \u0438 Sass<\/h3>\n
\u041f\u043b\u0430\u0433\u0438\u043d esbuild-sass-plugin<\/a> \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e \u0441\u043f\u0440\u0430\u0432\u0438\u043b\u0441\u044f \u0441 \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043f\u0443\u0442\u0435\u0439 \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 loadPaths<\/code> (\u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0434\u0435\u043b\u0430\u0442\u044c  @import \"mixins\"<\/code>). \u0412\u0435\u043d\u0434\u043e\u0440\u043d\u044b\u0435 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f esbuild \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0441\u0445\u043e\u0434\u044f \u0438\u0437 target<\/code>, \u0430 \u0432\u044b\u0432\u043e\u0434 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 css \u0444\u0430\u0439\u043b\u044b \u0434\u0435\u043b\u0430\u0435\u0442\u0441\u044f \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u0447\u043a\u043e\u0439 \u0432\u043c\u0435\u0441\u0442\u043e \u0432\u043e\u0437\u043d\u0438 \u0441 MiniCssExtractPlugin<\/a> \u0438 \u043f\u043e\u0440\u044f\u0434\u043a\u043e\u043c \u043b\u043e\u0430\u0434\u0435\u0440\u043e\u0432, \u043a\u0430\u043a \u0432 Webpack.<\/p>\n
import { postcssModules, sassPlugin } from 'esbuild-sass-plugin';  \/\/ \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 config.plugins.push(sassPlugin({    filter: \/(global)\\.scss$\/,    type: 'css',    loadPaths: ['.\/src\/styles']  }));  \/\/ \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438 config.plugins.push(sassPlugin({   filter: \/\\.scss$\/i,   type: 'css',   loadPaths: ['.\/src\/styles'],    \/\/ https:\/\/github.com\/madyankin\/postcss-modules   transform: postcssModules({ generateScopedName: '[path][local]' }), }));<\/code><\/pre>\n
\u0412\u0441\u0442\u0430\u0432\u043a\u0430 \u0441\u0441\u044b\u043b\u043e\u043a \u043d\u0430 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0432 html-\u0444\u0430\u0439\u043b<\/h3>\n
\u0410\u043d\u0430\u043b\u043e\u0433 html-webpack-plugin<\/a> \u0432 esbuild \u044d\u0442\u043e esbuild-plugin-html<\/a>.<\/p>\n
import { htmlPlugin } from '@craftamap\/esbuild-plugin-html';  config.plugins.push(htmlPlugin({   files: [{     entryPoints: ['src\/client.tsx'],     filename: 'template.html',     scriptLoading: 'defer',     htmlTemplate: fs.readFileSync(path.resolve('.\/src\/templates\/template.html'), 'utf-8'),   }], }));<\/code><\/pre>\n
\u041e\u043d \u0441\u043f\u0440\u0430\u0432\u0438\u043b\u0441\u044f \u0441 \u0437\u0430\u0434\u0430\u0447\u0435\u0439, \u043e\u0434\u043d\u0430\u043a\u043e \u043f\u043b\u0430\u0433\u0438\u043d\u0430 \u0434\u043b\u044f \u0432\u0441\u0442\u0430\u0432\u043a\u0438 preload \u0441\u0441\u044b\u043b\u043e\u043a \u044f \u043d\u0435 \u043d\u0430\u0448\u0435\u043b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0441\u043d\u043e\u0432\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u043f\u043b\u0430\u0433\u0438\u043d \u043f\u043e\u0434 \u044d\u0442\u0443 \u0437\u0430\u0434\u0430\u0447\u0443 esbuild-plugin-inject-preload<\/a>. \u042d\u0442\u043e\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b \u043a\u0440\u0438\u0442\u0438\u0447\u0435\u043d \u0434\u043b\u044f \u0440\u044f\u0434\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0448\u0438\u0440\u0438\u043d\u044b \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0431\u043b\u043e\u043a\u043e\u0432, \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u043e\u043c. \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0434\u043b\u044f \u0437\u0430\u0434\u0430\u0447\u0438 «\u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043c\u0435\u043d\u044e, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0448\u0438\u0440\u0438\u043d\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430» \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u0438\u0431\u043e \u0440\u0443\u0447\u043d\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0447\u0435\u0440\u0435\u0437 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 @media (max-width: 600px)<\/code> \u043b\u0438\u0431\u043e js-\u043a\u043e\u0434. \u041f\u0440\u0438 \u0432\u0442\u043e\u0440\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435, \u0435\u0441\u043b\u0438 \u0448\u0440\u0438\u0444\u0442\u044b \u043d\u0435 \u0443\u0441\u043f\u0435\u043b\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f, \u0442\u043e \u0448\u0438\u0440\u0438\u043d\u0430 \u0431\u043b\u043e\u043a\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u0441\u0445\u043e\u0434\u044f \u0438\u0437 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0433\u043e \u0448\u0440\u0438\u0444\u0442\u0430, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0430\u0441\u0445\u043e\u0434\u0438\u0442\u044c\u0441\u044f \u0441 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438 \u043f\u043e\u0441\u043b\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0448\u0440\u0438\u0444\u0442\u043e\u0432. \u0422\u0430\u043a\u0436\u0435 \u043f\u0440\u0435\u043b\u043e\u0430\u0434\u0438\u043d\u0433 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0448\u0440\u0438\u0444\u0442\u043e\u0432, \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043d\u0430 UX \u0438 \u043f\u0435\u0440\u0444\u043e\u043c\u0430\u043d\u0441\u0435 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 (\u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u044b\u0433\u0430\u044e\u0449\u0438\u0445 \u0441\u0442\u0440\u043e\u043a \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432).<\/p>\n
import { pluginInjectPreload } from 'esbuild-plugin-inject-preload';  config.plugins.push(pluginInjectPreload({   ext: '.woff',   linkType: 'font',   templatePath: path.resolve(paths.build, 'template.html'),   replaceString: '<!-- FONT_PRELOAD -->', }));<\/code><\/pre>\n
\u0421\u0436\u0430\u0442\u0438\u0435 \u0432 gzip \/ brotli<\/h3>\n
\u0421 \u0437\u0430\u0434\u0430\u0447\u0435\u0439 \u0445\u043e\u0440\u043e\u0448\u043e \u0441\u043f\u0440\u0430\u0432\u0438\u043b\u0441\u044f \u043f\u043b\u0430\u0433\u0438\u043d esbuild-plugin-compress<\/a>, \u043e\u0434\u043d\u0430\u043a\u043e \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043f\u043e\u0432\u043e\u0437\u0438\u0442\u044c\u0441\u044f \u0441 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u043c\u0438 \u0434\u043b\u044f micromatch<\/a>, \u0447\u0442\u043e\u0431\u044b \u0441\u0436\u0438\u043c\u0430\u043b\u0438\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e js \u0438 css \u0444\u0430\u0439\u043b\u044b. \u0422\u0430\u043a\u0436\u0435 \u043e\u043d \u043d\u0435 \u0443\u043c\u0435\u0435\u0442 \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u0441 \u0444\u0430\u0439\u043b\u0430\u043c\u0438, \u0440\u0430\u0437\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c\u0438 \u043f\u043e \u0440\u0430\u0437\u043d\u044b\u043c \u043f\u0430\u043f\u043a\u0430\u043c \u0443\u0441\u043b\u043e\u0432\u0438\u0435\u043c assetNames: '[ext]\/[name]-[hash]'<\/code>.<\/p>\n
import { compress } from 'esbuild-plugin-compress';  config.write = false; config.assetNames = '[ext]\/[name]-[hash]'; \/\/ \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 config.assetNames = '[name]-[hash]'; \/\/ \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442  config.plugins.push(compress({   gzip: true,   gzipOptions: { level: 9 },   brotli: true,   emitOrigin: true,   \/\/ https:\/\/github.com\/micromatch\/micromatch   exclude: ['!(**\/*.@(js|css))'], }));<\/code><\/pre>\n
\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u043b\u0438\u043d\u0433<\/h3>\n
\u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u044d\u0442\u043e\u0439 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0441\u0435\u0439\u0447\u0430\u0441 \u0432 esbuild \u043d\u0435\u0442, \u043e\u0434\u043d\u0430\u043a\u043e \u0432\u0441\u0435\u0433\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d. \u0422\u0430\u043a, \u044f \u043f\u0440\u0438\u0432\u044b\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c SWC \u0432 \u0441\u0432\u044f\u0437\u043a\u0435 \u0441 Webpack, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d \u0431\u044b\u0441\u0442\u0440\u0435\u0435 Babel \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u043b\u0438\u043d\u0433. \u0414\u043b\u044f \u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0435\u0441\u0442\u044c \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0439 \u0438 \u043d\u0435\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0449\u0438\u0439 \u0430\u0432\u0442\u043e\u043f\u043e\u043b\u0438\u0444\u0438\u043b\u043b\u0438\u043d\u0433 \u043f\u043b\u0430\u0433\u0438\u043d esbuild-plugin-swc<\/a>, \u0442\u0430\u043a \u0447\u0442\u043e \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u0432\u0435\u0440\u0441\u0438\u044e esbuild-plugin-swc2<\/a>. \u0412 \u0438\u0442\u043e\u0433\u0435 \u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043f\u0440\u0438\u0432\u044b\u043a \u0437\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0433\u043e\u0434\u044b \u0438 \u0441 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0430\u043c\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0443\u043c\u0435\u044e \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u044c, \u0447\u0442\u043e \u0432\u043d\u0435\u0437\u0430\u043f\u043d\u043e \u043d\u0435 \u0432\u044b\u0441\u0442\u0440\u0435\u043b\u0438\u0442 \u0447\u0442\u043e-\u0442\u043e \u0432\u0440\u043e\u0434\u0435 String.padStart is not a function<\/code>.<\/p>\n
import { pluginSwc } from 'esbuild-plugin-swc2';  config.plugins.push(pluginSwc({   jsc: {     parser: { tsx: true, syntax: 'typescript' },     transform: { react: { runtime: 'automatic', useBuiltins: false } },   },   env: {      mode: 'usage',      targets: JSON.parse(fs.readFileSync('package.json', 'utf-8')).browserslist,   }, }));<\/code><\/pre>\n
\u041e\u0434\u043d\u0430\u043a\u043e \u044f \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u0441\u0432\u044f\u0437\u043a\u0430 esbuild + SWC — \u044d\u0442\u043e es5. \u0422\u043e \u0435\u0441\u0442\u044c \u043f\u0440\u0438 \u043f\u043e\u043f\u044b\u0442\u043a\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0431\u0430\u043d\u0434\u043b, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0449\u0438\u0439 Firefox 50, \u043e\u043d \u0443\u043f\u0430\u0434\u0435\u0442 \u0441 \u043e\u0448\u0438\u0431\u043a\u0430\u043c\u0438<\/p>\n
ERROR: Transforming destructuring to the configured target environment  (\"firefox50\") is not supported yet  ERROR: Transforming const to the configured target environment  (\"firefox50\") is not supported yet<\/code><\/pre>\n
\u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0445\u043e\u0442\u044f \u043f\u043e\u043b\u0438\u0444\u0438\u043b\u043b\u0438\u043d\u0433 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0438 \u043a\u043e\u0434 \u0431\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0432 \u044d\u0442\u043e\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0441\u0430\u043c esbuild \u043f\u043e\u043a\u0430 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0432 \u0442\u0430\u043a\u043e\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 esbuild-plugin-babel<\/a>, \u0430 \u043d\u0435 SWC, \u043d\u043e \u0434\u043b\u044f \u0442\u0435\u043a\u0443\u0449\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u043c\u043d\u0435 \u043d\u0435 \u0431\u044b\u043b\u0430 \u043d\u0443\u0436\u043d\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044d\u0442\u043e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u044f \u043d\u0435 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043b.<\/p>\n
\u0410\u043d\u0430\u043b\u0438\u0437 \u0431\u0430\u043d\u0434\u043b\u0430<\/h3>\n
\u042f \u043f\u0440\u0438\u0432\u044b\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 webpack-bundle-analyzer<\/a>, \u043e\u0434\u043d\u0430\u043a\u043e \u0435\u0433\u043e \u043f\u043e\u0440\u0442\u0430 \u0434\u043b\u044f esbuild \u043d\u0435\u0442. \u0412 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u044b\u0432\u043e\u0434 \u043c\u0435\u0442\u0430-\u0444\u0430\u0439\u043b\u0430 \u0438 \u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0435\u0433\u043e \u0432 https:\/\/esbuild.github.io\/analyze\/<\/a> \u0438\u043b\u0438 https:\/\/bundle-buddy.com\/<\/a> , \u043a\u043e\u0442\u043e\u0440\u044b\u0435, \u043a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0438 \u0431\u043b\u0438\u0437\u043a\u043e \u043d\u0435 \u0442\u0430\u043a\u0438\u0435 \u0443\u0434\u043e\u0431\u043d\u044b\u0435 + \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0440\u0443\u0447\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u043f\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0444\u0430\u0439\u043b\u0430 \u0432 \u043e\u043d\u043b\u0430\u0439\u043d-\u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b. <\/p>\n
\n
https:\/\/esbuild.github.io\/analyze\/<\/a><\/figcaption><\/div>\n<\/figure>\n
\u0415\u0441\u0442\u044c \u043f\u043b\u0430\u0433\u0438\u043d esbuild-visualizer<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u043e\u0436\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043c\u0435\u0442\u0430-\u0444\u0430\u0439\u043b, \u0437\u0430\u0442\u0435\u043c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c html-\u0444\u0430\u0439\u043b \u0441 \u043e\u0442\u0447\u0435\u0442\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. <\/p>\n
\n
esbuild-visualizer<\/figcaption><\/div>\n<\/figure>\n
\u0418\u0437\u0431\u0430\u043b\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e\u043c webpack-bundle-analyzer, \u044f \u043d\u0430\u0431\u0440\u043e\u0441\u0430\u043b \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0439 \u043f\u043b\u0430\u0433\u0438\u043d \u0434\u043b\u044f \u0435\u0433\u043e \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 esbuild-plugin-<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-359875","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/359875","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=359875"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/359875\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=359875"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=359875"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=359875"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}