Vue.js

# Deploy em Produção

INFO

A maioria das dicas abaixo está habilitada por padrão se você estiver usando o Vue CLI (opens new window). Esta seção só é relevante se você estiver usando uma configuração de compilação customizada.

# Ativar o Modo de Produção

Durante o desenvolvimento, o Vue fornece muitos avisos para ajudá-lo com erros e armadilhas comuns. No entanto, essas strings de aviso se tornam inúteis em produção e aumentam o tamanho da carga útil do seu aplicativo. Além disso, algumas dessas verificações para avisos têm pequenos custos em tempo de execução que podem ser evitados no modo de produção (opens new window).

# Sem Ferramentas de Compilação

Se você estiver usando a compilação completa, ou seja, incluindo diretamente o Vue por meio de uma tag script sem uma ferramenta de compilação, certifique-se de usar a versão minificada para produção. Isso pode ser encontrado no Guia de Instalação.

# Com Ferramentas de Compilação

Ao usar uma ferramenta de compilação como Webpack ou Browserify, o modo de produção será determinado pelo process.env.NODE_ENV dentro do código fonte do Vue, e estará no modo de desenvolvimento por padrão. Ambas as ferramentas de compilação fornecem maneiras de substituir essa variável para habilitar o modo de produção do Vue, e os avisos serão removidos por minificadores durante a compilação. O Vue CLI tem isso pré-configurado para você, mas seria benéfico saber como é feito:

# Webpack

No Webpack 4+, você pode usar a opção mode:

module.exports = {
  mode: 'production'
}
1
2
3

# Browserify

  • Execute seu comando de empacotamento com a variável de ambiente NODE_ENV definida como "production". Isso diz ao vueify para evitar incluir hot-reload e código relacionado ao desenvolvimento.

  • Aplique uma transformação global envify (opens new window) ao seu pacote. Isso permite que o minificador remova todos os avisos no código-fonte do Vue envoltos em blocos condicionais de variáveis de ambiente. Por exemplo:

    NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
    1

  • Ou, usando envify (opens new window) com Gulp:

    // Use o módulo customizado envify para especificar variáveis ​​de ambiente
const envify = require('envify/custom')

browserify(browserifyOptions)
  .transform(vueify)
  .transform(
    // Necessário para processar arquivos de node_modules
    { global: true },
    envify({ NODE_ENV: 'production' })
  )
  .bundle()
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

  • Ou, usando envify (opens new window) com Grunt e grunt-browserify (opens new window):

    // Use o módulo customizado envify para especificar variáveis ​​de ambiente
const envify = require('envify/custom')

browserify: {
  dist: {
    options: {
      // Função para desviar da ordem padrão do grunt-browserify
      configure: (b) =>
        b
          .transform('vueify')
          .transform(
            // Necessário para processar arquivos de node_modules
            { global: true },
            envify({ NODE_ENV: 'production' })
          )
          .bundle()
    }
  }
}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19

# Rollup

Use @rollup/plugin-replace (opens new window):

const replace = require('@rollup/plugin-replace')

rollup({
  // ...
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify( 'production' )
    })
  ]
}).then(...)
1
2
3
4
5
6
7
8
9
10

# Pré-Compilando Templates

Ao usar templates no-DOM ou template em strings no-JavaScript, a compilação de template para função de renderização é executada em tempo real. Isso geralmente é rápido o suficiente na maioria dos casos, mas é melhor evitar se seu aplicativo for sensível ao desempenho.

A maneira mais fácil de pré-compilar templates é usando Componentes Single-File - as configurações de compilação associadas executam automaticamente a pré-compilação para você, portanto, o código compilado contém as funções de renderização já compiladas em vez de template em strings brutos.

Se você estiver usando o Webpack e preferir separar JavaScript e arquivos de template, você pode usar vue-template-loader (opens new window), que também transforma os arquivos de template em funções de renderização do JavaScript durante a etapa de compilação.

# Extraindo CSS do Componente

Ao usar Componentes Single-File, o CSS dentro dos componentes é injetado dinamicamente como tags <style> via JavaScript. Isso tem um pequeno custo em tempo de execução e, se você estiver usando a renderização do lado do servidor, causará um "flash de conteúdo sem estilo". Extrair o CSS em todos os componentes no mesmo arquivo evitará esses problemas e também resultará em melhor minificação e armazenamento em cache do CSS.

Consulte as respectivas documentações de ferramentas de compilação para ver como isso é feito:

# Rastreando Erros do Tempo de Execução

Se ocorrer um erro em tempo de execução durante a renderização de um componente, ele será passado para a função da configuração global app.config.errorHandler se tiver sido definida. Pode ser uma boa ideia aproveitar esse gatilho junto com um serviço de rastreamento de erros como o Sentry (opens new window), qual fornece uma integração oficial (opens new window) para Vue.

← Roteamento →