confirmar se uma lib está sendo usada

Fala ai Enzo, tudo bem? Tem uma ferramente do Webpack bem legal que mostra os arquivos finais gerados após o processo de build e seus tamanhos:

https://www.npmjs.com/package/webpack-bundle-analyzer

Com ela é possível encontrar as bibliotecas em uso também.

Espero ter ajudado.

Obrigado Matheus!!

Desculpe a ignorância :) , nas instruções fala apenas para instalar via npm, depois colocar o código de plugin e rodar o webpack-bundle-analyzer.

Mas para colocar o plugin eu preciso criar um arquivo webpack.config.js, é isso?! E depois de criado eu coloco o código abaixo dentro desse arquivo

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}
`

E feito isso deveria dar o comando webpack-bundle-analyzer ?! Que que está faltando fazer?

Fala ai Enzo, muito bem, a ideia seria mais ou menos essa.

O proximo passo é rodar o cli para que ele suba um servidor local e builde as estatísticas para você, exemplo:

npx webpack-bundle-analyzer build/stats.json

Se tudo deu certo no final do comando, você deveria ver uma mensagem informando o endereço para acessar e visualizar os dados gerados.

Espero ter ajudado.

Boa Matheus,

deu certo :) . Preciso estudar melhor esse gráfico. Pelo visto ele deixa bem claro quanto cada coisa pesa mas aparentemente ele não diz se está sendo utilizado ou não pela aplicação né.. Meu receio é começar a remover libs e só lá na frente eu descobrir que ela era necessária em alguma parte do código.

Fala Enzo, na verdade se ele está no gráfico é porque a aplicação está utilizando, caso seja uma lib que foi instalado e não foi utilizada (importada) em nenhum lugar, a mesma não vai aparecer no gráfico (não deveria).

Espero ter ajudado.

Entendi, legal.

Mas creio que como essas libs estejam declaradas por exemplo no app.module então teoricamente vão aparecer no gráfico né.

Que que você faria se por exemplo pegasse um projeto que estivesse com umas libs do tipo touchSwipe, waypoints, isotope e que você não soubesse onde que elas estão sendo chamadas (em uma aplicação com muitas páginas e vários .services). Ou seja, minha dúvida é: como descobrir onde que essas libs estão sendo aplicadas para saber se consigo otimizá-las ou descartá-las...

Fala ai Enzo, vamos lá:

Mas creio que como essas libs estejam declaradas por exemplo no app.module então teoricamente vão aparecer no gráfico né.

Sim, era para elas estarem listadas no analyzer.

como descobrir onde que essas libs estão sendo aplicadas para saber se consigo otimizá-las ou descartá-las...

Esse caso é um pouco complicado, o que eu faria iria depender do tamanho do projeto, se for um projeto bem grande com uma certa idade, ai eu tentaria partir para algo mais automático.

Sobre as formas automáticas, tem uma lib chamada depcheck, parece ser bem boa:

https://medium.com/fuzzy-code/how-to-check-unused-npm-packages-977d06f0f15a

Não cheguei a utilizá-la mas tem bastante download na npm e com mudanças recentes no projeto.

Se for um projeto pequeno ou novo, eu tentaria ver manualmente mesmo, dar um find no projeto por importações com o nome da biblioteca, dar um npm un para removê-la e tentaria rodar a aplicação novamente (esse passo seria mais seguro com projetos que possuem testes).

Espero ter ajudado.

Muuuito obrigado Matheus. Vou dar uma olhada nesse depcheck!

Uma dúvida mais simples. Eu estou vendo o curso de gulp para tentar automatizar e melhorar algumas coisas nesse projeto do angular, principalmente para tentar reduzir o tamanho dos arquivos. Como esse curso de gulp foi feito faz +- 5 anos, isso me deixou na dúvida se ainda vale a pena usar o gulp com angular ou se o próprio angular tem algumas formas de otimizar isso ?

Fala Enzo, vamos lá:

Como esse curso de gulp foi feito faz +- 5 anos, isso me deixou na dúvida se ainda vale a pena usar o gulp com angular ou se o próprio angular tem algumas formas de otimizar isso ?

Hoje em dia eu recomendaria o Gulp apenas para projetos mais simples, exemplo: Lading page, site pessoal, site estático e tals...

Em aplicações com tecnologias e arquitetura mais avançada, seja: Angular, Vue, React, Svelte, Ember, Elm, etc... Eu recomendo utilizar o Webpack.

Espero ter ajudado.