WIP: Optimizing performance #191
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…actjs.org into optimizing-performance
|
Deploy preview for es-reactjs ready! Built with commit 7564de2 |
|
@RamirezAlex I will review it this afternoon. Thank you. |
DanielGarc
reviewed
Mar 6, 2019
|
|
||
| ``` | ||
| npm run build | ||
| ``` | ||
|
|
||
| This will create a production build of your app in the `build/` folder of your project. | ||
| Esto creará una *build* de producción de tu aplicación el directorio `build/` de tu proyecto. |
There was a problem hiding this comment.
Suggested change
| Esto creará una *build* de producción de tu aplicación el directorio `build/` de tu proyecto. | |
| Esto creará una *build* de producción de tu aplicación en el directorio `build/` de tu proyecto. |
DanielGarc
reviewed
Mar 6, 2019
| * The [`envify`](https://github.com/hughsk/envify) transform ensures the right build environment is set. Make it global (`-g`). | ||
| * The [`uglifyify`](https://github.com/hughsk/uglifyify) transform removes development imports. Make it global too (`-g`). | ||
| * Finally, the resulting bundle is piped to [`uglify-js`](https://github.com/mishoo/UglifyJS2) for mangling ([read why](https://github.com/hughsk/uglifyify#motivationusage)). | ||
| * La transformación [`envify`](https://github.com/hughsk/envify) asegura que el ambiente de la *build* sea correcto. Hazlo lo global (`-g`). |
There was a problem hiding this comment.
Suggested change
| * La transformación [`envify`](https://github.com/hughsk/envify) asegura que el ambiente de la *build* sea correcto. Hazlo lo global (`-g`). | |
| * La transformación [`envify`](https://github.com/hughsk/envify) asegura que el ambiente de la *build* sea correcto. Hazlo global (`-g`). |
DanielGarc
reviewed
Mar 6, 2019
| * The [`uglifyify`](https://github.com/hughsk/uglifyify) transform removes development imports. Make it global too (`-g`). | ||
| * Finally, the resulting bundle is piped to [`uglify-js`](https://github.com/mishoo/UglifyJS2) for mangling ([read why](https://github.com/hughsk/uglifyify#motivationusage)). | ||
| * La transformación [`envify`](https://github.com/hughsk/envify) asegura que el ambiente de la *build* sea correcto. Hazlo lo global (`-g`). | ||
| * La transformación [`uglifyify`](https://github.com/hughsk/uglifyify) remueve los import de desarollo. Hazlo global tambien (`-g`). |
There was a problem hiding this comment.
Suggested change
| * La transformación [`uglifyify`](https://github.com/hughsk/uglifyify) remueve los import de desarollo. Hazlo global tambien (`-g`). | |
| * La transformación [`uglifyify`](https://github.com/hughsk/uglifyify) remueve los *imports* de desarollo. Hazlo global también (`-g`). |
I think we should use the same format for 'imports' as we do for 'build' and others.
DanielGarc
reviewed
Mar 6, 2019
| @@ -133,18 +131,18 @@ plugins: [ | |||
| ] | |||
| ``` | |||
|
|
|||
| For a complete setup example [see this gist](https://gist.github.com/Rich-Harris/cb14f4bc0670c47d00d191565be36bf0). | |||
| Para un ejemple de configuración completo [mira este gist](https://gist.github.com/Rich-Harris/cb14f4bc0670c47d00d191565be36bf0). | |||
There was a problem hiding this comment.
Suggested change
| Para un ejemple de configuración completo [mira este gist](https://gist.github.com/Rich-Harris/cb14f4bc0670c47d00d191565be36bf0). | |
| Para un ejemplo de configuración completo [mira este gist](https://gist.github.com/Rich-Harris/cb14f4bc0670c47d00d191565be36bf0). |
DanielGarc
reviewed
Mar 6, 2019
|
|
||
| Remember that you only need to do this for production builds. You shouldn't apply `UglifyJsPlugin` or `DefinePlugin` with `'production'` value in development because they will hide useful React warnings, and make the builds much slower. | ||
| Recuerda que solo necesitas hacer para las *builds* de producción. No deberias aplicar `UglifyJsPlugin` o `DefinePlugin` con valor `'production'` en desarrollo, por que ocultaran las advertencias de React y hará las *builds* mucho más lentas. |
There was a problem hiding this comment.
Suggested change
| Recuerda que solo necesitas hacer para las *builds* de producción. No deberias aplicar `UglifyJsPlugin` o `DefinePlugin` con valor `'production'` en desarrollo, por que ocultaran las advertencias de React y hará las *builds* mucho más lentas. | |
| Recuerda que solo necesitas hacer esto para las *builds* de producción. No deberias aplicar `UglifyJsPlugin` o `DefinePlugin` con valor `'production'` en desarrollo, por que ocultaran las advertencias de React y hará las *builds* mucho más lentas. |
DanielGarc
reviewed
Mar 6, 2019
|
|
||
| ## Profiling Components with the Chrome Performance Tab {#profiling-components-with-the-chrome-performance-tab} | ||
|
|
||
| In the **development** mode, you can visualize how components mount, update, and unmount, using the performance tools in supported browsers. For example: | ||
| En el modo de **desarrollo**, puedes visualizar como montar componentes, actualizarlos y desmontarlos usando las herramientas para rendimiento soportadas por los navegadores. Por ejemplo: |
There was a problem hiding this comment.
Suggested change
| En el modo de **desarrollo**, puedes visualizar como montar componentes, actualizarlos y desmontarlos usando las herramientas para rendimiento soportadas por los navegadores. Por ejemplo: | |
| En el modo de **desarrollo**, puedes visualizar cómo se montan los componentes, actualizan y desmontan, usando las herramientas para rendimiento soportadas por los navegadores. Por ejemplo: |
|
@Darking360 I made a bunch of comments of what should be updated (mainly typos and accents), there is also some (maybe half) translation needed, I can do this but, this is one of my firsts contributions and I'm not sure what's the best way to go about it. Should I create a new branch for this page and make the updates or is there a way to keep working on @RamirezAlex branch. Thank you! edit: fixed typos. |
|
@DanielGarc Good morning. Ok I see, so let's do this, create a new branch and merge the changes from this one into the new branch and you can continue the work there, I'll close this PR and wait for yours with all the final work, that way merging this branch the changes from @RamirezAlex won't get lost or anything 💪 and both contributions will be added to the final version. Let me know if you have any question, if you don't I'll close it now. Please tag me as soon as you open the PR for your new branch 🚀 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
@DanielGarc please review this and take over :)