Publicando em Produção

Habilitando o Modo de Produção

Em desenvolvimento, Vue proporciona uma grande quantidade de avisos para lhe ajudar a escapar das enrascadas mais comuns. Entretanto, estas Strings de aviso se tornam desnecessárias em produção e sobrecarregam o tamanho de sua aplicação. Além disso, algumas checagens têm um pequeno custo de desempenho durante a execução que pode ser evitado ao habilitar o modo de produção.

Sem Empacotadores

Se você está utilizando a compilação completa, ou seja, incluindo diretamente o Vue através de uma tag <script> sem uma ferramenta de build, tenha certeza que utilizará a versão minificada (vue.min.js) para produção. Ambas as versões podem ser encontradas no guia de Instalação.

Com Empacotadores

Utilizando uma ferramenta de build como Webpack ou Browserify, o modo de produção será determinado pelo valor da variável process.env.NODE_ENV internamente no código-fonte do Vue, sendo o modo de desenvolvimento seu valor padrão. Ambos os empacotadores oferecem maneiras de sobrescrever esta variável para habilitar o modo de produção, sendo que as mensagens de aviso serão removidas pelos minificadores durante o empacotamento. Todos os modelos de projeto vue-cli já vêm com isto pré-configurado para você, mas pode ser interessante saber como funciona:

Webpack

Utilize o DefinePlugin do Webpack para indicar o ambiente de produção, de forma que blocos de aviso possam ser imediatamente removidos pelo UglifyJS durante a minificação. Exemplo:

var webpack = require('webpack')

module.exports = {
// ...
plugins: [
// ...
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
})
]
}

Browserify

Rollup

O procedimento é parecido com o do Webpack. Configure utilizando o rollup-plugin-replace:

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

rollup({
// ...
plugins: [
replace({
'process.env.NODE_ENV': '"production"'
})
]
}).then(...)

Pré-Compilando Templates

Quando estiver usando templates in-DOM ou template strings in-JavaScript, a transformação para funções render ocorre em tempo real. Isto é geralmente rápido o bastante na maioria dos casos, mas é melhor evitar se a aplicação for muito sensível a variações de desempenho.

A forma mais simples de pré-compilar templates é utilizar Componentes Single-File - os processos de build associados automaticamente realizam a pré-compilação para você, desta forma o código final já contém as funções render em vez de template strings puras.

Se você estiver utilizando Webpack e preferir separar seu JavaScript dos arquivos de template, você pode utilizar vue-template-loader, o qual transforma os arquivos de template independentes em funções render durante o processo de build.

Extraindo CSS de Componentes

Quando estiver usando Componentes Single-File, o CSS dentro deles é dinamicamente injetado na forma de _ tags_ <style> pelo JavaScript. Isto tem um pequeno custo durante a execução, e se você estiver utilizando server-side rendering, ocorrerá um efeito de “flash de conteúdo não estilizado”. Extrair o CSS de todos os componentes no mesmo arquivo pode evitar estes problemas, além de resultar em uma melhor minificação do CSS e melhor cache.

Acesse a documentação da respectiva ferramenta de build para ver como é feito:

Rastreando Erros de Renderização

Se um erro ocorrer durante a execução da renderização de um componente, este será passado para a função global Vue.config.errorHandler, se ela estiver definida. Pode ser uma boa deixar este gancho definido juntamente com um serviço de rastreio de erros como o Sentry, o qual possui uma integração oficial para o Vue.