Visualize o tamanho dos arquivos de saída do webpack com um mapa de árvore interativo dentro do seu projeto com nuxtjs.
Sabemos como é importante colocar em produção aplicações que tenham o melhor desempenho possível, porém conforme começamos a desenvolver um projeto adicionamos diversos pacotes para determinadas tarefas e no final isso terá um impacto no desempenho da aplicação, como podemos análisar isso utilizando o nuxtjs?
Recentemente descobri uma forma muito fácil e interativa para mapear e análisar os pacotes que estão sendo utilizados no projeto, podemos criar um comando simples no package.json da seguinte forma:
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"analyze": "nuxt build --analyze"
}
ou podemos executar direto no terminal com yarn
yarn build --analyze
ou até mesmo utilizando o comando npx
npx nuxt build --analyze
com isso o webpack analyzer deve ser inicializado em seu navegador e com isso podemos visualizar toda a árvore de pacotes que o projeto está utilizando
Temos também uma barra a esquerda que permite que você escolha quais pedaços mostrar com os seus devidos tamanhos. podemos ver um exemplo disso na imagem abaixo:
Você também pode clicar duas vezes nas caixas, passar o mouse sobre elas para obter mais detalhes e clicar com o botão direito em um pedaço para ocultá-lo facilmente ou para ocultar todos os outros pedaços.
Espero que esse artigo possa ajudar você a analisar seu projeto e melhora-lo, vejo você no próximo post.
Link: [https://www.npmjs.com/package/webpack-bundle-analyzer]
Top comments (0)