Melhorando a performance de aplicações React utilizando Code Splitting

O tempo de carregamento é um fator importante no engajamento dos usurios, mais da metade dos usuários relatam que abandonam sites que levam mais de três segundos para carregar.

Nessa aula iremos demonstrar algumas estratégias para diminuir o tempo de carregamento do nosso sistema, utilizando o Lazy e o Suspense do React e o Magic Comments do Webpack.

Requisitos:

• NodeJs v14

Como rodar:

• npm install
• npm start

Como analisar o bundle:

• npm run build:analize
• npm run build -- --stats && npx webpack-bundle-analyzer build/bundle-stats.json -m static -r build/bundle-stats.html -O

Referência:

• Template
• React: Code Splitting
• Webpack: Bundle Analyzer
• Webpack: Bundle Analyzer + Create React App
• Webpack: Magic Comments
• Webpack: Preloading/Prefetching
• Artigo: JavaScript Start-up Optimization

Expert

Paulo Duarte