You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/docs/optimizing-performance.md
+11-72Lines changed: 11 additions & 72 deletions
Original file line number
Diff line number
Diff line change
@@ -51,25 +51,14 @@ npm run build
51
51
52
52
### Brunch {#brunch}
53
53
54
-
<<<<<<< HEAD
55
-
Для наиболее эффективной продакшен-сборки с Brunch, установите плагин [`uglify-js-brunch`](https://github.com/brunch/uglify-js-brunch).
54
+
Для наиболее эффективной продакшен-сборки с Brunch, установите плагин [`terser-brunch`](https://github.com/brunch/terser-brunch).
56
55
57
56
```
58
57
# В случае использования npm
59
-
npm install --save-dev uglify-js-brunch
60
-
61
-
# В случае использования Yarn
62
-
yarn add --dev uglify-js-brunch
63
-
=======
64
-
For the most efficient Brunch production build, install the [`terser-brunch`](https://github.com/brunch/terser-brunch) plugin:
65
-
66
-
```
67
-
# If you use npm
68
58
npm install --save-dev terser-brunch
69
59
70
-
# If you use Yarn
60
+
# В случае использования Yarn
71
61
yarn add --dev terser-brunch
72
-
>>>>>>> e1abbdecfd1a5a804bd38852e88373f54ddde014
73
62
```
74
63
75
64
Затем, для создания продакшен сборки, добавьте флаг `-p` к команде `build`:
@@ -85,85 +74,47 @@ brunch build -p
85
74
Для наиболее эффективной продакшен-сборки с Browserify, установите несколько плагинов:
86
75
87
76
```
88
-
<<<<<<< HEAD
89
77
# В случае использования npm
90
-
npm install --save-dev envify uglify-js uglifyify
91
-
92
-
# В случае использования Yarn
93
-
yarn add --dev envify uglify-js uglifyify
94
-
=======
95
-
# If you use npm
96
78
npm install --save-dev envify terser uglifyify
97
79
98
-
# If you use Yarn
80
+
# В случае использования Yarn
99
81
yarn add --dev envify terser uglifyify
100
-
>>>>>>> e1abbdecfd1a5a804bd38852e88373f54ddde014
101
82
```
102
83
103
84
При создании продакшен-сборки, убедитесь, что вы добавили эти пакеты для преобразования **(порядок имеет значение)**:
104
85
105
-
<<<<<<< HEAD
106
86
* Плагин [`envify`](https://github.com/hughsk/envify) обеспечивает правильную среду для сборки. Сделайте его глобальным (`-g`).
107
87
* Плагин [`uglifyify`](https://github.com/hughsk/uglifyify) удаляет импорты, добавленные при разработке. Сделайте его глобальным (`-g`).
108
-
* Наконец, полученная сборка отправляется к [`uglify-js`](https://github.com/mishoo/UglifyJS2) для минификации ([прочитайте, зачем это нужно](https://github.com/hughsk/uglifyify#motivationusage)).
109
-
=======
110
-
* The [`envify`](https://github.com/hughsk/envify) transform ensures the right build environment is set. Make it global (`-g`).
111
-
* The [`uglifyify`](https://github.com/hughsk/uglifyify) transform removes development imports. Make it global too (`-g`).
112
-
* Finally, the resulting bundle is piped to [`terser`](https://github.com/terser-js/terser) for mangling ([read why](https://github.com/hughsk/uglifyify#motivationusage)).
113
-
>>>>>>> e1abbdecfd1a5a804bd38852e88373f54ddde014
88
+
* Наконец, полученная сборка отправляется к [`terser`](https://github.com/terser-js/terser) для минификации ([прочитайте, зачем это нужно](https://github.com/hughsk/uglifyify#motivationusage)).
114
89
115
90
К примеру:
116
91
117
92
```
118
93
browserify ./index.js \
119
94
-g [ envify --NODE_ENV production ] \
120
-
-g uglifyify\
95
+
-g terser \
121
96
| terser --compress --mangle > ./bundle.js
122
97
```
123
98
124
-
<<<<<<< HEAD
125
-
>**Примечание:**
126
-
>
127
-
>Имя пакета `uglify-js`, но фактически он предоставляет исполняемый файл с именем `uglifyjs`.<br>
128
-
>Это не опечатка.
129
-
130
99
Помните, что это нужно делать только для продакшен-сборки. Вам не следует использовать эти плагины в процессе разработки, потому что это скроет вспомогательные предупреждения React и замедлит процесс сборки.
131
-
=======
132
-
Remember that you only need to do this for production builds. You shouldn't apply these plugins in development because they will hide useful React warnings, and make the builds much slower.
133
-
>>>>>>> e1abbdecfd1a5a804bd38852e88373f54ddde014
134
100
135
101
### Rollup {#rollup}
136
102
137
103
Для наиболее эффективной продакшен-сборки с Rollup, установите несколько плагинов:
При создании продакшен-сборки, убедитесь, что вы добавили эти плагины **(порядок имеет значение)**:
157
114
158
-
<<<<<<< HEAD
159
115
* Плагин [`replace`](https://github.com/rollup/rollup-plugin-replace) обеспечивает правильную среду для сборки.
160
116
* Плагин [`commonjs`](https://github.com/rollup/rollup-plugin-commonjs) обеспечивает поддержку CommonJS в Rollup.
161
-
* Плагин [`uglify`](https://github.com/TrySound/rollup-plugin-uglify) сжимает и оптимизирует финальную сборку.
162
-
=======
163
-
* The [`replace`](https://github.com/rollup/rollup-plugin-replace) plugin ensures the right build environment is set.
164
-
* The [`commonjs`](https://github.com/rollup/rollup-plugin-commonjs) plugin provides support for CommonJS in Rollup.
165
-
* The [`terser`](https://github.com/TrySound/rollup-plugin-terser) plugin compresses and mangles the final bundle.
166
-
>>>>>>> e1abbdecfd1a5a804bd38852e88373f54ddde014
117
+
* Плагин [`terser`](https://github.com/TrySound/rollup-plugin-terser) сжимает и оптимизирует финальную сборку.
167
118
168
119
```js
169
120
plugins: [
@@ -179,11 +130,7 @@ plugins: [
179
130
180
131
Полный пример настройки можно [посмотреть здесь](https://gist.github.com/Rich-Harris/cb14f4bc0670c47d00d191565be36bf0).
181
132
182
-
<<<<<<< HEAD
183
-
Помните, что это нужно делать только для продакшен-сборки. Вам не следует использовать плагин `uglify` или плагин `replace` со значением `'production'` в процессе разработки, потому что это скроет вспомогательные предупреждения React и замедлит процесс сборки.
184
-
=======
185
-
Remember that you only need to do this for production builds. You shouldn't apply the `terser` plugin or the `replace` plugin with `'production'` value in development because they will hide useful React warnings, and make the builds much slower.
186
-
>>>>>>> e1abbdecfd1a5a804bd38852e88373f54ddde014
133
+
Помните, что это нужно делать только для продакшен-сборки. Вам не следует использовать плагин `terser` или плагин `replace` со значением `'production'` в процессе разработки, потому что это скроет вспомогательные предупреждения React и замедлит процесс сборки.
187
134
188
135
### webpack {#webpack}
189
136
@@ -192,30 +139,22 @@ Remember that you only need to do this for production builds. You shouldn't appl
192
139
>Если вы используете Create React App, пожалуйста, следуйте [инструкциям выше](#create-react-app).<br>
193
140
>Этот раздел подойдёт для тех, кто самостоятельно настраивает webpack.
194
141
195
-
<<<<<<< HEAD
196
-
Для наиболее эффективной продакшен-сборки с помощью webpack обязательно включите эти плагины в конфигурацию:
197
-
=======
198
-
Webpack v4+ will minify your code by default in production mode.
199
-
>>>>>>> e1abbdecfd1a5a804bd38852e88373f54ddde014
142
+
Webpack 4.0 и выше по умолчанию минифицирует код в продакшен-режиме.
Вы можете узнать об этом больше в [документации webpack](https://webpack.js.org/guides/production/).
213
156
214
-
<<<<<<< HEAD
215
-
Помните, что это нужно делать только для продакшен-сборки. Вам не стоит использовать `UglifyJsPlugin` или `DefinePlugin` со значением `'production'` в процессе разработки, потому что тогда скроются вспомогательные предупреждения React и замедлится процесс сборки.
216
-
=======
217
-
Remember that you only need to do this for production builds. You shouldn't apply `TerserPlugin` in development because it will hide useful React warnings, and make the builds much slower.
218
-
>>>>>>> e1abbdecfd1a5a804bd38852e88373f54ddde014
157
+
Помните, что это нужно делать только для продакшен-сборки. Вам не стоит использовать `TerserPlugin`, потому что тогда скроются вспомогательные предупреждения React и замедлится процесс сборки.
219
158
220
159
## Анализ производительности компонентов с помощью вкладки Chrome «Performance» {#profiling-components-with-the-chrome-performance-tab}
0 commit comments