We’re lazy…

Update: it’s out now!
https://reactjs.org/blog/2018/10/23/react-v-16-6.html

Berawal dari Tweet om Dan ini

And here’s another one for React.lazy(). It adds seamless code splitting to React, powered by Suspense. https://t.co/ukfSOJiO1V pic.twitter.com/m77dnpwbMk

— дэн (@dan_abramov) October 19, 2018

Ya, React.Lazy() ini menjadi impian pada developer. Dengan React.Lazy() kita bisa import komponen lain secara lazy dan membuat code-splitting semakin mudah. Sebelum React.Lazy() biasanya harus menggunakan loadable (https://github.com/jamiebuilds/react-loadable).

Tapi kan di atas baru RFC, kalau kita mau pakai lazy loading di React tanpa loadable bisa gak? Bisa jawabannya, justru tulisan ini untuk membahas ini.

Pada dahulu kala ketika saya menjadi Head of Engineering di salah satu Startup Media dan Event terbesar di Asia, ada roadmap untuk revamp mobile website menjadi lebih ringan dan modern, salah satunya menjadi PWA.

Website sebelumnya (yang saat ini juga masih) seluruh bundle JavaScript di-download pada saat pertama kali. Apapun itu, dari code login, user profile, settings, dsb. Secara performance tidak terlalu baik karena user mendownload apa yang mereka belum butuhkan. Soal tips performance, saya tidak akan bahas lagi karena ada tulisan yang lebih lengkap dari Irfan Maulana ini.

Berbagai best practice yang bisa kita pelajari dan optimalkan dalam memuat halaman website

Pada website baru ini (yang akhirnya tidak pernah publish dan selesai karena sesuatu-hal-yang-tidak-bisa-diceritakan), kami memutuskan menggunakan Lazy Loading dan Code Splitting di React.

Akhirnya setelah berkelana di Internet (dan tentunya StackOverflow), kami membuat ini

Cara memanggilnya

1import asyncComponent from 'commons/AsyncComponent'  
2const Button = asyncComponent(() => import('./Button'))

Semoga code snippet di atas bermanfaat dan berguna.

Happy coding!