Revision in guide/migration/global-api-treeshaking

Author: GuiDevloper

src/guide/migration/global-api-treeshaking.md

@@ -3,9 +3,9 @@ badges:
   - breaking
 ---
 
-# API Global Treeshaking <MigrationBadges :badges="$frontmatter.badges" />
+# TreeShaking da API Global <MigrationBadges :badges="$frontmatter.badges" />
 
-## Syntax 2.x
+## Sintaxe v2.x
 
 Se você já teve que manipular manualmente o DOM no Vue, pode ter encontrado este padrão:
 
@@ -23,26 +23,26 @@ Ou, se você fez testes unitários em seu aplicativo envolvendo [componentes ass
 import { shallowMount } from '@vue/test-utils'
 import { MyComponent } from './MyComponent.vue'
 
-test('an async feature', async () => {
+test('um recurso assíncrono', async () => {
   const wrapper = shallowMount(MyComponent)
 
   // execute alguma tarefa relacionada ao DOM
 
   await wrapper.vm.$nextTick()
 
-  // execute seus assertions
+  // execute suas asserções
 })
 ```
 
 `Vue.nextTick()` é uma API global exposta diretamente em um único objeto Vue - na verdade, o método de instância `$nextTick()` é apenas um *wrapper* em torno de `Vue.nextTick()` com o contexto `this` do retorno de chamada automaticamente vinculado à instância atual por conveniência.
 
-Mas e se você nunca teve que lidar com a manipulação manual do DOM, nem está usando ou testando componentes assíncronos em nosso aplicativo? Ou, e se, por qualquer motivo, você preferir usar o bom e velho `window.setTimeout ()` em vez disso? Nesse caso, o código para `nextTick()` se tornará um código morto - ou seja, o código que foi escrito, mas nunca usado. E o código morto dificilmente é uma coisa boa, especialmente em nosso contexto do lado do cliente, onde cada kilobyte é importante.
+Mas e se você nunca teve que lidar com manipulação manual do DOM, nem está usando ou testando componentes assíncronos em nosso aplicativo? Ou, e se, por qualquer motivo, você preferir usar o bom e velho `window.setTimeout()` em vez disso? Nesse caso, o código para `nextTick()` se tornará um código morto - ou seja, o código que foi escrito, mas nunca usado. E código morto dificilmente é uma coisa boa, especialmente em nosso contexto do lado do cliente, onde cada kilobyte é importante.
 
-Os empacotadores de módulo, como o [webpack](https://webpack.js.org/), oferecem suporte à [tree-shaking](https://webpack.js.org/guides/tree-shaking/), que é um termo sofisticado para “eliminação de código morto”. Infelizmente, devido à forma como o código é escrito nas versões anteriores do Vue, APIs globais como `Vue.nextTick()` não podem ser *tree-shakeable* e serão incluídas no pacote final, independentemente de onde sejam realmente usadas ou não.
+Os empacotadores de módulo, como o [webpack](https://webpack.js.org/), oferecem suporte à [tree-shaking](https://webpack.js.org/guides/tree-shaking/), que é um termo sofisticado para “eliminação de código morto”. Infelizmente, devido à forma como o código é escrito nas versões anteriores do Vue, APIs globais como `Vue.nextTick()` não podem ser eliminadas com *tree-shaking* e serão incluídas no pacote final, independentemente de onde sejam realmente usadas ou não.
 
-## Syntax 3.x
+## Sintaxe v3.x
 
-No Vue 3, as APIs globais e internas foram reestruturadas tendo em mente o suporte para *tree-shakeable*. Como resultado, as APIs globais agora podem ser acessadas apenas como exportações nomeadas para a construção de Módulos ES. Por exemplo, nossos blocos de códigos anteriores agora devem ser semelhantes a este:
+No Vue 3, as APIs globais e internas foram reestruturadas tendo em mente o suporte à *tree-shaking*. Como resultado, as APIs globais agora podem ser acessadas apenas como exportações nomeadas para a construção de Módulos ES. Por exemplo, nossos blocos de códigos anteriores agora devem ser semelhantes a este:
 
 ```js
 import { nextTick } from 'vue'
@@ -59,35 +59,35 @@ import { shallowMount } from '@vue/test-utils'
 import { MyComponent } from './MyComponent.vue'
 import { nextTick } from 'vue'
 
-test('an async feature', async () => {
+test('um recurso assíncrono', async () => {
   const wrapper = shallowMount(MyComponent)
 
   // execute alguma tarefa relacionada ao DOM
 
   await nextTick()
 
-  // execute seus assertions
+  // execute suas asserções
 })
 ```
 
-Chamar `Vue.nextTick ()` diretamente agora resultará no abominável erro `undefined is not a function`.
+Chamar `Vue.nextTick()` diretamente agora resultará no abominável erro `undefined is not a function`.
 
-Com essa mudança, com o bundler módulo suportando *tree-shaking*, APIs globais que não são usadas em seu aplicativo Vue serão eliminadas do pacote final, resultando em um tamanho ideal de arquivo.
+Com essa mudança, dado que o empacotador de módulos suporte *tree-shaking*, APIs globais que não são usadas em seu aplicativo Vue serão eliminadas do pacote final, resultando em um ótimo tamanho de arquivo.
 
-## APIs afetadas
+## APIs Afetadas
 
 Essas APIs globais no Vue 2.x são afetadas por esta mudança:
 
 - `Vue.nextTick`
 - `Vue.observable` (substituído por `Vue.reactive`)
 - `Vue.version`
 - `Vue.compile` (apenas em compilações completas)
-- `Vue.set` (apenas em construções compactas)
-- `Vue.delete` (apenas em construções compactas)
+- `Vue.set` (apenas em compilações de compatibilidade)
+- `Vue.delete` (apenas em compilações de compatibilidade)
 
 ## Ajudantes Internos
 
-Além das APIs públicas, muitos dos *components/helpers* internos agora também são exportados como exportações nomeadas. Isso permite que o compilador produza um código que importa apenas recursos quando eles são usados. Por exemplo, o seguinte template:
+Além das APIs públicas, muitos dos componentes/ajudantes internos agora também são exportados como exportações nomeadas. Isso permite que o compilador produza um código que importa apenas recursos quando eles são usados. Por exemplo, o seguinte template:
 
 ```html
 <transition>
@@ -105,18 +105,17 @@ export function render() {
 }
 ```
 
-Isso significa essencialmente que o componente `Transition` só é importado quando o aplicativo realmente faz uso dele.
-Em outras palavras, se o aplicativo não tiver nenhum componente `<transition>`, o código que suporta esse recurso não estará presente no pacote final.
+Isso significa essencialmente que o componente `Transition` só é importado quando o aplicativo realmente faz uso dele. Em outras palavras, se o aplicativo não tiver nenhum componente `<transition>`, o código que suporta esse recurso não estará presente no pacote final.
 
-Com o *tree-shake* global, o usuário apenas “paga” pelos recursos que realmente usa. Melhor ainda, sabendo que os recursos opcionais não aumentarão o tamanho do pacote para aplicativos que não os utilizam, o tamanho do framework se tornou muito menos uma preocupação para recursos centrais adicionais no futuro, se é que o fará.
+Com o *tree-shaking* global, o usuário “paga” apenas pelos recursos que realmente usa. Melhor ainda, sabendo que os recursos opcionais não aumentarão o tamanho do pacote para aplicativos que não os utilizam, o tamanho do framework se tornou muito menos uma preocupação para recursos centrais adicionais no futuro, se é que o fará.
 
-::: aviso importante
+::: warning Importante
 O que foi dito acima se aplica apenas as [Construções de Módulos ES](/guide/installation.html#explanation-of-different-builds) para uso com empacotadores capazes de aplicar *tree-shaking* - o construtor UMD ainda inclui todos os recursos e expõe tudo na variável global Vue (e o compilador produzirá a saída apropriada para usar APIs fora do global em vez de importar).
 :::
 
 ## Uso em Plugins
 
-Se o seu plug-in depende de uma API global Vue 2.x afetada, por exemplo:
+Se o seu plug-in depende de uma API global do Vue 2.x afetada, por exemplo:
 
 ```js
 const plugin = {
@@ -142,7 +141,7 @@ const plugin = {
 }
 ```
 
-Se você usar um empacotador de módulo como webpack, isso pode fazer com que o código-fonte do Vue seja agrupado no plug-in e, na maioria das vezes, não é o que você esperava. Uma prática comum para evitar que isso aconteça é configurar o empacotador de módulo para excluir Vue do pacote final. No caso do webpack, você pode usar a opção de configuração [ʻexternals`] (https://webpack.js.org/configuration/externals/):
+Se você usar um empacotador de módulo como webpack, isso pode fazer com que o código-fonte do Vue seja agrupado no plug-in e, na maioria das vezes, não é o que você esperava. Uma prática comum para evitar que isso aconteça é configurar o empacotador de módulo para excluir Vue do pacote final. No caso do webpack, você pode usar a opção de configuração [`externals`](https://webpack.js.org/configuration/externals/):
 
 ```js
 // webpack.config.js
@@ -156,7 +155,7 @@ module.exports = {
 
 Isso dirá ao webpack para tratar o módulo Vue como uma biblioteca externa e não empacotá-lo.
 
-Se o empacotador de módulo de sua escolha for [Rollup] (https://rollupjs.org/), você basicamente obterá o mesmo efeito de graça, pois por padrão o Rollup tratará IDs de módulo absolutos (`'vue'` em nosso caso ) como dependências externas e não incluí-las no pacote final. No entanto, durante o empacotamento, ele pode emitir um aviso [“Tratando vue como dependência externa”] (https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency), que pode ser suprimido com a opção `external`:
+Se o empacotador de módulo de sua escolha for [Rollup](https://rollupjs.org/), você basicamente obterá o mesmo efeito de graça, pois por padrão o Rollup tratará IDs de módulo absolutos (`'vue'` em nosso caso) como dependências externas e não incluí-las no pacote final. No entanto, durante o empacotamento, ele pode emitir um aviso [“Tratando vue como dependência externa”](https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency), que pode ser suprimido com a opção `external`:
 
 ```js
 // rollup.config.js