Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Webpack bundlers state
Semelhante a Webpack bundlers state (20)
Webpack bundlers state
- 1. Webpack and the state of bundlers 1@matheus1lva
- 3. Agenda • Terminologia • o que é um bundler • O que é o webpack e o que não é • Webpack vs Parcel • Começando • Novos Conceitos • Code Splitting • Split Chunks • Boas praticas • Under the hood • What happens when you run webpack 3@matheus1lva
- 5. Terminologia • Chunks:arquivos criados como resultado do build • Bundle: todos os arquivos criados (a pasta dist inteira) 5@matheus1lva
- 6. • Um bundler javascript é uma ferramenta que coloca todos os seus codigos e suas dependencias em 1 ou mais arquivos O que é um bundler js css assets bundle.js 6@matheus1lva
- 8. A não, webpack não!!! Configs Plugins Loaders Chunks?? Code Splitting?? Hot reload Tree-shaking 8@matheus1lva
- 9. O que é e o que não é • Não é um task runner • Não se compara 1-1 ao gulp/grunt • Gera uma arvore de dependencias baseada no entrypoint 9@matheus1lva
- 11. Webpack • Tem bilhões de opções • extensivel e customizavel • Dificil de configurar • Da pra fazer qualquer coisa! • Code splitting de diversas maneiras • Incluindo commonJS • Cache basico • ecosistema altamente acoplado • codigo fonte dificil de entender/debugar 11@matheus1lva
- 12. Parcel • 0 configuração necessária (de verdade) • Tem um mundo de coisas padrão • post-css • preset-env • typescript • reason • Code splitting e treeshake • Mais rápido (cache é da arvore de dependencias inteira) • facil uso • funciona com mono repos • código fáceil de ler • paralelismo • multiplos targets 12@matheus1lva
- 13. Qual deles é melhor? • Depende do seu caso de uso... • Se vc não precisa de algo excepcional, use o parcel • Senão use o webpack • Ainda existem boas alternativas, tipo o rollup.js que está com tudo! 13@matheus1lva
- 14. Com webpack você faz o que quer! 14@matheus1lva
- 16. Entry Point • Um entrypoint, é onde o bundler começa a olhar para as dependências e construir a arvore de dependências • More on later 16@matheus1lva
- 17. Entry Point • Tem diversos jeitos de se definir 17@matheus1lva
- 18. Loaders • Adicionam funcionalidades especiais ao webpack. 18@matheus1lva
- 19. Loaders • Fun Fact: eles são excecutados como funções, na ordem reversa que são declarados! • Será executado como 19@matheus1lva
- 21. Plugins • Eles podem fazer um monte de coisas, de criar outros arquivos a upload para S3 21@matheus1lva
- 22. Plugins • Baseado em uma interface tapable • Async ou sync • Hooks são possivel em diversos pontos da compilação (ex: afterDone) • É bem complexo, eu admito, mas quando você conhece todos os hooks, você entende todo o resto • Tapable: https://github.com/webpack/tapable 22@matheus1lva
- 24. Tree Shaking • É um termo do javascript para dead-code elimination • Deémde da estrutura estatica dos ES2016 modules, isso é, import e export • Remove código não usado • Por isso é muito importante usar named import 24@matheus1lva
- 25. Code Splitting • Separa código em chunks que podem ser carregados paralelamente ou on demand. • chunk size menor === loading faster 25@matheus1lva
- 26. Como fazer code split • Dynamic Import 26@matheus1lva
- 27. SplitChunks • Indica como splitar/criar new chunks • Desenvolvedores podem contrar o tamanho minimo para sofrer split, maximo, estratégia, etc. Onde: • Novos chunks podem ser compartilhados ou node_modules • Chunk > 30kb (min+gz) • Outros casos de uso especificos. • O default do webpack cabe na maioria das necessidades 27@matheus1lva
- 28. SplitChunks • Mais configssss!!!!! https://webpack.js.org/plugins/split-chunks-plugin 28@matheus1lva
- 31. Boas práticas • Sem dependencias como entrypoints (deixa o webpack cuidar disso) • Code split se sua aplicação precisar carregar rápido • Facinho, por que não fazer? • React-loadable, React suspense (react.lazy)!! 31@matheus1lva
- 32. Best Practices • Predictable long term cache 32@matheus1lva
- 34. • Webpack-nano • Simples, pequena, rapida, completa. • Maintainer • webpack-plugin-serve • Evolução do webpack-serve • Bundle criado mais rapidamente • Usa o Koa ao invés do express • Melhor DX e velocidade de HMR 34@matheus1lva
- 35. Por debaixo dos panos 35@matheus1lva
- 37. you can put the same code on http://astexplorer.net/ 37@matheus1lva
- 38. Exemplo simples • ronami/minipack - https://github.com/ronami/minipack 38@matheus1lva
- 39. • Remote/Network Cache • Combination of cache stores • Increase DX • Docs melhores! • Migration guide Ta, e agora? O que falta 39@matheus1lva
- 40. V5 - Persistent Caching - Easier and better Long Term Caching - Improved Tree-Shaking - Reduced Runtime - No node.js polyfilling by default - Muitos Breaking Changes - Tree Shaking (internal and external) • Experimental - Top Level Await (HOT!!!!) https://github.com/webpack/changelog-v5/blob/master/README.md 40@matheus1lva
- 41. Benchmarks 36 0.984 41 16 0.135 3.56 0 5 10 15 20 25 30 35 40 45 webpack 5 parcel 2 fastpack parcel Chart Title Cold Start (s) Hot start (s) @matheus1lva 41
- 42. Parcel 2 (beta) • https://github.com/parcel- bundler/parcel/issues/3640 @matheus1lva 42
- 43. Parcel 2 • Suporte a monorepo @matheus1lva 43
- 44. Fastpack • Escrito em reason/ocaml • Compilação rápida demais • Builds incrementais super fáceis • Mega rápido • Instável ainda • Pouco maduro, < 1.0 44@matheus1lva