Skip to content

Commit 069b314

Browse files
authored
Update optimizing-performance.md
1 parent 1679a54 commit 069b314

File tree

1 file changed

+11
-72
lines changed

1 file changed

+11
-72
lines changed

content/docs/optimizing-performance.md

Lines changed: 11 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -51,25 +51,14 @@ npm run build
5151

5252
### Brunch {#brunch}
5353

54-
<<<<<<< HEAD
55-
Для наиболее эффективной продакшен-сборки с Brunch, установите плагин [`uglify-js-brunch`](https://github.com/brunch/uglify-js-brunch).
54+
Для наиболее эффективной продакшен-сборки с Brunch, установите плагин [`terser-brunch`](https://github.com/brunch/terser-brunch).
5655

5756
```
5857
# В случае использования 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
6858
npm install --save-dev terser-brunch
6959
70-
# If you use Yarn
60+
# В случае использования Yarn
7161
yarn add --dev terser-brunch
72-
>>>>>>> e1abbdecfd1a5a804bd38852e88373f54ddde014
7362
```
7463

7564
Затем, для создания продакшен сборки, добавьте флаг `-p` к команде `build`:
@@ -85,85 +74,47 @@ brunch build -p
8574
Для наиболее эффективной продакшен-сборки с Browserify, установите несколько плагинов:
8675

8776
```
88-
<<<<<<< HEAD
8977
# В случае использования 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
9678
npm install --save-dev envify terser uglifyify
9779
98-
# If you use Yarn
80+
# В случае использования Yarn
9981
yarn add --dev envify terser uglifyify
100-
>>>>>>> e1abbdecfd1a5a804bd38852e88373f54ddde014
10182
```
10283

10384
При создании продакшен-сборки, убедитесь, что вы добавили эти пакеты для преобразования **(порядок имеет значение)**:
10485

105-
<<<<<<< HEAD
10686
* Плагин [`envify`](https://github.com/hughsk/envify) обеспечивает правильную среду для сборки. Сделайте его глобальным (`-g`).
10787
* Плагин [`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)).
11489

11590
К примеру:
11691

11792
```
11893
browserify ./index.js \
11994
-g [ envify --NODE_ENV production ] \
120-
-g uglifyify \
95+
-g terser \
12196
| terser --compress --mangle > ./bundle.js
12297
```
12398

124-
<<<<<<< HEAD
125-
>**Примечание:**
126-
>
127-
>Имя пакета `uglify-js`, но фактически он предоставляет исполняемый файл с именем `uglifyjs`.<br>
128-
>Это не опечатка.
129-
13099
Помните, что это нужно делать только для продакшен-сборки. Вам не следует использовать эти плагины в процессе разработки, потому что это скроет вспомогательные предупреждения 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
134100

135101
### Rollup {#rollup}
136102

137103
Для наиболее эффективной продакшен-сборки с Rollup, установите несколько плагинов:
138104

139-
<<<<<<< HEAD
140105
```
141106
# В случае использования npm
142-
npm install --save-dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-uglify
143-
144-
# В случае использования Yarn
145-
yarn add --dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-uglify
146-
=======
147-
```bash
148-
# If you use npm
149107
npm install --save-dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-terser
150108
151-
# If you use Yarn
109+
# В случае использования Yarn
152110
yarn add --dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-terser
153-
>>>>>>> e1abbdecfd1a5a804bd38852e88373f54ddde014
154111
```
155112

156113
При создании продакшен-сборки, убедитесь, что вы добавили эти плагины **(порядок имеет значение)**:
157114

158-
<<<<<<< HEAD
159115
* Плагин [`replace`](https://github.com/rollup/rollup-plugin-replace) обеспечивает правильную среду для сборки.
160116
* Плагин [`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) сжимает и оптимизирует финальную сборку.
167118

168119
```js
169120
plugins: [
@@ -179,11 +130,7 @@ plugins: [
179130

180131
Полный пример настройки можно [посмотреть здесь](https://gist.github.com/Rich-Harris/cb14f4bc0670c47d00d191565be36bf0).
181132

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 и замедлит процесс сборки.
187134

188135
### webpack {#webpack}
189136

@@ -192,30 +139,22 @@ Remember that you only need to do this for production builds. You shouldn't appl
192139
>Если вы используете Create React App, пожалуйста, следуйте [инструкциям выше](#create-react-app).<br>
193140
>Этот раздел подойдёт для тех, кто самостоятельно настраивает webpack.
194141
195-
<<<<<<< HEAD
196-
Для наиболее эффективной продакшен-сборки с помощью webpack обязательно включите эти плагины в конфигурацию:
197-
=======
198-
Webpack v4+ will minify your code by default in production mode.
199-
>>>>>>> e1abbdecfd1a5a804bd38852e88373f54ddde014
142+
Webpack 4.0 и выше по умолчанию минифицирует код в продакшен-режиме.
200143

201144
```js
202145
const TerserPlugin = require('terser-webpack-plugin');
203146

204147
module.exports = {
205148
mode: 'production'
206149
optimization: {
207-
minimizer: [new TerserPlugin({ /* additional options here */ })],
150+
minimizer: [new TerserPlugin({ /* дополнительные опции */ })],
208151
},
209152
};
210153
```
211154

212155
Вы можете узнать об этом больше в [документации webpack](https://webpack.js.org/guides/production/).
213156

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 и замедлится процесс сборки.
219158

220159
## Анализ производительности компонентов с помощью вкладки Chrome «Performance» {#profiling-components-with-the-chrome-performance-tab}
221160

0 commit comments

Comments
 (0)